An Introduction to Style Sheets: Horizontal Text Alignment Controls

Not every effect will be visible in every browser.

There are four attributes which can adjust the horizontal position of text on the page. Word-spacing and letter-spacing (known as kerning in conventional publishing) are used for individual words and characters. Text-align changes the position of all text in the affected tag. Text-indent is familiar to word processor users as pargraph indent. Word-spacing, letter-sapcing and text-indent can use some or all of the standard units of measure. Not all browsers recognize the full list of units of measure.

Word-spacing can use all eight units of measure. Any value inserted into the word-spacing attribute will be added to the normal word spacing already being applied to the text. Be careful when this attribute is used. Used infrequently and in small amounts it can be very beneficial. If it is used too often in large amounts the text will become difficult or impossible to read. Many important browsers do not support this attribute. If in doubt about your browser test with an extremely large value to see if the browser makes any adjustment. Test thoroughly.

Letter-spacing works in the same way as word spacing except the spacing is between individual characters. If you use a value, then that value is added to the default value. Like word spacing, it can be useful at times and horrible if overused. Like word spacing it can use any of the eight measurement units. Like word spacing it is not widely supported. Test thoroughly.

Text-align and text-indent are different from the spacing attributes: they affect the placement of a paragraph or other portion of text on the page. The text-align values are almost certainly familiar to anyone who has used a word processor: left, center, right, justify. And text-indent is well known in word processors as paragraph indent. The text align attribute can replace the align attribute for text tags in XHTML. Text-indent affects the first line (or only line) of text in a text tag. Text-align:left is the default as is text-indent:none.

Text-indent uses all eight of the measurement units listed above. It can also take a percent as a value.

This one is textalign:center and text-indent:10pt. Text-align and text-indent are different from the spacing attributes: they affect the placement of a paragraph or other portion of text on the page. The text-align values are almost certainly familiar to anyone who has used a word processor: left, center, right, justify. And text-indent is well known in word processors as paragraph indent. The text align attribute can replace the align attribute for text tags in XHTML. Text-indent affects the first line (or only line) of text in a text tag.

This one is textalign:right and text-indent:10pc. Text-align and text-indent are different from the spacing attributes: they affect the placement of a paragraph or other portion of text on the page. The text-align values are almost certainly familiar to anyone who has used a word processor: left, center, right, justify. And text-indent is well known in word processors as paragraph indent. The text align attribute can replace the align attribute for text tags in XHTML. Text-indent affects the first line (or only line) of text in a text tag.

This one is textalign:justify and text-indent:10px. Text-align and text-indent are different from the spacing attributes: they affect the placement of a paragraph or other portion of text on the page. The text-align values are almost certainly familiar to anyone who has used a word processor: left, center, right, justify. And text-indent is well known in word processors as paragraph indent. The text align attribute can replace the align attribute for text tags in XHTML. Text-indent affects the first line (or only line) of text in a text tag.

This one is textalign:justify and text-indent:10%. Text-align and text-indent are different from the spacing attributes: they affect the placement of a paragraph or other portion of text on the page. The text-align values are almost certainly familiar to anyone who has used a word processor: left, center, right, justify. And text-indent is well known in word processors as paragraph indent. The text align attribute can replace the align attribute for text tags in XHTML. Text-indent affects the first line (or only line) of text in a text tag.

Font Family   |   Font Size   |   Font Style   |   Text Style   |   Vertical Spacing   |   Horizontal Spacing

page designed and published by Hands On Communication

First posted: 27 July 2001, 27 juillet 2001
Last edited: 27 July 2001, 27 juillet 2001