W3C home > Mailing lists > Public > www-style@w3.org > December 2005

Re: Printing a Book with CSS

From: Lachlan Hunt <lachlan.hunt@lachy.id.au>
Date: Thu, 01 Dec 2005 12:50:37 +1100
Message-ID: <438E56ED.3000100@lachy.id.au>
To: Andrew Fedoniouk <news@terrainformatica.com>
CC: www-style <www-style@w3.org>

Andrew Fedoniouk wrote:
> Speaking about %% units....
> This could be done in various ways using them.
> 
> First and most obvious example is here:
> http://terrainformatica.com/w3/tocfspu.jpg
> ...
> <li>A short title<span class="filler" />1</li>

%% isn't necessary to achieve a similar effect in other browsers using 
display: table-*;

ul, li { margin: 0; padding: 0; }
li { display: table; width: 100%; border-collapse: collapse; }

li a, li .number, li .leaders
             { display: table-cell; white-space: nowrap; }
li .leaders { border-bottom: 1px dotted black; width: 100%; }
li .number  { text-align: right; content: '1'; }

<ul>
<li><a href="#">Testing Leaders</a><span class="leaders"></span><span 
class="number"></span></li>
</ul>

Once browser support improves, I believe those spans could be replaced 
with li::after and li::after::after.  The above currently works in at 
least Opera and almost works in Firefox except for the generated content 
within the span.

Tantek has produced a similar effect a long time ago using tables 
instead of display:table-*;, which I based that CSS on.
http://tantek.com/CSS/Examples/dotleaders.html

-- 
Lachlan Hunt
http://lachy.id.au/
Received on Thursday, 1 December 2005 01:51:07 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:42 GMT