CSS style for leading dots

I'm working on a CSS style which produces dots for a table of contents page. The code is based on https://code.google.com/p/wkhtmltopdf/issues/detail?id=1073.

The idea is to create a div with lots of dots in it and overlay it with a span-elements (text and page-number), which have a white background.

This works quite good, except for following two issues:

dots are "cut" (screenshot: http://i.imgur.com/VRJQCP5.png)
if a text-element requires more than one line, it doesn't get displayed

Code:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:outline="http://code.google.com/p/wkhtmltopdf/outline"
                xmlns="http://www.w3.org/1999/xhtml">
    <xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
                doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
                indent="yes"/>
    <xsl:template match="outline:outline">
        <html>
            <head>
                <title>Table of Contents</title>
                <style>
                    body {
                    padding: 0cm;
                    font-family: "Georgia";
                    font-size: 12pt;
                    }
                    h1 {
                    text-align: left;
                    font-size: 18pt;
                    font-family: "Georgia";
                    font-weight: Normal;
                    margin: 0;
                    padding: 0 0 0 0mm;
                    }
                    /* We set the height of the DIV and place the link and page number absolutely.
                    The DIV is filled with dots, but these are hidden by the link and span which have a white
                    background.
                    */
                    div {
                    position: relative;
                    height: 16pt;
                    line-height: 16pt;
                    padding: 0;
                    margin: 4pt 0 2pt 0;
                    white-space: nowrap;
                    overflow: hidden;
                    }
                    a, span {
                    position: absolute;
                    top: 0;
                    display: inline-block;
                    line-height: 16pt;
                    background-color: white;
                    }
                    a {
                    left: 0;
                    text-decoration: none;
                    color: black;
                    }
                    span {
                    right: 0;
                    text-align: right;
                    padding-left: 4pt;
                    }
                    ul {
                    padding-left: 0;
                    list-style: none;
                    }
                    ul ul {
                    font-size: 100%;
                    padding-left: 0em;
                    }
                </style>
            </head>
            <body>
                <h1>Table of Contents</h1>
                <ul>
                    <xsl:apply-templates select="outline:item/outline:item"/>
                </ul>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="outline:item">
        <li>
            <xsl:if test="@title!=''">
                <div>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
                    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
                    <a>
                        <xsl:if test="@link">
                            <xsl:attribute name="href">
                                <xsl:value-of select="@link"/>
                            </xsl:attribute>
                        </xsl:if>
                        <xsl:if test="@backLink">
                            <xsl:attribute name="name">
                                <xsl:value-of select="@backLink"/>
                            </xsl:attribute>
                        </xsl:if>
                        <xsl:value-of select="@title"/>
                    </a>
                    <span>
                        <xsl:value-of select="@page"/>
                    </span>
                </div>
            </xsl:if>
            <ul>
                <xsl:apply-templates select="outline:item"/>
            </ul>
        </li>
    </xsl:template>
</xsl:stylesheet>

Does anyone know how I could fix those issues? Thanks!

标签： html css xslt xslt-1.0

3条回答

来，给爷笑一个

2楼-- · 2019-04-30 05:27

I know you were looking for a CSS solution, but just for fun, I created a JavaScript version of this. (I don't know if it's possible to avoid the cut dots using pure CSS.)

$("a").each(function(){
    var rowHeight = $(this).height();
    while ($(this).height() === rowHeight) {
        $(this).append(" .");
    }
    $(this).html($(this).html().slice(0,-2));
});

FIDDLE: http://jsfiddle.net/9MJsz/

0人赞添加讨论(0) 举报

贼婆χ

3楼-- · 2019-04-30 05:27

Its not exactly the same as what you're currently doing, but you could simply have each item in a div element with border-bottom:1px dotted #000;.

Alternatively, take a look here for a similar thread, and relevant CSS answer

0人赞添加讨论(0) 举报

ゆ、 Hurt°

4楼-- · 2019-04-30 05:37

While this may not be ideal, you could try 2 things to get rid of (or lessen) the "cut" dots and bad appearance. First, reduce the size of the dots. The smaller the dots the less likely and less noticeable the issue is. Second, put a space after the chapter name. This would prevent 2 dots from being really close like you showed in your screenshot.

Reducing the size of the dots might also aid in showing the difference between the dots at the end of chapter names and the leading dots.

Obviously, this is not an ideal solution.

0人赞添加讨论(0) 举报

CSS style for leading dots

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间