Print this Section

  
  

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.

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.

textAlign
left
center
right
justify
lineHeight
normal
10px
15px
1.5
letterSpacing
normal
-1px
2px
3px
textIndent
0px
5px
15px
25px
textTransform
none
capitalize
uppercase
lowercase
textDecoration
none
line-through
overline
underline

Figure 10-9. Changing text styles dynamically.

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