complete css guide

Text layout properties

This group of properties affect how text itself is laid out on a page. These are properties specific to text, providing control over things like line height and letter spacing. In conjunction with the page layout properties (which apply to elements and their position on a page more generally), they provide quite sophisticated layout of web content. At present, though, CSS does not provide the level of page layout as found in page layout applications such as Quark Express and PageMaker. As it is often said, CSS is not desk top publishing for the web.

While text appearance controls in HTML are very limited, CSS provides control over traditional typographic elements such as letter spacing (kern), word spacing (track) and line spacing (leading).

The text layout properties are:

• letter-spacing
• word-spacing
• line-height
• vertical-align
• text-indent
• text-align
• direction
• unicode-bidi

letter-spacing

What it does

The letter-spacing property gives you control over the space between characters, what in traditional typography is known as kern.

Possible values

letter-spacing can be specified in any length unit. Length units are discussed in our section on values. For tighter kern, that is to make characters appear more closely together than is the default, negative letter-spacing can be specified.

In addition, the keyword value normal can be used to specify letter-spacing.

Default values

By default text has a letter-spacing of normal.

Is it inherited?

Elements have the same letter-spacing as their parent element. The letter-spacing value of normal overrides an inherited value.

Hints and suggestions

With a letter-spacing of normal, browsers may adjust letter-spacing values to correctly justify text. With an explicit letter-spacing value, browsers will not adjust letter-spacing.

A relative letter-spacing value, like em or ex, rather than an absolute value. e.g. pts, ensures that the look of the text is more or less the same regardless of the actual font and size in fact used by the browser to draw the text. For more, see our section on length values.

word-spacing

What it does

Traditionally in typography, control over the space between words, what is known as track, has been an important element in page design. Loose tracking tends to cause pages to river, reducing legibility. Rivering is the phenomenon of white space forming vertical columns down a page. This tends to draw the reader's eye down the page, rather than across it. Tight tacking, on the other hand impairs legibility as readers strain to make out words as a whole. We tend to read words as units in themselves, rather than as strings of characters. Tight tracking makes it more difficult to do this.

word-spacing gives control over the track of text.

Possible values

word-spacing can be specified in any length unit. Length units are discussed in our section on values. For tighter track, negative word-spacing can be specified.

In addition, word-spacing can be specified as normal.

Default values

word-spacing by default is normal.

Is it inherited?

The word-spacing of an element is the same as that of its parent element. Setting the word-spacing of an element to normal overrides any inherited word-spacing.

Hints and suggestions

As with letter-spacing, relative rather than absolute word-spacing is recommended. For more, see our section on length values.

line-height

What it does

The line-height property sets the distance between adjacent lines. Strictly, the distance is between the baselines of the adjacent lines. The baseline is the imaginary horizontal line on which characters such as A, B and so on sit. Letters such as y descend below the baseline, to the descent line.

In traditional typography, the space between lines is referred to as leading (pronounced like the metal). The line-height property gives you control over leading.

If you are interested, it's pronounced leading, because lead was traditionally used in rows to separate lines of text. The typesetter would "lead" the text. Glad you asked?

Possible values

line-height can be specified in a number of ways, by multiples, percentages, length units or using the keyword normal.

Multiples

The line-height can be specified as a multiple of the size of the font of the element. Multiples are simply numbers with no units. For example, with a font-size of 10pt, and a line-height of 1.2, the space between the baseline of adjacent lines will be 1.2x10=12pt.

Percentages

Our section on percentages discusses percentage values in detail.

Percentage values for line-height are calculated as a percentage of the font-size of the element. So when a line-height is specified as a percentage value, a similar multiplication occurs to that which we saw above in Multiples. The factor of 1.2 we saw in multiples above translates as a percentage of 120%.

With a font size of 12pt, and a line-height of 200%, the resultant line height (space between baselines) is 12x2=24pt.

Lengths

Our section on values discusses length values in detail.

Rather than setting a multiple of the current font-size, length values nominate a specific value for the line-height. This value can be a relative value such as em or ex, or an absolute value such as pt or cm.

See the section on length values for more on the use of relative and absolute length.

normal

In addition, the line-height can be specified as normal. This overrides otherwise inherited values.

Default values

If no line-height value is specified or inherited, the line-height of an element is normal.

Is it inherited?

The line-height of an element is inherited from the element which contains it. There are however a couple of complicating factors to keep in mind. The following is entering the realm of trainspotters, so feel free to ignore it.

If a line-height is specified as a multiple, then a child element inherits the factor, not the resultant value. In our example above, we saw that a font-size of 10pt, with a line-height of 1.2 results in a distance of 12pts between the baseline of adjacent lines. Now, a child element would inherit a line-height multiple of 1.2, rather than a line-height value of 12pts. So, if a child element had an 8pt font size, the resultant line-height of that element would be 1.2x8=9pt, not the 12pt line height of the parent element.

On the other hand, if the line-height of an element is specified as a percentage or a length value, any child element inherits the value, not the multiple.

Hints and suggestions

As with other properties which can take relative and absolute values, take a look at our discussion of length values in the section of values for suggestions about when each type is appropriate.

vertical-align

What it does

