Re: CSS and 'tabs'?

Scott Romack wrote:

> I am wondering about text formatting and tabs. Not a 'tabbed interface' 
> like Google. Tabs like in a text layout program. This is very handy for 
> aligning items horizontally without having to use a fixed width font 
> (yikes). A good example would be a table of contents, or better yet 
> labels and form fields!

   Tab stops, like those available in Microsoft Word (including left, 
center, right and decimal) may be useful in XHTML.  The idea has been 
mentioned previously, and was listed as one of the questions in the list 
of suggested extensions to CSS, called Smart Tabs [1].  However, there 
are questions about the need for using tabs to line up data.

   A tabbed structure, like a table of contents may be able to be marked 
up with existing elements, and styled with appropriate margins and/or 
paddings, etc... to line up appropriatly.  For example, a table of 
contents could be marked up like this:
<dl>
	<dt>Chapter 1</dt> <dd>1</dd>
	<dt>Chapter 2</dt> <dd>15</dd>
	<dt>Chapter 3</dt> <dd>27</dd>
</dl>
   (I'm not exactly sure wether a definition list is actually the most 
appropriate structure here, but it demonstrates the concept well enough)

   The features, available in word, to style tabs with underlines, or 
dots, etc... could be done using the ::before element, with a 
border-bottom property applied.

   If tabs were introduced, there are four new properties that I can 
think of that would need to be introduced.

1. tab-stop (space/comma seperated list of lengths)
2. tab-type (space/comma seperated list of types:
              left, center, right and decimal,
              where each one applies, respectively,
              to one of the lengths)
3. tab-style (space/comma seperate list of styles:
               solid, dotted, etc...
               maybe the same as the border styles)
4. tab-stop-default (a length specifing a default length for the tab 
stop positions, similar to the default tab stops in word)
   If there were less tab-types or tab-styles specified than tab-stops, 
then the last type/style would be applied to all following stops as well.
eg.
div {
     tab-stop: 100mm 120mm 150mm;
     tab-type: left left right;
     tab-style: solid dotted;
     /* solid applied to the first,
        and dotted would be applied
        to the second and third tabs */
     tab-stop-default: 20mm;
     /* Specifies the default tab stop lengths which are applied after 
the final tab stop given by the tab-stop property */
}

   The suggested names may also need to be improved.

CYA
...Lachy!

[1] http://www.w3.org/TR/1998/NOTE-CSS-potential-19981210#id1554439764

Received on Saturday, 20 December 2003 02:19:29 UTC