798 Part III ✦ Document Objects Reference With so many properties associated with an object, it may be difficult to locate the specific property you need for a particular style effect. To help you locate prop- erties, the listings that follow are divided into functional categories, ordered by popularity: Category Description Text & Fonts Font specifications, text rendering, text alignment Inline Display & Layout Element flow, alignment, and display Positioning Explicit positioning of “layers” Background Background images and colors Borders & Edges Borders, padding, and margins around elements Lists Details for UL and OL elements Scrollbars Scrollbar colors (IE5.5/Windows only) Tables Details for TABLE elements and components Printing Page breaks and alignment for printed pages Miscellaneous Odds and ends Aural For rendering via speech-synthesis Property values All style object property values are strings. Moreover, many groups of style properties share the same format for their values. Knowing the formats for the fre- quently used values is helpful. The purpose of this chapter is not to teach you about style sheets but to show you how to script them. Therefore, if you see unfa- miliar terminology here, consult online or print instructional material about CSS style sheets. Length Values for length cover a wide range, but they all define an amount of physical space in the document. Because content can be displayed on a video monitor or printed on a sheet of paper, any kind of length value should include a unit of mea- sure as well as the quantity. One group of units ( px, em, ex) are considered relative units, because the precise size depends on factors beyond the control of the style sheet (for example, the pixel density of the display) or units set by elements with more global scope (for example, a P element’s margin em length dependent upon the BODY element’s font-size setting). Absolute units ( in, cm, mm, pi, pt) are more appropriate for printed output. Length units are referred in script according to the following table: elementRef.style 799 Chapter 30 ✦ Style Sheet and Style Objects Unit Script Version Example pixel px 14px em em 1.5em ex ex 1.5ex inch in 3.0in centimeter cm 4.0cm millimeter mm 40mm pica pi 72pi point pt 14pt A length value can also be represented by a percentage as a string. For example, the lineHeight style for a paragraph would be set to 120% of the font size estab- lished for the paragraph by the following statement: document.getElementById(“myP”).style.lineHeight = “120%” Style inheritance — an important CSS concept — often has significant impact on style properties whose values are lengths. Color Values for colors can be one of three types: ✦ RGB values (in a few different formats) ✦ plain-language versions of the color names ✦ plain-language names of system user interface items RGB values can be expressed as hexadecimal values. The most common way is with a crosshatch character followed by six hex numbers, as in #ff00ff (letters can be uppercase or lowercase). A special shortcut is also available to let you specify three numbers with the assumption that they will be expanded to pairs of numbers. For example, a color of #f0f is expanded internally to be #ff00ff. An alternative RGB expression is with the rgb() prefix and three numbers (from 0 to 255) or percentages corresponding to the red, green, and blue components of the color. Here are a couple of examples: document.styleSheets[0].rules[0].style.color = “rgb(0, 255, 0)” document.styleSheets[0].rules[0].style.color = “rgb(0%, 100%, 0%)” Browsers also respond to a long list of plain-language color names originally devised by Netscape. You can see the list with sample colors at http:// developer.netscape.com/docs/manuals/htmlguid/colortab.htm . Not all of those colors are necessarily part of what are known as “Web safe” colors. For a demonstration of Web safe colors, visit http://www.lynda.com/hexh.html. The last category of color values references user interface pieces, many of which are determined by the user’s control panel for video display. The string values cor- respond to recognizable UI components (also called system colors), as follows: elementRef.style 800 Part III ✦ Document Objects Reference activeborder graytext menutext activecaption highlight scrollbar appworkspace highlighttext threeddarkshadow background inactiveborder threedface buttonface inactivecaption threedhighlight buttonhighlight inactivecaptiontext threedlightshadow buttonshadow infobackground threedshadow buttontext infotext window captiontext menu windowframe windowtext Using these color settings may be risky for public sites, because you are at the mercy of the color settings the user has chosen. For a corporate environment where system installations and preferences are strictly controlled, these values could help define a safe color scheme for your pages. Rectangle sides Many style properties control the look of sides of rectangles (for example, thick- ness of a border around a block element). In most cases, the style values can be applied to individual sides or combinations of sides, depending on the number of values supplied to the property. The number of values affects the four sides of the rectangle according to the following matrix: Number of Values Impact 1 All four sides set to the one value 2 Top and bottom sides set to first value; left and right sides set to second value 3 Top side set to first value; left and right sides set to second value; bottom side set to third value 4 Top, right, bottom, and left sides set to individual values in that order For example, to set the border color of an element so that all sides are red, the syntax is elementRef.style.borderColor = “red” To set the top and bottom to red but the left and right to green, the syntax is elementRef.style.borderColor = “red green” Properties that accept these multiple values cover a wide range of styles. Values may be colors, lengths, or selections from a fixed list of possible values. elementRef.style 801 Chapter 30 ✦ Style Sheet and Style Objects Combination values Another category of style values includes properties that act as shortcuts for several related properties. For example, the border property encompasses the borderWidth, borderStyle, and borderColor properties. This is possible because very different classes of values represent the three component properties: borderWidth is a length; borderStyle is based on a fixed list of values; and borderColor is a color value. Therefore, you can specify one or more of these property values (in any order), and the browser knows how to apply the values to the detailed sub-property. Only one value is permitted for any one of these sub- properties, which means that if the property is one of the four-sided styles described in the previous section, the value is applied to all four sides equally. For example, setting the border property to a single value, as in elementRef.style.border = “blue” is the same as setting elementRef.style.borderColor = “blue” But if you set multiple items, as in elementRef.style.border = “groove blue 3px” then you have set the equivalent of the following three statements: elementRef.style.borderStyle = “groove” elementRef.style.borderColor = “blue” elementRef.style.borderWidth = “3px” In the property descriptions that follow, these combination values are denoted by their scripted property names and the OR ( ||) operator, as in border = “borderStyle || borderColor || borderWidth” URLs Unlike other property values containing URLs, a style property requires a slightly different format. This format includes the url() prefix, with the actual URL (relative or absolute) located inside the parentheses. The URL itself is not quoted, but the entire property value is, as in elementRef.style.backgroundImage = “url(chainlink.jpg)” URLs should not have any spaces in them, but if they do, then use the URL- encoded version for the file specification: convert spaces to %20. This format dis- tinguishes a URL value from some other string value for shortcut properties. Text and font properties color IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes elementRef.style.color 802 Part III ✦ Document Objects Reference Controls: Foreground color of an element, primarily used to assign color to text. May also affect edges and highlights of other elements in some browsers. Value: Color specification. Example: elementRef.style.color = “rgb(#22FF00)” font IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Up to six font-related style properties. Value: Combination values: fontStyle || fontVariant || fontWeight || fontSize || lineHeight || fontFamily. See individual properties for their value formats. Example: elementRef.style.font = “bold sans-serif 16px” fontFamily IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Font family to be applied to an element in order of priority. Value: Comma-delimited list of font families to be applied to element, starting with the most preferred font family name. You can also use one of several generic family names that rely on the browser to choose the optimal font to match the class: serif | sans-serif | cursive | fantasy | monospace. Not all browsers support all constants, but serif, sans-serif, and monospace are commonly implemented. Example: elementRef.style.fontFamily = “Bauhaus 93, Arial, monospace” fontSize IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Size of the characters of the current font family. elementRef.style.fontSize 803 Chapter 30 ✦ Style Sheet and Style Objects Value: Lengths (generally px or pt values); relative size constants: larger | smaller; absolute size constants: xx-small | x-small | small | medium | large | x- large | xx-large Examples: elementRef.style.fontSize = “16px” elementRef.style.fontSize = “small” fontSizeAdjust IE/Windows IE/Mac NN W3C CSS2 Compatibility — 5 6 Yes Controls: Aspect value of a secondary font family so that it maintains a similar character height as the primary font family. Value: Number (including floating-point value) or none. Example: elementRef.style.fontSizeAdjust = “1.05” fontStretch IE/Windows IE/Mac NN W3C CSS2 Compatibility — 5 6 Yes Controls: Rendered width of a font’s characters. Value: Constant ultra-condensed | extra-condensed | condensed | semi- condensed | semi-expanded | expanded | extra-expanded | ultra-expanded or wider | narrower | inherit | normal Example: elementRef.style.fontStretch = “expanded” fontStyle IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Italic style of characters. Value: Constant normal | italic | oblique | inherit Example: elementRef.style.fontStyle = “italic” elementRef.style.fontStyle 804 Part III ✦ Document Objects Reference fontVariant IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Rendering characters as small caps. Value: Constant normal | small-caps | inherit Example: elementRef.style.fontVariant = “small-caps” fontWeight IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Rendering characters in bold or light weights. Fonts that support numbered gradations can be controlled by those numbers. Normal = 400; Bold = 700. Value: Constant bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | inherit Example: elementRef.style.fontWeight = “bold” letterSpacing IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Spacing between characters. Used to override a font family’s own characteristics. Value: Length (usually em units, relative to current font size); Constant normal | inherit Example: elementRef.style.letterSpacing = “1.2em” elementRef.style.letterSpacing 805 Chapter 30 ✦ Style Sheet and Style Objects lineBreak IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 —— No Controls: Line break rules for Japanese text content. Value: Constant normal | strict Example: elementRef.style.lineBreak = “strict” lineHeight IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Height of the rectangular space that holds a line of text characters. Value: Length (usually em units, relative to current font size); number (a multiplier on the inherited line height); percentage (relative to inherited line height); constant normal | inherit Example: elementRef.style.lineHeight = “1.1” quotes IE/Windows IE/Mac NN W3C CSS2 Compatibility — 56 Yes Controls: Characters to be used for quotation marks. Value: Space-delimited pairs of open and close quotation symbols; Constant none | inherit Example: elementRef.style.quotes = “« »” rubyAlign IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 5 — No elementRef.style.rubyAlign 806 Part III ✦ Document Objects Reference Controls: Alignment of ruby text within a RUBY element. Value: Constant auto | left | center | right | distribute-letter | distribute-space | line-edge Example: RUBYelementRef.style.rubyAlign = “distribute=letter” rubyOverhang IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 5 — No Controls: Overhang of ruby text within a RUBY element. Value: Constant auto | whitespace | none Example: RUBYelementRef.style.rubyOverhang = “whitespace” rubyPosition IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 5 — No Controls: Placement of ruby text with respect to the RUBY element’s base text. Value: Constant above | inline Example: RUBYelementRef.style.rubyPosition = “inline” textAlign IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Horizontal alignment of text with respect to its containing element. Value: Constant center | justify | left | right Example: elementRef.style.textAlign = “center” elementRef.style.textAlign 807 Chapter 30 ✦ Style Sheet and Style Objects textAlignLast IE/Windows IE/Mac NN W3C CSS2 Compatibility 5.5 —— No Controls: Horizontal alignment of last line of text in a paragraph. Value: Constant auto | center | justify | left | right Example: elementRef.style.textAlignLast = “justify” textAutospace IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 —— No Controls: Extra spacing between ideographic and non-ideographic text. Value: Constant none | ideograph-alpha | ideograph-numeric | ideograph- parenthesis | ideograph-space Example: elementRef.style.textAutospace = “ideograph-alpha” textDecoration IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Display of underline, overline, or line-through with text. Value: Constant none | blink | line-through | overline | underline Example: elementRef.style.textDecoration = “underline” elementRef.style.textDecoration . 798 Part III ✦ Document Objects Reference With so many properties associated with an object, it may be difficult to locate the specific property you need for a particular style effect and blue components of the color. Here are a couple of examples: document.styleSheets[0].rules[0].style.color = “rgb(0, 255, 0)” document.styleSheets[0].rules[0].style.color = “rgb(0%, 100%, 0%)” Browsers. list with sample colors at http:// developer.netscape.com/docs/manuals/htmlguid/colortab.htm . Not all of those colors are necessarily part of what are known as “Web safe” colors. For a demonstration