Style Demo

This page demonstrates some non-trivial style constructs.

Autonumbers

Here we use styles to obtain section numbering in 'legal style'.

Style statements

This is achieved through the following style sheet (see HTML & CSS Summary for more information).

BODY	{ counter-reset: section; }
H1	{ counter-reset: subsection; }
H1:before	{ counter-increment: section; content: counter(section) ". "; }
H2:before	{ counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }
and in HTML we use the normal elements:
<H1>Autonumbers</H1>
<H2>Style statements</H2> <!-- etc. -->

Note that the generated content are not in the HTML and won't show up when for example retrieved via scripting.
Also be carefull with HTML elements inside the Hn-elements (i.e. between <Hn> & </Hn>) like anchor definitions (<A name=…); sometimes they seem to interact with the :before (and potentially :after) style elements (browser bug ?).

Paragraph Layout

Indented Paragraph

Here we demonstrate how you can create paragraphs where the first line is indented.
Of course you can have the text in each paragraph start with a couple of blanks (that would be non-blank spaces:  ), but that is asking for mistakes. You can try to accomplish that automatically by using a :before construct. Or maybe a first-line construct. But it is straightforward through a text-indent declaration.
To show the extend of the paragraph, it is contained in a <div> with 30% of window width.

Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.

And another paragraph with a lot of text to make the line wrap and see what happens.

Style statements for Indented Paragraph

The indented paragraph is easy to accomplish; the style declarations is only:

.indent	{ text-indent: 5ex; }
and in HTML:
<P class=indent>Need a lot of text …	<!-- activate the class -->

If you want all your paragraphs indented, you would declare the style on the P-tag instead of a class which would have to reference every time.

Hanging Paragraph

The 'complement' of an indented paragraph, a hanging paragraph, is also easy through similar means:

Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.

And another paragraph with a lot of text to make the line wrap and see what happens.

Style statements for Hanging Paragraph

.hanging	{ margin-left: 5ex; text-indent: -5ex; }
and in HTML:
<P class=hanging>Need a lot of text …	<!-- activate the class -->

Highlights

Highlights are separate texts containing more detailled information on a specific subject. 
They are usually separated from the main text as not to disturb the line of thought.

This is to show how to create a highlights. It is in fact surprisingly simple. Again, the whole construct in this demonstration is contained to restrict the width. And here the highlight is defined at the top, but that is not a requirement.

Need a lot of text to make the line wrap and see what happens. More text to have another line wrap. And another line with a lot of nonsense text to make the line wrap and show what happens. And another line of nonsense.

Style statements for Highlights

As a class in the style sheet (assuming you want to standardise the appearance of highlights, otherwise you would define them in-line):

.highlight	{	width: 40%;	/* or e.g. 20em; the width */
		float: right;	/* essential */
		background-color: silver; border: 1pt solid grey;	/* appearance (modest) */
		padding: 0.5ex; }	/* distance between border and text */

and in HTML:

<P style="margin-top:0;">	<!-- keep paragraph text close to header (or make a style class for this) -->
<DIV class=highlight>Highlights are separate …	<!-- activate the highlight class, in this case at the top -->
</DIV>This is to show how to …	<!-- end highlight, start main text -->
<BR style="clear: right"></P>	<!-- optional, to make sure that highlight extend is passed -->

List styles

UL with varying bullets	UL with my own bullet
3 Countdown. Need a lot of text to make the line wrap and see if the left margin lines up. 2 List element 2. 1 … and counting … 0 and we have liftoff…	List element 1. Need a lot of text to make the line wrap and see if the left margin lines up. List element 2. …

Above table is set at width 50% to force line wrapping.

Style statements for UL with varying bullets

First of all, we don't want a special list change how all other lists look. So we use the class var for ULs with varying bullets. And in fact we don't change the UL, but the LIs in an <UL class=var> (hence the selector construct).

UL.var>LI

{ list-style-type: none; text-indent: -1.8ex; }

/* in the style sheet */

We suppress the normal bullet, and negatively indent all the first lines of the LIs. The amount of indent –here 1.8 'average' characters– depends on what you use for bullet and separator (you may have to experiment with indent size). Actually, 'ex' indicates the height of the letter 'x', but that is about its width and considered 'average character width'.

In the HTML body we use

<UL class=var>	<!-- activate the class -->
<LI>3 Countdown …	<!-- use the LI specific bullet (here '3') and a separating space -->
<LI>2 List element …	<!-- the LI specific bullet is now '2' -->

For more information see HTML4 & CSS Summary.

Style statements for UL with my own bullet

Similarly to 'UL with varying bullets', we use a class for ULs with an arrow as bullet. But we need 2 declarations (can not combine a ':before' with other declarations).