Elements often appear on the same line, or lined up horizontally across a page. The vertical-align property gives control over how elements align vertically across the page.

Possible values

vertical-align can be specified either by one of a set of keywords, or by percentage values.

Keywords

vertical-align can be specified using one of a set of keywords. These keywords work in one of two distinct ways. One group of keywords works relative to the parent element, while the other works relative to the line on which an element appears. In many cases this is essentially the same thing.

The keyword values which are relative to the parent element are

• baseline - aligns the baseline of the element with the baseline of its parent element. If an element does not have a baseline, the bottom is used.
• middle - aligns the vertical midpoint of an item with the baseline of the parent plus half the x-height of the parent.
• sub - subscripts the element.
• super - superscripts the element.
• text-top - aligns the top of an element with the top of the font of its parent element.
• text-bottom - aligns the bottom of an element with the bottom of the font of its parent element.

The keyword values which are relative to the line on which an element appears are

• top - aligns the top of the element with the top of the tallest element on the line on which it appears.
• bottom - aligns the bottom of the element with the baseline of the font of the line on which it appears.

Percentage values

Specifying vertical-align as a percentage value gives rise to a quite complicated situation. The baseline of the element is raised above the baseline of its parent element. By how much? By that percentage of the element's line-height.

For example, {vertical-align: 20%} with an element that has a line-height of 10pt, the baseline of the element will be raised 2 points above the baseline of its parent element.

You can lower the baseline of an element below the baseline of its parent by using negative percentage values.

Default values

If no vertical-align value is set, the vertical-align of an element is baseline.

Is it inherited?

vertical-align is not inherited.

Hints and suggestions

Percentage values are good ways of controlling how images and other non text elements align with text.

text-indent

What it does

Traditionally, in many documents, the first line of every paragraph is slightly indented. text-indent enables you to control how the first line of any element is indented, or outdented.

Possible values

text-indent can be specified using either percentage or length values. See our section on values for detailed descriptions on each.

You can control outdent by giving text-indent negative values, however, different browsers may handle negative values in different ways.

When a percentage value is used, the indent or outdent is that percentage of the width of the parent element.

Default values

If no value is specified or inherited for the text-indent property, no indent or outdent is applied, essentially the property is set to 0.

Is it inherited?

An element has the same indent as its parent element.

Hints and suggestions

A line is not an element as such, and it can vary as the width of a page (window) varies. The text-indent property affects only the first line of an element. To indent an entire paragraph or other element, you can

• place it inside a blockquote (which is what most HTML tools do, but is against the style sheet dictum of separating appearance from content, and so is to be avoided, unless the indented text is in fact a block quote)
• use the margin property to give a left margin
• use the padding property to give a similar effect
• use the left property to set the left position of the paragraph

The margin property is to be recommended, as this is in fact what the property exists for.

Note that not all elements can be given a text-indent property. Only block elements take text indentation. For more on block elements, see the section on type selectors.

text-align

What it does

text-align allows you to specify how the contents of an element should be aligned. text-align can only be applied to block elements. For more on block elements, see the section on type selectors.

Possible values

text-align can be one of

• left
• right
• center
• justify (to double-justify the text both left and right)

Browsers do not have to support the justify value, and generally treat justify the same as left. (For right to left languages such as Arabic, they may treat justify as right.)

Default values

There is no default value for the text-align property. It is the business of a browser to determine how text should be aligned where no alignment has been specified by a style sheet. This might be determined by the writing system, or by user preferences.

Is it inherited?

An element inherits the alignment of its parent element.

Hints and suggestions

When an element has a text-align specified, it is the contents of the element that are affected by the alignment. For example,

table {text-align: center}

centers the contents of table, not the table itself in its parent. In fact then, because text-align is inherited, the actual content of the table cells should appear centered.

To center the element itself, either center the contents of its parent element using text-align, or use the left-margin and right-margin properties, setting each to auto.

The alignment of the contents of the element is relative to the width of the element, not to the whole page.

While fully justifying text on paper is a strong convention that is generally considered to aid legibility, this is not necessarily true on the web. Because determining line breaks for fully justified text which does not "river" is far from simple, the "quick and dirty" approach to this problem that many browsers take often leaves pages less legible than left justified text. Where readability is a significant issue (particularly for large blocks of text), a value of justify is not recommended.

direction

What it does

CSS2 introduced the direction property. direction specifies the base direction for text. In a number of writing systems, unlike the roman system used in western European languages, text flows from right to left. This property allows the direction to be explicitly specified.

Possible values

direction can be either rtl or ltr.

• rtl means that text should flow from right to left
• ltr means that text should flow from left to right

Default values

If no direction value is set, the default value is ltr.

Is it inherited?

An element inherits the direction of its parent element.

unicode-bidi

What it does

This is a specialist area of CSS2 that we don't really need to go into. If you are working with unicode, bidirectional fonts, you'll probably be aware of the issues involved. In short, this property aids in controlling the directionality of unicode text.

Possible values

unicode-bidi can be one of

• normal
• embed
• bidi-override

Default values

If no unicode-bidi value is set, the default value is normal.

Is it inherited?

An element does not inherit the unicode-bidi of its parent element.

© 1997- western civilisation pty. ltd. Contact Us Search Site