Collected by
Elizabeth Janson
Home Page

Using Text Effectively

The properties, or attributes, of text may be organised using
'margin', 'text-align', 'text-indent', 'text-decoration' 'text-transform' and 'vertical-align'. Not all Browsers recognise 'white-space', 'word-spacing' and 'letter-spacing'

margin

Style sheets let us set a margin on any element. This margin is the space between the element, and the edge of the element which adjoins it. For headings and paragraphs, and other so called "block elements" this will usually be the body, but that isn't necessarily the case. Margins can be applied to each edge individually, or to every edge at once. You can specify the margin (which can be either positive or negative) in a number of units, or a percentage.
BODY {margin: 10%}

text-align

The text-align property is intended for use with block-level HTML elements: the document body, divisions, headings, paragraphs, etc. You cannot use it with textual level elements, like font styles, or non-text elements, like an image or a form element.

This is some text

Value	Description	Use
`left`	Text is left justified.	P {text-align : left;}
`right`	Text is right justified.	P {text-align : right;}
`center`	Text is centered within the element.	P {text-align : center;}
`justify`	Text is left and right justified.	P {text-align : justify;}

Vertical-align

The vertical-align property applies only to inline and table-cell elements, to change the vertical position of the element's text within the element itself. You can use one of the keywords described in this Table.

Value	Description
`baseline`	Aligns the baseline of the element with the baseline of the parent
`middle`	Aligns the middle of the element with the middle of the parent
`sub`	Subscripts the element
`super`	Superscripts the element
`text-top`	Aligns the top of the element with the top of the parent element's text
`text-bottom`	Aligns the bottom of the element with the bottom of the parent element's text
`top`	Aligns the top of the element with the tallest element on the line
`bottom`	Aligns the bottom of the element with the lowest element on the line

text-indent

You may want the indent to scale with the font used in the paragraph, and all is not lost in this case. For scalable indents, specify the amount of the indent in ems. An em is an amount of space equal to the height of the current font. If you want an indent equal to three times the font height, you could say

     .three { text-indent : 3em }

As the font grows and shrinks, so will the indent.

Exploiting margins

Conventional indented paragraphs, like this one, indent the first line to the right while keeping the other lines flush to the left margin. The opposite effect, wherein the first line shifts to the left, is known as a "hanging indent" and can also be accomplished with the text-indent property. As we'll see, you will need a little help from the margin-left property to bring it all together.

To shift the first line to the left, use a negative indent amount. The browser will dutifully move the first line. It will not, however, shift the entire paragraph to the right to make room for that shifted first line. Instead, it will just render that first line over whatever happened to be to the left of the paragraph, which is probably not what you wanted.

To fix this, you must use the margin-left property to shift the whole paragraph to the right while you use the text-indent property to pull the first line to the left. Here are two kinds of hanging indents:


     .indent1 { text-indent : -3em; margin-left : 3em }
     .indent2 { text-indent : -3em; margin-left : 6em }

The first hanging indent keeps the first line flush with the existing left margin by setting the indent and margin amounts to the same value. The text shifts right just enough to allow the first line to shift left.

The second hanging indent uses a margin larger than the indent amount, so that the first line does not come all the way back to the left margin. This creates an indented paragraph with a hanging indent, which is handy for lists and other organized layouts in your documents.

Regardless of the kind of indent you choose to use, you'll find that consistent use of the text-indent property will make your documents far easier to maintain and consistently easier to read across multiple browsers. Give up those indenting tricks and move up to the text-indent property!

text-decoration

The text-decoration values you can assign to it are: normal, underline, overline, line-through, and blink. Here is the popular definition that rids all links of the underline beneath them:

A {text-decoration:none}

text-decoration: underline, text-decoration: overline are only useful on <A>. Do not use on other elements (otherwise your site will look shoddy and unprofessional as a result of people clicking on the underlined text under the impression that it was a link).

text-decoration: line-through to emphasize price cuts or similar. This effect is also used by DEL - see the page on HTML tags.

text-transform

This property can transform text. The valid values are: none, capitalize, uppercase, lowercase.

The uppercase words, and the capitalised ones.
Notice the space before the second <span!

The uppercase words, and the capitalized ones (note the 'z').

Not fully supported

white-space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words.
This Text Formatting feature does not work in IE4 and has only partial support in NS4.
Values include: normal, pre, nowrap

<H4 style="white-space: pre">This is     some text </H4>

This is some text

word-spacing

Word Spacing allows you to define the amount of space between words.
Note: This Text Formatting feature does not work in IE4 or NS4.
Values include: normal, length, auto
This is some text

This is some text

letter-spacing

Letter Spacing allows you to define the amount of space between letters in each word.
Note: This Text Formatting feature does not work in NS4.
Values include: normal, length, auto
This is some text

This is some text

Email
CSS begins here

Back to Backgrounds, or on to Font attributes.

This page is part of Elizabeth Janson's web site

http://www.geocities.com/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.