Leader Character

With word processing programs (like Microsoft Word), you can specify a tab
leader character, which is defined by the Microsoft Word 2000 Help as:

A solid, dotted, or dashed line that fills the space used by a tab
character. For example, leader characters are often used in a table of
contents to draw the reader's eye across the space between a chapter name
and the page on which the chapter begins.
Example:
Chapter 1............................. Page 5


In addition to a table of contents, this could also be useful for things
like a restaurant menu, or any form of a pricing list.  For example:

Turkey Sandwich...............$4.50
Hot Dog.......................$2.50

or perhaps:

1 King Bed..................$80 / night
2 Queen Beds................$85 / night
Presidential Suite.........$200 / night


In these cases, the leader characters ("...") are presentational only.  In
an HTML+CSS case, a leader character might better be defined to fill any
whitespace (since whitespace is collapsed and tab characters are not applied
to the content).  To my knowledge, there is no CSS approach to creating
something like this, but there may be workarounds to achieve this output
(using tables + css).  The closest I can find is the border-bottom or using
repeating background image, neither of which seems correct.

Example 1: Using border-bottom with a table cell

<html>
<head>
   <title></title>
   <style type="text/css">
   .item { text-align: left; }
   .tabspace { border-bottom: 1px dotted black; }
   .price { text-align: right; }
   </style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="300">
   <tr>
      <td class="item" nowrap>Turkey Sandwich</td>
      <td class="tabspace" width="100%">&nbsp;</td>
      <td class="price">$4.50</td>
   </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="300">
   <tr>
      <td class="item" nowrap>Hot Dog</td>
      <td class="tabspace" width="100%">&nbsp;</td>
      <td class="price">$.75</td>
   </tr>
</table>
</body>
</html>

This approach is less than ideal for several reasons, and I feel dirty even
posting it.  One obvious reason is that it's using tables for presentation.
Also, it requires a table for each line (row) so that the center column can
fill the entire space between the "item" and the "price".  In addition,
because this is using the border, the dotted line actually falls below the
text of the "item" and the "price", when it should be on the same baseline.
Conclusion: This is bad design which yeilds results that are slightly off
from the desired output (but close).

I'm not even going to bother with the a repeating background image because
it's just a horrible idea.  It would require an image of a dot, repeated
over and over.  You would need to know the line-height (so the image would
be certain to be displayed correctly and aligned properly with the text),
and it would just be a pain.

Rather than ramble on, I will get to the point.  Are there any plans for a
CSS implementation of a "leader character" that can be used to fill
whitespace with a dotted, dashed, or solid line?

Regards,
Peter Foti

Received on Monday, 14 July 2003 12:44:05 UTC