Text¶

There are plenty of other ways you can change how text renders in addition to font and color. That is the subject of this lesson.

Text Align¶

Anyone who's ever used a word processing program knows what text alignment is for - typed words can be aligned to the left, right, or center of their container (review the Inheritance section for a refresher on how "containers" or "boxes" related to web pages). The CSS property that controls this behavior on a web page is text-align. Available settings for this property are left, right, center, and justify. Assigning the justify value to the text-align property will cause text to "stretch" to align to both the left and right edges of a page element's container.

p {
  text-align:center;
}

Following are screen shots of the same text aligned all four ways.

Left

Right

Center

Justify

Vertical Align¶

Sometimes a block of text may not completely fill the container it's in. In those cases, you can often set what kind of vertical alignment you want it to have. It can be aligned to the top, middle, bottom, baseline, or several other settings. For a complete overview of the available settings and what they all mean, read W3Schools' vertical-align topic. The CSS property that controls vertical alignment is vertical-align.

Two settings for the vertical-align property that are of particular note are sub and super. You use these settings to create subscripts and superscripts.

.align_to_the_top {
  vertical-align: top;
}

.align_to_the_bottom {
  vertical-align: bottom;
}

.superscript {
  vertical-align: super;
}

.subscript {
  vertical-align: sub;
}

Direction¶

While English reads from left to right (ltr), many other languages (eg. Arabic, Hebrew, Urdu) read from right to left (rtl). The CSS property that controls which direction text is printed in is the direction property. Available values are ltr and rtl.

p {
  direction: ltr;
}

The same text in ltr and rtl:

ltr

rtl

Obviously, the results might not be quite what you expect. :) Unless you work with foreign languages a lot, you are likely to use this property much.

Indentation¶

You use the text-indent property to indent an element a certain amount from the left side of its container. You can specify the amount as a percent of the parent container, or a specific length. The length can be set using the same measures as font-size - pt, px, em, cm, mm, in.

.12ptindent {
  text-indent: 12pt;
}

.halfindent {
  text-indent: 50%;
}

Letter Spacing¶

Each font family has its own default letter spacing - the amount of room between letters in a word. You can adjust this using the letter-spacing CSS property. You set a width in the same values that you can use for text-indent. To make the letters closer together, just use a negative value for letter-spacing.

.default {
  letter-spacing: normal;
}

.farther_apart {
  letter-spacing: 3px;
}

.closer_together {
  letter-spacing: -1px;
}

Word Spacing¶

Rather than adjusting the space between each and every letter in a page element, you might want to change only the amount of space between words. That's where the word-spacing property comes in. You set it just as you do with letter-spacing.

.default {
  word-spacing: normal;
}

.farther_apart {
  word-spacing: 3px;
}

.closer_together {
  word-spacing: -2px;
}