Next / Previous / Contents / TCC Help System / NM Tech homepage

12. Other text properties

In addition to font selection, CSS has a number of other properties for controlling the presentation of text.

12.1. The line-height property

The line-height property controls the “leading,” that is, the vertical distance between the baselines of two adjacent lines.

The property can take any of these values:

  • normal: Set the line height to the default size.

  • A number (with or without a decimal) to specify the multiple of normal line height. For example, line-height: 2 specifies double-spacing; line-height: 1.2 would give you 20% more than normal spacing.

  • A number followed by a percent sign gives you that percent of the normal leading. For example, line-height: 150% specifies 1.5 times the normal leading.

  • A dimension (see Section 6.1, “Dimensions”) sets the leading to that dimension. For example, line-height: 12pt gives you 12-point leading.

12.2. The text-indent property

Use the text-indent property to control the indentation of text paragraphs (and text in block elements generally). You can use two kinds of values for this property:

  • Use a dimension (see Section 6.1, “Dimensions”) to specify the size of the indentation directly.

  • A number followed by a percent sign sets the indent size to that percentage of the width of the browser window. For example, text-indent: 10% specifies that paragraphs should be indented one tenth of the width of the browser window.

12.3. The text-align property

Normally, text is set “ragged right”, with a straight left margin. You can get different paragraph shapes by setting the text-align property to one of these values:

  • left for a straight left margin and a ragged right margin, the default appearance;

  • center to set the text with both left and right margins ragged;

  • right for straight right and ragged left margins; or

  • justify for straight left and right margins.

12.4. The text-decoration property

This property is used to add certain effects to text:

  • underline adds an underline below the text.

  • overline places a line over the text.

  • line-through sets the text in “strike-out” type, with a line through the text. This style is often used to show that is being deleted in a particular revision.

  • blink makes the text blink on a Web page. This effect can be extremely annoying and should be used sparingly, if at all.

12.5. The text-transform property

These properties can change the case of text:

  • The capitalize value capitalizes the first letter of each word.

  • The uppercase value changes all letters to capitals.

  • The lowercase value changes all letters to lowercase.

12.6. The white-space property

You can control how white space (spaces and tab characters) are treated by setting the white-space property to one of these values:

  • normal treats whitespace in the usual way for its enclosing element.

  • nowrap collapses each region of whitespace within a line to a single space and ignores line breaks, setting the entire content as one long line.

  • pre treats text as in the pre element: all whitespace and line breaks are displayed exactly as they appear in the HTML source file.

12.7. The letter-spacing property

For extra emphasis, you can use the letter-spacing property to display text with extra spaces between the letters. The value can be:

For example, this rule:

  h1.shout { letter-spacing: 1pt; }

would add one point of horizontal space between the letters of any heading element <h1 class='shout'><h1>.

12.8. The word-spacing property

Use the word-spacing property to get extra spacing between words. Values can be:

12.9. The vertical-align property: Shifting the baseline

This property allows you to shift text vertically relative to its normal baseline. Values may be any of:

baseline

This text's baseline is the same as the baseline of the block that contains it. This is the default value.

middle

The vertical center of this text is aligned with the center of the containing block. The center of a line of text is above the baseline by an amount half the x-height of the text. The x-height of a font is the height of a character with no ascenders or descenders, such as “x”.

sub

Shift this text down as if it were a subscript. Note that this does not change the size of the text.

super

Shift this text up as if it were a superscript. This property does not change the size of the text.

text-top

The top of this text will be vertically aligned with the top of text in the containing block.

text-bottom

The bottom of this text will be vertically aligned with the bottom of text in the containing block.

int%

Raise this text an amount specified as the percentage of the current line-height. For example, if the current line-height is 12 points, this declaration

vertical-align: 25%;

would raise the text 3 points.

dimension

Raise the text by the given dimension. For example, this declaration

vertical-align: -2mm;

would lower the text by two millimeters. See Section 6.1, “Dimensions”.

12.10. The quotes property: Specifying quote characters

The quotes property is used to declare one or more pairs of quote symbols to be used in setting off quoted text. The default is to use double quotes “…” for the first level of quotation, and single quotes ‘…’ for quotes within quotes.

The value for this property may be either of:

  • A list of character strings to be used as quote symbols. The first two strings are used as the first-level open and close quote characters. The next two characters are the second-level open and close quote characters.

  • The keyword none, if you don't want any quote symbols to appear.

For example, this declaration would set up the British convention of single quotes at the outermost level and double quotes at the second level:

quotes: "'" "'" '"' '"'

The quote symbols you set up with this declaration are invoked when the content property contains open-quote and close-quote values. For more on this property, see Section 16, “The content property: Specifying content in pseudo-elements”.