Text Styles

There are several style settings that pertain to the arrangement and appearance of text within a container element. These styles are shown in the following table.

CSS and DOM Reference	Values
text-align:alignment object.style.textAlign="alignment"	Sets the horizontal alignment of text within an element. The alignment can be      left      center      right      justify
line-height:height object.style.lineHeight="height"	Sets the height of lines of text in an element; specify a      measurement (px, pt, n%, em, en)      normal
letter-spacing:spacing object.style.letterSpacing="spacing"	Sets the spacing between letters in an element; specify a      measurement (px, pt, n%, em, en)      normal
text-indent:size object.style.textIndent="size"	Sets the size of indentation of the first line of a block of text; specify units of      measurement (px, pt, n%, em, en)
text-transform:case object.style.textTransform="case"	Sets the case of words in a text block using      capitalize      lowercase      uppercase      none
text-decoration:style object.style.textDecoration="style"	Sets a style using      underline      overline      line-through      none

Figure 10-8. Text styles.

The following paragraph and table of radio buttons permit you to view the results of changing text characteristics of the paragraph. Click the radio buttons in any combination to view the style changes.

Code for this application is very similar to that used for font settings. The radio buttons apply text characteristics through an onclick event handler that calls a function pertinent to the style setting. The function call passes along the style value to apply. In this script, however, global variable PAR is declared and assigned a reference to the paragraph. This assignment permits use of the variable in the functions in place of the full DOM reference document.getElementById("PAR"). It is a way to save typing effort.

<script type="text/javascript">
var PAR = document.getElementById("PAR");

function ChangeAlign(Align) {
  PAR.style.textAlign = Align;
}

function ChangeHeight(Height) {
  PAR.style.lineHeight = Height;
}

function ChangeLSpace(LSpace) {
  PAR.style.letterSpacing = LSpace;
}

function ChangeIndent(Indent) {
  PAR.style.textIndent = Indent;
}

function ChangeTransform(Transform) {
  PAR.style.textTransform = Transform;
}

function ChangeDecorate(Decorate) {
  PAR.style.textDecoration = Decorate;
}

</script>


<p id="PAR" style="border:solid 1; padding:10">
  Here is a paragraph of text that has various alignment characteristics 
  that can be changed dynamically. Click the radio buttons below to view 
  combinations of text style settings.
</p>

<table>
<tr>
  <td>
    <b>textAlign</b><br/>
    <input type="radio" name="Align" onclick="ChangeAlign('left')" checked/>left<br/>
    <input type="radio" name="Align" onclick="ChangeAlign('center')"/>center<br/>
    <input type="radio" name="Align" onclick="ChangeAlign('right')"/>right<br/>
    <input type="radio" name="Align" onclick="ChangeAlign('justify')"/>justify<br/>
  </td>
  <td>
    <b>lineHeight</b><br/>
    <input type="radio" name="Height" onclick="ChangeHeight('normal')" checked/>normal<br/>
    <input type="radio" name="Height" onclick="ChangeHeight('10px')"/>10px<br/>
    <input type="radio" name="Height" onclick="ChangeHeight('15px')"/>15px<br/>
    <input type="radio" name="Height" onclick="ChangeHeight('1.5')"/>1.5<br/>
  </td>	
  <td>
    <b>letterSpacing</b><br/>
    <input type="radio" name="Lspace" onclick="ChangeLSpace('normal')" checked/>normal<br/>
    <input type="radio" name="Lspace" onclick="ChangeLSpace('-1px')"/>-1px<br/>
    <input type="radio" name="Lspace" onclick="ChangeLSpace('2px')"/>2px<br/>
    <input type="radio" name="Lspace" onclick="ChangeLSpace('3px')"/>3px<br/>
  </td>
  <td>
    <b>textIndent</b><br/>
    <input type="radio" name="Indent" onclick="ChangeIndent('0px')" checked/>0px<br/>
    <input type="radio" name="Indent" onclick="ChangeIndent('5px')"/>5px<br/>
    <input type="radio" name="Indent" onclick="ChangeIndent('15px')"/>15px<br/>
    <input type="radio" name="Indent" onclick="ChangeIndent('25px')"/>25px<br/>
  </td>	
  <td>
    <b>textTransform</b><br/>
    <input type="radio" name="Transform" onclick="ChangeTransform('none')" checked/>none<br/>
    <input type="radio" name="Transform" onclick="ChangeTransform('capitalize')"/>capitalize<br/>
    <input type="radio" name="Transform" onclick="ChangeTransform('uppercase')"/>uppercase<br/>
    <input type="radio" name="Transform" onclick="ChangeTransform('lowercase')"/>lowercase<br/>
  </td>
  <td>
    <b>textDecoration</b><br/>
    <input type="radio" name="Decorate" onclick="ChangeDecorate('none')" checked/>none<br/>
    <input type="radio" name="Decorate" onclick="ChangeDecorate('line-through')"/>line-through<br/>
    <input type="radio" name="Decorate" onclick="ChangeDecorate('overline')"/>overline<br/>
    <input type="radio" name="Decorate" onclick="ChangeDecorate('underline')"/>underline<br/>
  </td>
</tr>
</table>

Listing 10-15. Code to change paragraph text styles dynamically.

Once again, you may not have occasion to change text characteristics on the fly. Still, the capability is available if you need it.

Units of Measurement

Various property settings require a unit of measurement be specified. For instance, the textIndent property requires a value to indicate how far from the left margin to indent a paragraph, the letterSpacing property indicates the amount of space between letters, and the and lineHeight property gives the amount of vertical spacing between lines of text.

Units of measurement can be specified in px (pixels), pt (point size), % (percentage of the width or height of the container), em (em spaces), or en (en spaces). If no unit of measurement is specified, the default is in pixels except for lineHeight, where the number is a multiplier. That is, the setting lineHeight="2" indicates double spacing.

TOP | NEXT: Text & Background Colors