UL.arrow>LI	{ list-style-type: none; text-indent: -2.7ex; }	/* in the style sheet */
UL.arrow>LI:before	{ content: "\21D2 "; }	/* ⇒ is not supported */

Similarly to 'UL with varying bullets', we suppress the normal bullet and negatively indent all the first lines of the LIs. But as '⇒' is wider than an 'average' character, we need a 2.7 character indent.
Then there is another problem: the glyph we have chosen for bullet is not in the normal ASCII-set, and the &«charname»; or &#«charnumber»; constructs are not supported in style statements. We have to use the hexadecimal escape construct for UTF-8 in CSS strings: '\21D2 ' (= ⇒ = ⇒ = ⇒ = '⇒') terminated by a space ('\' is the CSS escape character, the terminating space will not be part of the string, so you may need another space as separator). See HTML_char for glyphs.

The HTML is straightforward:

<UL class=arrow>	<!-- activate the class -->
<LI>List element 1…	<!-- use as a normal LI -->

First Line

First Line
The first line will be bold. The extend of the first line depends on the actual width (i.e. varies with the window's width). See what happens if you make the window narrower or wider.

In normal pages, the available width may vary so beforehand it is unknown how many words will fit on the first line. The first line pseudo-element provides the capability to do something special with what actually becomes the first line (see HTML4 & CSS Summary). Typical use is to bold and/or transform the text to upppercase or small-caps. In above example it is to bold the text on the first line and transform it to 'small caps' (like it occurs in some newspapers).

First Line style statements

TD.fline	{ background-color: white; /* other general TD attributes */ }
TD.fline:first-line	{ font-weight: bold; font-variant: small-caps; }
and its usage in HTML:
<TD class=fline>The first line …	<!-- use First Line class -->

First Letter

There are two common variants for the use of first letter, and in both the first letter is considerably larger than normal. In the first variant the initial letter has the normal baseline of the text, so sticks out at the top. This is also called 'init cap' (though that seems a misnomer).
In the second variant the first letter is lowered so its top is at the same level as the rest of the line. This is called a 'drop cap'.
In both cases the 'first letter' must be a letter or a digit, and any (opening) quote should be included.

Init Cap style statements

Here the first letter is made twice as large as normal, and made blue. As the character size is increased, the line size is automatically increased as well. While the vertical alignment stays on the baseline, the space above and below the first letter will be increased. So the first line will shift down to accomodate the larger letter, but the space between the first and the second line will also increase, resulting in a second line that starts lower than normally expected. To illustrate this effect, the first letter is given a green border in the table's left cell.

Init Cap with border	Init Cap	Init Cap variant
Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.	Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.	Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.

The funny thing though, is that the space below the baseline is for 'descenders' (letters which stick out below the baseline, like g, j, p, q, y). But those letters are all lowercase, not a capital letter we would use as the first letter of a line (if you want to make sure, add a 'text-transform: uppercase' to the style declaration). So we don't need the space below the baseline. And we can decrease the line height.
When we assume that the space below the baseline for descenders is about 20% of the line height, we can set that height to 80% of the new font size (i.e. the size we just doubled).

TD.initcap	{ background-color: white; /* other general TD attributes */ }
TD.initcap:first-letter	{ font-size: 2em; line-height: 0.8em; color: blue; }
and its usage in HTML:
<TD class=initcap>Need a lot of text …	<!-- use initcap class -->

An alternate presentation of First Letter is with a distinct background. Now we can't limit line-height as that would cause the background to cover the box border (at least with IExplorer).

TD.initcap	{ background-color: white; /* other general TD attributes */ }
TD.initcap:first-letter	{ font-size: 2em; color: white; background-color: red; }
and its usage in HTML:
<TD class=initcap>Need a lot of text …	<!-- use initcap class -->

Drop Cap style statements

Initially the first letter is also made twice as large as normal, but this time the letter is lowered so it takes room on the second line (and potentially more lines). This is effectively done by making it a block that floats left on the top line; the rest of the text will flow around the first letter block. Again, we have given the first letter box a green border in the left cell.

Drop Cap with border	Drop Cap
Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.	Need a lot of text to make the line wrap and see what happens. More text to have another line wrap.

We can adjust the size of the first letter so it is about the height of 2 lines (2.4em), and line height 0.9em seems sufficient to get the top-of-text at the same level.

TD.dropcap	{ background-color: white; /* other general TD attributes */ }
TD.dropcap:first-letter	{ font-size: 2.4em; line-height: 0.9em; float: left; color: blue; }
and its usage in HTML:
<TD class=dropcap>Need a lot of text …	<!-- use dropcap class -->

Note that the rendering by distinct browsers may not be the same.

=O=