Fonts and Text






Fonts and Text

One of the first presentation-specific HTML elements was font, and it's also one of the older HTML elements you still find, all too frequently, in web pages. It's not surprising that font and text properties were of such interest in building web pages. Few changes you can make to an element's style attributes can have such an effect as changing the text or font properties.

Notice I say text or font properties. The font has to do with the characters themselves: their family, size, type, and other elements of the characters' appearance. The text attributes, though, have more to do with decoration attached to the text and include text decoration, alignment, and so on.

Font Style Properties

There are several style attributes for fonts. Their CSS name and the associated JavaScript-accessible style attribute are given in the following list:


font-family

Access it as fontFamily in JavaScript. This adjusts the font family (such as Serif, Arial, Verdana) for the font. When specifying a multiword font family, type the family name exactly; this includes spaces.


font-size

Access it as fontSize in JavaScript. This sets the size of the font. You can use different units when setting the font size. If you use em or pt with the size (such as 12pt or 2.5em), the font is resized according to the web-page reader's personal settings. If you use px (pixel), the font is maintained at that size regardless of user settings. Specify some unit when setting font-size with JavaScript or use one of the predefined font sizes of xx-small, x-small, small, medium, large, x-large, and xx-large. You can also use relative sizing, smaller or larger, in addition to using a percentage based on the parent element.


font-size-adjust

Access it as fontSizeAdjust. This is the ratio between the height of the letter x, and the height specified in font-size. This setting preserves this ratio, though it's rarely given.


font-stretch

Access it as fontStretch. Expands or contracts the font. You can use one of the following: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, ultra-expanded, or extra-expanded.


font-style

Access it as fontStyle. You can use normal (default), italic, or oblique.


font-variant

Access it as fontVariant. Use small-caps as a value if you want to use the small-cap variant of the font.


font-weight

Access it as fontWeight. Set the font's weight (boldness). Use normal, bold, bolder, lighter, or a numeric of 100, 200, 300, 400, 500, 600, 700, 800, or 900.

As Figure demonstrated, changing the font of an element changes the font for all text contained within that element unless overridden by the style settings of a contained elementthe cascade part of Cascading Style Sheets. This is inherent to the behavior of CSS; using JavaScript to change the font dynamically has no impact on this effect.

You can change many of the font attributes all at once using just font itself. In the following code:

div.style.font="italic small-caps 400 14px verdana";

The font attribute is used without any subproperty to set the style, variant, weight, size, and font-family. Many of the CSS properties have shortcut methods such as this. They're assigned in JavaScript just as they would be in CSS. In CSS, all the settings are to the right of the colon. In JS, everything that's to the right of the colon is included in the quotes on the right side of the assignment statement.

The Text Properties

For this chapter, I decided to group several attributes that affect the appearance of text, though unlike font, they're not part of the same family. The CSS text attributes I most often set are:


color

Access it as color. Color for the text.


line-height

Access it in JavaScript as lineHeight. The space from the top of one line to the bottom of another. Specify a value in a manner similar to specifying the font size, or use normal.


text-decoration

Access it as texTDecoration. Use none, underline, overline, or line-through. Please don't use blink.


text-indent

Access it as textIndent. How much to indent the first line of text.


text-transform

Access it as texttransform. Use none, capitalize (to capitalize every word), uppercase, or lowercase.


white-space

Access it as whiteSpace. Use normal, pre, or nowrap.


direction

Access it as direction. Use ltr (left to right) or rtl (right to left).


text-align

Access it as textAlign. How the text contents are aligned. Use left, right, center, or justify.


word-spacing

Access it as wordSpacing. Amount of spacing between words. Use normal, or specify a length.

What are typical uses for modifying font and/or text properties? You can expand a block of text to make it more legible, or highlight the data for some reason. In Figure, clicking on one of two links will either make a text block very large, as well as justified, or will return it to what it was previously.

Modifying a text block

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Read THIS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[

function makeMore(  ) {
  var div = document.getElementById("div1");
  div.style.fontSize="larger";
  div.style.letterSpacing="10px";
  div.style.textAlign="justify";
  div.style.textTransform="uppercase";
  div.style.fontSize="xx-large";
  div.style.fontWeight="900";
  div.style.lineHeight="40px";
}

function makeLess(  ) {
   var div = document.getElementById("div1");
   div.style.fontSize="smaller";
   div.style.letterSpacing="normal";
   div.style.textAlign="left";
   div.style.textTransform="none";
   div.style.fontSize="medium";
   div.style.fontWeight="normal";
   div.style.lineHeight="normal";
}
//]]>
</script>

</head>
<body>
<p>
<a href="" onclick="makeMore(  ); return false;">Make it more</a> <a href="" onclick="makeLess(  ); return false;">Make it less</a>
</p>
<div id="div1">
<p>
One of the first presentation-specific HTML elements was font, and it's also one of the older HTML elements you still find, all too frequently, in web pages. It's not surprising that font and text properties were of such interest in building web pages. Few changes you can make to an element's style attributes can have such an effect as changing the text or font properties. </p><p>Notice I say text or font properties. The font has to do with the characters themselves: their family, size, type, and other elements of the characters' appearance. The text attributes, though, have more to do with decoration attached to the text and include text decoration, alignment, and so on.</p>
</div>
</body>
</html>

Chances are you wouldn't increase the text as large as this example, but it does show what kind of transformation you can create using JavaScript and CSS. Another typical use is to change the font color of a text field associated with a form element or block of text to show it doesn't apply; to literally "gray" out the font.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows