Menu
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:
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!
682
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/
55
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
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
