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

Re: Printing a Book with CSS

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 30 Nov 2005 18:14:16 -0800
Message-ID: <001f01c5f61c$ee416ef0$c302000a@internal.toppro.net>
To: "Lachlan Hunt" <lachlan.hunt@lachy.id.au>
Cc: "www-style" <www-style@w3.org>


----- Original Message ----- 
From: "Lachlan Hunt" <lachlan.hunt@lachy.id.au>


| 
| 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-*;
| 

Try to reproduce third list item (wrapped line) on the screenshot.

| 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
| 

Andrew Fedoniouk.
http://terrainformatica.com
Received on Thursday, 1 December 2005 02:14:37 GMT

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