06 Text Formatting

Posted on by


Text is how the characters are arranged in the flow. This includes writing direction to accommodate languages other than English, so that the inline progression of the text can orient its flow from left-to-right, right-to-left, or top-to-bottom. There are a lot of controls for writing other languages that are not necessary for writing in English. We are going to stick with English.

Many of the properties control flow. Properties such as white space, padding, margin and line hight are not text-properties, but inform how the text is to flow. Instead of using multiple<br> to add space before or after, you add padding or margin.


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.

CSS Code View

Paragraph Alignment and First Line Indent

You can change the alignment of this header, this paragraph and the attribution by changing the alignment property

— onno

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.

CSS Code View

Hover over this line of text and the remaining text will appear blue.

Hover over this line of text and the remaining text will appear red


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.

CSS Code View

Text Layout Properties

Change the text by applying different styles. Notice that when you make a mistake, the style reverts to the default style. The 1st element is h3. The 2nd and 3rd elements are p. The 2nd p element can be selected separately and given styling in addition to the style determined by the more general p selector.

Being able to select different elements is the key to using CSS. The roll of the selector is, for that reason, extremely important, but it usually takes a little while before students learning about CSS get a handle on just how they work. While it is easy enough to see in simple examples, the selectors, the cascade that determines them, and the inheritance of the different properties keeps web designers on their toes. Leave out one character and the whole thing can come crashing down.


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.

CSS Code View

Paragraph spacing is accomplished through padding and margins. Space before and space after is . 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.

Paragraph spacing is accomplished through padding and margins. Space before and space after is . 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.

Do not forget the p + p rule, for subsequent paragraph behavior, and first line rule. and first character pseudo class selections.


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;

CSS Code View

Text Style Properties


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.

CSS Code View

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 &shy;.

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.

CSS Code View

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.

CSS Code View