Text & font properties in CSS

Text and font properties in the Cascading Style Sheets serve to set the appearance of individual characters in a word or line of text. The main problems are unavailable fonts and mapping of (variant) glyphs to character positions.

Font properties

Selecting a font can either be done with the font property or with the six partial font properties. If font is present, it overrides the other font properties and the application is expected to extract the proper values for them from the single font as well as it can.

Where the column default has a value in parentheses (), it is the value that is the default for the root element (which cannot inherit anything). A value (-) means that the default value is application dependent.

The table says that font.size is not inherited, but the default value, 0, effectively means that the size is the same as the parent's font size. So, the relative size is not inherited, but the absolute size is.

The application is should do its best to find fonts that closely match the given properties, but it will not always succeed perfectly. How fonts and/or styles are substituted depends on the font, the user's preferences and the applications intelligence.

The text.encoding property holds a list of zero or more mappings from characters (or character codes, i.e., numbers) to glyph identifiers. The glyph identifiers are the Adobe/Postscript glyph names (when available, otherwise AFII numbers). All characters not mentioned in this encoding have their default mapping, which depends on the font.

The font.family and font properties can be lists of one or more fonts. The meaning of this is twofold: (1) when a font is unavailable, the next font in the list is tried, and (2) when a character is not available in one font, the next font is tried. This is particalarly important with multilingual documents (which use Unicode as character set), for many fonts will only contain a small set of glyphs.

Text properties

Text spacing causes letters within a word to be `spaced out'. The normal inter-letter spaces are multiplied by the given factor. The factor can be given as a decimal or as a percentage: `%' simply means `times 0.01'. Note that spacing is different from justifying a line (which only changes spaces between words) and expansion (which stretches the letters themselves).

Text transformation can change upper case into lower case and vice versa, provided the characters have an upper/lower case equivalent. (The application will have a mapping table built in). Note that text transformation is different from selecting a `small-caps' style for text.style, although a font transformation and a size change together may occasionally serve as a poor man's small-caps if a real small-caps font is not available.

Underlines, overlines and strike-through lines are applied to letters and also to spaces between words, even when those spaces are stretched as a result of line justification. Spaces that are the result of tabs (<TAB> in HTML) do not get lines. The visually best position of the lines can often be found in the meta-information of a font. If the font has no such parameters, the application should use some heuristics.

The background color can have the special value `none', to indicate that the background of the window itself is used. `None' effectively means `transparent'. This is different from no value at all, since in that case the property is inherited and the parent's background color need not be transparent.

The area that is colored by the background color depends on other properties of the element. If the element is block-like (i.e, it has both a line break before and after it), the color will fill a rectangle that includes the whitespace around the element. Otherwise only the background behind letters and spaces is filled and margins and tabs are left to an ancestor element. See below for the precise filling rules when the element is block-like

Line breaks, margins and rules

Dimensionless numbers are relative to a default unit, which is equal to the em of the default font for horizontal lengths and equal to the line height of the default font for vertical heights. The default font is application dependent (see above). Dimensioned lengths can use pt (1 point = 1/72 inch), mm, inch (1 inch = 25.4 mm), etc.

If an element has the break.before property, the contents of the element will start on a new line and there will be white space above that line equal to the maximum of break.before and the previous element's break.after (if present).

If an element has the rule.before property, there will be a horizontal rule above the element, separated from it by the given amount of whitespace. If an element has a rule.before property, but no break.before, the latter is implied, with a value of 0.

The page break properties are only useful for paged media. When one element specified a value for page.after and the next element for page.before, then the highest absolute value is used.

An element is called a block starting element if it has break.before or rule.before. It is a block ending element if it has break.after or rule.after. An element is called a block element if it is both a block starting and block ending element.

When a block element has a background color, that color fills a rectangle that includes the whitespace between the text and the rules on all four sides, but it doesn' t fill the whitespace of the margins and the breaks above and below. See the figure.

(Back) to style sheet overview