• Contents
• Paragraph Alignment
• First Line Indent
• Text Overflow
• Spacing
• Vertical Alignment
• Leading
• Paragraph Spacing
• Text Decoration
• Transform
• Shadow & Stroke
• White Space
• H&J
• Kerning & Ligatures

Paragraph Alignment and First Line Indent

To control the text’s alignment, use: text-align: (start, end, left, right, center, justify). As different text flow directions push what right and left can mean, there has been a move to adopt start and end as the nomenclature instead of left and right.

To specify the first line indent, use: text-indent: and supply a length or a percentage. It will be a negative indent if you supply a negative value.

Someday soon there will be more control over justified text, as the CSS3 specifications for that are already in place. You will then be able to specify how text is to be justified: text-justify auto, lose, distributed and how the last line will be justified: text-last-line auto, start, end, center, justify, but the browsers have yet to implement these justification controls.

The Text Overflow Property

When there is too much text for the box, it is possible to specify the text overflow mode — if, and only if the box also has the overflow property — text-overflow:clip, ellipsis, ellipsis-word. Try removing the overflow property and the text-overflow property breaks down.

Text Spacing, Vertical Alignment and Leading

The ability to control the spacing between Letters, otherwise known as tracking, and words is easily accomplished, but know that the controls are a bit course for small text sizes. The increments are based on the character’s rendering, and that depends on the screen in use. Some of the high resolution displays will provide better controls than what are currently considered normal resolution displays.

The vertical alignment of characters, or superscript and subscript, is done with the vertical-align property, using the following values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage and length. Super and text-top are set to around 75% of the line-height. You can specify a percentage beyond that, but doing so will increase the leading for that line. Put in a value of 200% and you will see what I mean.

Leading is specified by either relative or an absolute measurement with the line-height property. Relative measurements are based on the em that has been specified for the type, while a height in pixels is absolute, and do not change with changes in the size of the text.

Paragraph Spacing

Paragraph spacing is accomplished through padding and margins. Space before and space after is padding: 10px 0. The left margin is also controlled by padding or margins, and the right margin can be controlled by the paragraph width in addition to padding and margins.

Text Decoration, Text Transform, Text Shadow and Text Stroke

Though these properties affect the individual character more than the flow of characters, they belong to text and not font properties. The text-decoration: none; property/value combination is most often used to remove the default underline from links. Text decoration is used to add an underline, overlain or strike-through to the text.

CSS3 adds the ability to isolate the different parts of this property, and once it becomes adopted, will allow for individual adjustment of style, color and location of the line.

The text-transform property sets the text to lowercase or uppercase.

It is also possible to put a shadow on the text itself using the text-shadowproperty with the following value: length, length, length, color; where the first two values are the horizontal and vertical distance, the next value is the size of the blur and then comes the color.

Last but not least is the ability in CSS3 to add a text stroke. This is not yet supported by all browsers, but will soon be: text-stroke: width, color;

White Space

White space processing and line feed behavior are ubiquitous defaults that determine the behavior of how text flows in an HTML document. The default behavior is to collapse multiple spaces into one space and to ignore returns. Some of the tags, like <pre> do make use of a change in whitespace, rendering the text as it is written, preserving multiple white spaces and line feeds. I use the <pre> in the CSS code view for that purpose, for example.

You can change the white space defaults by changing the value of the white-space-treatment property: ignore, preserve, ignore-if-before-linefeed, ignore-if-after-linefeed, ignore-if-surrounding-linefeed . The same is true of line feeds (or carriage returns, remember the type writer?) with the linefeed-treatment property: auto, ignore, preserve, treat-as-space, treat-as-zero-width-space, ignore-if-after-linefeed. The shorthand for white space processing is the white-space property and the values are: normal, pre, nowrap, pre-wrap, pre-lines.

White Space and Line Return Demo
The space in default white-space collapses and returns are ignored. Change that default behavior.
#space h3{
	letter-spacing: .1em;
	word-spacing: .1em;
}
#space p {
	white-space: pre;
}

Change the white-space from normal to pre or pre-wrap and you’ll see the text as it is in the HTML text editor, with soft-wrap off or, as in this example, on:

White Space and Line Return Demo
The space in default white-space collapses and returns are ignored. Change that default behavior.
#space h3{
	letter-spacing: .1em;
	word-spacing: .1em;
}
#space p {
	white-space: pre;
}

Hyphenation and Justification

Hyphenation has arrived with CSS3, but Chrome does not support it. Safari and Firefox require prefixes. Manual hyphenation is accomplished by inserting a conditional soft hyphen U+00AD or ­.

In auto mode, words may be broken at appropriate hyphenation points as determined by the conditional soft hyphen character or automatically by the browser using a hyphenation resource.

It is also possible to hyphenate text for improved justification using javascript. Download hyphenator.js and it can prepare your text for justification on the fly. For more information, read the List Apart article, The Look that Says Book.

Kerning Pairs & Ligatures

The text-rendering property improves kerning pairs & ligatures using text-rendering to optimize legibility.