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!

回答1:

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/

回答2:

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

回答3:

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.