CSS Cookbook/Lists

Styling Lists

Scientific and other non-fiction works may use lists. Proofers will have rendered lists in ASCII with /*..*/, and if the lists had indices, the proofers likely retained them,

/*
1. Jonquil
2. Tulip
*/

That's fine for the plain text. But for the HTML, such lists ought to be made into HTML ordered or unordered lists. Why? Partly for obsessive neatness's sake; partly because they will render more nicely, especially when an item is long enough that its line needs to fold to fit in the window; and partly because of the remote chance that an etext might be "read" someday by a program that could use the HTML markup to identify a list as a semantic unit.

(Guiguts has a feature that converts lines of text into an HTML ordered or unordered list automatically.)

Using CSS you can persuade the browser to mimic the list styles used in your original work. The Cookbook styles include these rules for lists:

dd, li {
	margin-top: 0.25em; margin-bottom:0;
	line-height: 1.2em; /* a bit closer than p's */
}
ol.AL { list-style-type: lower-alpha; }
ol.AU { list-style-type: upper-alpha; }
ol.RU { list-style-type: upper-roman; }
ol.RL { list-style-type: lower-roman; }
.lsoff { list-style-type: none; }

The rule for list items dd, li uses margin-top to set the spacing between list items, and line-height to adjust the leading between lines of a multi-line item (<dd> is the item markup for the little-used definition-list). It is because these spacings can be controlled separately that an HTML list will render more nicely than the same items left as rows of a table.

The rule for class lsoff turns off list item marking for either a list item (<li class="lsoff">) or an entire list (<ul class="lsoff">). For that item or that list, the browser will not generate bullet or number markers—however, it will indent the item text the same amount. Use this class on the second paragraph of a two-paragraph list item.

If the proofers carefully retained original list item numbers you have a choice to make.

• You can retain them, making them items in a list with class lsoff so the browser doesn't supply its own numbers.
• You can strip them off (easy to do with a regular expression) and let the browser replace them.

The first option is easiest but the second will look nicer when the list indices have two or more digits. Why? Because the browser carefully right-aligns its list numbers against the left-aligned list item text. There's no visible difference when the numbers are single digits with a period. But when they are multi-digit decimal or roman numerals, the browser's numbers will look much neater than manually-entered ones.

You can instruct the browser to number an ordered list using upper- and lower-case alphabetics or roman numerals:

Imprimis. Secundus.	minim. minissimus.
Aardvark. Bonobo.	Aluminium. Bronze.

Using the classes provided (AU, RL, etc.) you can make HTML lists that mimic the style of your book.