CSS Text Properties

2008 Oct 17

Text is the content, fonts are used to display the content.

The center value for text-align is different than the <center> because the latter affected elements other than text.

CSS does not define or implement that a hyphenated word is split at the hyphen.

The middle value aligns the middle of the inline element's box 0.5ex above the baseline of the parent element, where 1.0ex is defined relative to the font-size for the parent element. Since 1.0ex is typically 0.5em, middle is 0.25em (although some use x-height).

The percentage value raises or lower the baseline of the element (or the bottom edge of a replaced element) by the specified amount - not of the parent.

Affects all block-level elements, table columns, and position of last line of a justified element. For inline elements direction applies only if unicode-bidi is embed or unicode-bidi.

<p style="direction: ltr;">left to right.</p>

<p style="direction: rtl;">right to left.</p>

following is from CSS2.1 specification.

• normal : The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-elements, implicit reordering works across element boundaries.
• embed : If the element is inline, this value opens an additional level of embedding with respect to the directional algorithm. The direction of this embedding level is given by the direction property. Inside the element, reordering is done implicitly. This corresponds to adding an LRE (U+202A; for direction: ltr) or an LRE (U+202B; for direction: rtl) at the start of the element and a PDF (U+202C) at the end of the element.
• bidi-override : This creates an override for inline-level elements. For block-level elements, this creates an overrride for inline-level descendents not within another block. This means that, inside the element, reordering is strictly in sequence according to the direction proeprty; the implicit part of the bidirectional algorithm is ignored. This corresponds to adding an LRO (U+202D; for direction: ltr) or an RLO (U+202E; for direction: rtl) at the start of the element and a PDF (U+202C) at the end of the element.

.dec { color: teal; 
       text-decoration: underline 
                        line-through
                        overline; }
...
<p>Example of 
  <span class="dec">all</span> lines.</p>

Note that blink has never been supported by IE.

<p style="text-indent: 2em; 
  border: 1px dashed;">Indent me.</p>

The line-height is the distance between the baslines of text (not the size of the font). It determines how much the height of each element's box is increased or decreased. Typical use is to alter the spacing of lines. Actually, this property controls the leading, which is the extra space between lines of text beyond the font's size.

The line-height specifies a minimum, the actual value can be larger.

Any non zero line-height (which can be negative) is split in half and applied before and after the line.

This value is added (can be negative) to the normal space between letters of 0.

.ls { word-spacing: 6px; color: teal; }
...
<p>Example of 
  <span class="ls"> ABCDE</span> l-s.</p>

.lsn { word-spacing: -3px; color: teal; }
...
<p>Example of 
  <span class="lsn"> ABCDE</span> neg l-s.</p>

This value is added (can be negative) to the normal space between words of 0. A word is defined as non-whitespace characters surrounded by whitespace.

.ws { word-spacing: 6px; color: teal; }
...
<p>Example of 
  <span class="ws">AA BB CC</span> w-s.</p>

.wsn { word-spacing: -8px; color: teal; }
...
<p>Example of 
  <span class="wsn"> AAAA BBBB CCCC </span> w-s.</p>