12.2. 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. 12.2.1. 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 Example 12-1 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. 12.2.2. 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 Example 12-3, 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. Example 12-3. 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 > <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. |
