Chapter 3

Working with Fonts and Colors

In This Chapter

Interacting with fonts

Designing pages to use web-safe fonts

Creating and using text effects

Using color to make a statement

Working with aural style sheets

The first two chapters of this book introduce fonts and colors. You can’t really create a page without these two features. What you’ve seen so far are some practical ways to use both fonts and color to create a basic page. Of course, there’s always more to the picture than just the basics. This chapter extends your knowledge and helps you understand some interesting things you can do with both fonts and color.

Part of jazzing up a page effectively is knowing what to avoid and why you should avoid it. Instead of giving you a designer’s knowledge of the topic, this chapter provides some useful tips that developers should know when working with pages. The third-party libraries that you work with later in the book tend to enforce these guidelines automatically, but you still need to know why these guidelines are in place.

The final part of this chapter deals with aural style sheets. The idea of hearing a page and then being able to speak to it were originally intended to help those with special needs. Aural technology includes the ideas of both hearing and comprehending the content on a page.

The technology was designed not only for those who lack the ability to see, but also for those who have low vision capability or even cognitive requirements where hearing works better than reading. Today aural style sheets are gaining a significant new focus. For example, they come into play when working through turn-by-turn GPS instructions while driving a car. In fact, any task that requires hands-free operation while keeping the eyes focused somewhere else benefits from this sort of technology. As a developer, you’ll be called on more often to provide some sort of aural and speech technology as a part of the pages you design.

Using Fonts

Text, as an abstract presentation of concrete concepts, ideas, and objects, requires fonts for presentation. The font chosen for the text often does as much to convey an idea as the text itself. Spend some time looking at greeting cards and you find that the purveyors of these missives use fonts to present the message in unique ways. A soft font accompanies a romantic message; a comical font helps us laugh at a funny message. The goal of this chapter isn't to provide you with a full history of font usage; you can find online sources such as www.onextrapixel.com/2011/12/13/the-psychology-of-fonts/ that look at the psychology behind using a font. However, the following list does help you understand the standard CSS properties at your disposal for obtaining access to fonts and using them on a page (in your own pages, make sure you use the capitalization shown):

font-family: Defines the name of the font. There are three font classifications typically used as part of CSS (and most CSS pages use all three unless you also specify the src property):

• Specific: Provides a precise presentation wherever it's used. For example, when you specify Arial as a font, you know that it will have a specific presentation everywhere you use it. A specific font must be installed on a system or the browser will ignore it.

• Web safe: This is a font type that provides a less-precise presentation but is more likely to appear on the user's machine. What you're actually requesting is one of several fonts that have similar appearances. The presentation is often close enough to the original that the user won't even notice.

• Generic: A non-specific font that fits a general description of a type of font. Such font names include cursive, fantasy, monospace, sans-serif, and serif. What you actually end up seeing onscreen may not convey much of the original message at all, but these selections are guaranteed to work on every platform.

font-size: Determines the size of the font when compared to other fonts on the page, or provides a specific font size. You can use one of these techniques for defining the font size:

• Specific size: As with most CSS objects, you can specify an exact size for a font, using pixels, ems, or some other absolute or relative measurement. (The "Defining the CSS Units of Measure" section of Chapter 1 has details.)

• Percentage: Defines the size of a font as a percentage of a parent element's font size. Specifying a size above 100% increases the font size, specifying a value below 100% decreases the font size.

• Keyword: Specifies the font size using relative terms: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, and inherit (where the font size is inherited from the parent).

font-style: Determines the style of font that the browser creates. The browser must support the style and the font must supply the style in order for this property to take effect. The font style keywords are: normal, italic, oblique (normally a stronger italic), and inherit.

font-variant: Specifies whether the font should be presented in a variant form. Not all browsers and fonts support this feature. The keywords for this property are normal, small-caps, and inherit.

font-weight: Determines the relative darkness of the font and the width of its strokes. There are two methods for defining the font weight:

• Numeric: A value specifying the relative weight of the font where a value of 400 is normal and 700 is bold. The numeric values are: 100, 200, 300, 400, 500, 600, 700, 800, and 900. In most cases, you must use the numbers precisely as specified here — a browser may ignore a value of 150.

• Keyword: Specifies the font weight using relative terms: normal, bold, bolder, lighter, and inherit.

Understanding Web Safe Fonts

Fonts provided as part of a graphic image never have any sort of restriction associated with them because the browser displays the text as an image and not as text. When working with actual text, you need to consider how the text is used and what conditions affect its presentation. Three factors come into play when using standard CSS methodologies to work with fonts:

The browser must support the fonts you want to use.

The font must appear on the user’s system or you must find some method for downloading the font to the user’s system.

The font must be compatible with the user’s platform.

This all means you can't be sure that any font choice you make will actually work unless the font is described in some standard or if the browser vendor has agreed to support the font by convention. This is where Web safe fonts come into play. Web safe fonts are guaranteed to work on any platform — and with any browser — that supports CSS. Consequently, when you use Web safe fonts, you can be certain that the user will see text presented in a manner similar to what you had originally intended. The following sections discuss Web safe fonts in more detail.

Using standard Web safe functionality

Hundreds of different devices use the Internet to access information. When you run a public site, you can't be guaranteed that a user will have any particular device. It's quite likely that your site will see use from all sorts of devices — everything from desktops to smartphones. People with Internet-equipped televisions and other personal electronics will also access your site. With this broad diversity of devices, you need to use Web safe fonts — those guaranteed to work on the Internet — when creating an application.

Actually, there's no one Web safe font for every platform unless you want to use the most generic font types. Developers want to maintain a certain appearance, so it's important to include specific fonts first, and then fallback fonts that are less specific. Using this approach ensures that everyone will be able to see your page as you originally intended to present it, at least to some degree. When you're working with a generic font, its appearance will vary slightly. With this in mind, here's a list of Web safe serif fonts (whose characters use a line to finish the main stroke of each character, such as the lines that appear under the main lines of an M); the most-specific font appears first and the least-specific font appears last.

Georgia, serif

"Palatino Linotype", "Book Antiqua", Palatino, serif

"Times New Roman" Times, serif

Each of these fonts has a slightly different feel, but sometimes the best you can do is a simple serif font — the last choice in each list. The following list describes common sans-serif fonts (those whose characters lack serifs). Again, the most specific font appears first and the least specific appears last.

Arial, Helvetica, sans-serif

"Arial Black" Gadget, sans-serif

"Comic Sans MS", cursive, sans-serif

Impact Charcoal, sans-serif

"Lucida Sans Unicode" "Lucida Grande", sans-serif

Tahoma Geneva, sans-serif

"Trebuchet MS" Helvetica, sans-serif

Verdana Geneva, sans-serif

The last group of fonts is for monospace type, where each letter takes up precisely the same amount of space (as did the output of older typewriters). Monospace fonts are normally used for application code, but you can use them anywhere you want to create the appearance of the typewritten page as well. The following list presents common monospace fonts with the most-specific first and the least-specific last.

"Courier New" Courier, monospace

"Lucida Console" Monaco, monospace

These are common fonts. However, you might find that you want to use something a little less common. Fortunately, there are sites where you can see lists of accepted fonts. In fact, the CSS Font Stack (http://cssfontstack.com/) makes it easy to select a font by seeing how it looks first and then clicking a single button to copy the required code to the clipboard. For example, when you click on Arial at that site, what you actually get is font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;. You might also want to look at sites such as WebDesignDev (www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css) and Vision {Widget} (http://visionwidget.com/web-safe-fonts.html).

Using .WOFF fonts

The CSS3 standard includes a new method for defining fonts using the @font-face style. The new method has a number of advantages, including the ability to use specific terms to define the font you want to use. In addition, this standard obviates the need to use Web safe fonts by considering every font to be Web safe. However, the browser must actually support the @font-face style — and many don't. An additional departure from standard CSS support is that you must provide certain properties for this style to work — even in browsers that support it. The following list describes the required and optional properties and the values you provide for them:

font-family (required): Specifies the name of the font as provided by the source file (described with the src property). The font name is always specific when you're working with CSS3 techniques.

src (required): Specifies the source of a font to download. Adding this property means that you aren't quite as limited on the fonts you can use because when a browser that supports this property sees that the font isn't available on the user's machine, it downloads the font from the source you specify. The problem, of course, is figuring out which browsers support what file formats. The following list describes the common file formats and which browsers support them.

• .WOFF (Web Open Font Format): This is the preferred file format for browser-based applications because it enjoys broad support amongst browsers and across platforms. Of the most popular browsers, Internet Explorer 9+, Firefox, Chrome, Safari, and Opera all support .WOFF files.

• .TTF (TrueType Font): This is the preferred file format when you target Mac and Windows systems because these systems are apt to contain a large number of these files already. The Internet Explorer, Firefox, Chrome, Safari, and Opera browsers all support these font types. Some Linux systems do have a .TTF counterpart called FreeType that may work with .TTF files, but support is spotty at best (see www.freetype.org/freetype2/ for details).

• .OTF (OpenType Font): This is the successor to the .TTF standard. A problem with this file format is that it's newer and less supported than .TTF files. Generally, you find this file format only on Windows systems, despite the fact that it's marketed as cross-platform. Newer versions of the Internet Explorer, Firefox, Chrome, Safari, and Opera browsers all support these font types.

• .SVG (Scalable Vector Graphics): Most people associate these file types with graphics and animation. It's also possible to create fonts using this technology. However, only the Chrome, Safari, and Opera browsers support these fonts.

• .EOT (Embedded OpenType): In the interest of speed, Microsoft has created a compact version of the .OTF specification. However, only Internet Explorer 9+ supports this file type. It's really not a good option unless you're working exclusively with a newer version of Windows where it's guaranteed that the user has updated the operating system and browser regularly.

font-stretch (optional): Specifies whether the font should be modified in any way to address specific special effects and host platform needs. The default setting is to present the font as it normally appears. However, you can also rely on these keywords to stretch the font in specific ways: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, and ultra-expanded.

font-style (optional): Determines the style of font that the browser creates. The browser must support the style and the font must supply the style in order for this property to take effect. The font-style keywords are normal, italic, oblique (normally a stronger italic), and inherit.

font-weight (optional): Specifies the darkness of the font. However, you have fewer options in this case than when working with standard font definitions (see the "Using Fonts" section of the chapter). Your choices in this case are normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, and 900.

unicode-range (optional): Defines the range of characters that the font supports. The default setting is "U+0-10FFFF", which supports 1,114,111 different character combinations.

The new CSS3 method of supporting fonts generally works well with newer browsers on desktop, laptop, and tablet platforms. If your users also want to access the page using smartphones, you'll start to find that support is lacking — and that the page may appear in a plain font that won't serve your needs. Considerable testing for this problem is required when you're working with smartphones. A public site that has visitors using televisions and other personal electronics probably won't have much success using this new technique. In this case, use the older approach that uses Web safe fonts (described in the "Using standard Web safe functionality" section of this chapter).

Producing Text Effects

Text effects make text look dressy — give it emphasis and convey unspoken messages to the viewer. You've already seen a few text effects, such as bold and italics. Even the selection of a font-family is a kind of effect. However, you can do more to add effects to the fonts you use. The first approach is to decorate the text to convey additional meaning — and this approach works everywhere. The second approach is to actually add special effects, but this approach only works with systems that fully support CSS3. The following sections discuss both approaches.

Using the safe text decorations

The only safe text effect is the use of the text-decoration property to define the addition of a characteristic to the font. This property works everywhere, so you don't need to worry whether someone viewing your page on a television or using a smartphone will get your message. The following list describes the sorts of text decoration you can perform.

none: Removes any text decoration that might already be in place.

underline: Places a line under the text.

overline: Places a line over the top of the text.

line-through: Places a line through the text (often used to mark ­deletions).

  blink: Causes the text to blink. This particular feature is unsafe. People who have certain physical issues, such as photosensitive epilepsy (see www.epilepsysociety.org.uk/aboutepilepsy/whatisepilepsy/triggers/photosensitiveepilepsy), could have a seizure just from viewing your page. Mind you, this effect isn't limited to those who have photosensitive epilepsy; it's been documented for other people as well (read www.ncbi.nlm.nih.gov/pmc/articles/PMC1028775/ as an example). In fact, the only reason this book documents this particular feature is to help you avoid it. Blinking text isn't just annoying; it can have significant nasty side effects.

inherit: Uses whatever decoration is employed with the parent element.

It isn’t possible to combine text decoration effects. For example, if you try to combine an underline with an overline, you won’t see either effect onscreen because the browser will be confused. In addition, text decoration effects won’t appear in places where there’s no text.

Adding the CSS3 text effects

Just being able to decorate the text doesn’t offer much in the way of pizzazz; most people want a lot more, especially in this age of self-published works of all sorts. A CSS3 site can make use of a significant number of new effects, in addition to simple text decorations. Of course, the tradeoff is that you must know that the viewer has the required support — which means using newer browsers on a limited number of platforms. A few text effects are part of the specification, but so far remain unsupported by any browser — these entries are marked as such — and you shouldn’t use them until the browser vendors catch up. The following list describes the special text effects that you can create using CSS3.

hanging-punctuation (currently unsupported): Specifies whether punctuation can appear outside the start or end of a line of text when the text would otherwise need to be wrapped. Acceptable values are

• none: The punctuation can't appear outside the box. For more on how page content appears within the box, see Chapter 2.

• first: Punctuation can appear outside the box on the first line.

• last: Punctuation can appear on the outside of the box on the last line.

• allow-end: Punctuation can appear outside the box on any line if the punctuation wouldn't ordinarily fit after the text is justified.

• force-end: Punctuation can appear outside the box on any line. If the line is justified, the browser will force the punctuation to land outside the box.

punctuation-trim (currently unsupported): Specifies whether punctuation is trimmed when it appears outside the start of the end of a line of text when the text would otherwise need to be wrapped. Acceptable values are

• none: The punctuation isn't trimmed.

• first: Trim any hanging punctuation on the first line.

• last: Trim any hanging punctuation on the last line.

• allow-end: Trim the punctuation on any line where it wouldn't fit after the line is justified.

• adjacent: Trim some types of punctuation that appears at the beginning, middle, or end of a line when the punctuation appears next to a full-width character.

text-align-last (currently unsupported): Describes how to align the last line of text when the paragraph relies on a justified margin. Acceptable values are:

• auto: Relies on the value of the text-align property.

• start: Aligned to the start of the line, which depends on the direction the text is laid out (left-to-right or right-to-left).

• end: Aligned to the end of the line, which depends on the direction the text is laid out (left-to-right or right-to-left).

• left: Always aligned to the left side of the box (regardless of text direction).

• right: Always aligned to the right side of the box (regardless of text direction).

• center: Contents are centered within the text box.

• justify: Context are justified within the text box.

text-emphasis (currently unsupported): Sets the text-emphasis-style and text-emphasis-color properties in a single call.

text-justify (Internet Explorer only): Determines the alignment and spacing of text that has been marked as justified (where the right and left side of the text are even, rather than jagged). Acceptable values are

• auto: The browser determines the method in which text is justified.

• inter-word: Word spacing is used to justify the text.

• inter-ideograph: Symbol spacing is used to justify the text (spaces between words aren't counted). This setting is normally used with the Double-Byte Character Sets (DBCS) used with languages that rely on characters other than those used by Roman-alphabet languages such as English.

• inter-cluster: Only text that naturally lacks whitespace (such as material written in an Asian language) is justified.

• distribute: Justification follows the model used by newspapers, except that the last line isn't justified when working with East Asian languages such as Thai.

• kashida: Justification is accomplished by elongating individual characters.

• trim: Justification is accomplished by shortening the amount of whitespace between letters.

• none: Disable any form of justification.

text-outline (currently unsupported): Creates an outline that follows the contours of the target character. The property supports three values:

• thickness: The width of the outline.

• blur: The radius of the outline.

• color: The color used to create the outline.

text-overflow: Defines the action that will take place when the text overflows the box used to contain it. Acceptable values are

• clip: Removes any extra text.

• ellipsis: Displays an ellipsis to show there's additional text.

• String: Displays the specified string value to show there's additional text.

text-shadow: Displays a shadow of the target characters at the same width as the target character. The positioning, strength, and color of the shadow are determined by the following properties:

• h-shadow: Determines the horizontal positioning of the shadow.

• v-shadow: Determines the vertical positioning of the shadow.

• blur: Specifies the clarity of the shadow text. Using a value of 0 means that the shadow text has the same clarity as the original text.

• color: Defines the color used to create the outline.

text-wrap (currently unsupported): Determines how text is wrapped within the containing box. Acceptable values are

• none: The text overflows the containing box when it's too long.

• normal: Text is broken between words or other white space.

• unrestricted: Text is broken between any two characters.

• suppress: The browser can only break lines if there are no other valid places to break a line within the paragraph. The specification is unclear as to where the break will take place, but the assumption is that it will occur between words or in some other white space.

word-break (no Opera support): Determines how text is wrapped within a containing box when working with a non-CJK (Chinese-Japanese-Korean) language. Acceptable values are

• normal: Break the text using the browser's standard rules, which normally means between words or other white space.

• break-all: Break the text between any two characters.

• hyphenate: Break the text at natural hyphenation points, between words, or in some other white space.

word-wrap: Determines how text is broken and then wrapped to the next line in a containing box when working with a non-CJK language. Acceptable values are

• normal: Break words using the browser's standard rules, which normally means at natural hyphenation points.

• break-word: Allow breaking of words that normally don't allow breaking.

Adding Colors

Color is an essential component of most pages because color conveys emotion. Look at a red element and you might instantly think about danger. A yellow element might seem light and friendly. Green could signal peaceful conditions or nature. In short, color helps get your message across in ways that other elements on the page might not.

It's essential to choose colors carefully. For one thing, not everyone has the same level of natural color perception; colors that are too close to each other can prove difficult to see. Another issue is that about 8 percent of the male population and ¹⁄₂ percent of the female population is colorblind, which means that they can't easily see certain colors. For them, the colors appear shifted to other colors — red and green, for example, could look like brown. Always check your color combinations by using an application designed for the purpose or a site such as VisCheck (www.vischeck.com/vischeck/vischeckImage.php). The article telling how various forms of color blindness work at www.vischeck.com/examples/ is especially helpful.

Understanding how CSS colors work

CSS provides three methods you can use to define the color of any object: color value, color name, or hexadecimal value. (Chapters 1 and 2 introduce these techniques.) It doesn’t matter to CSS — or to the browser — which form of color definition you use; choose the method that works best for you. It’s important that you do not change techniques in a single style sheet; use the same color definition method consistently.

Most devices today can display millions of colors. In fact, the devices we use can display more colors than most of us can actually see. However, some devices are still limited in their ability to display color. When you're targeting a device with limited color capability, you need to rely on the Web safe color palette shown at www.techbomb.com/websafe/. Using this color palette makes CSS less likely to do problematic things like dither the colors so the viewer sees an unfortunate mix that may not look anything like the color choice you intended.

Using the Web safe color palette ensures that the viewer will see the color you intended — at least for the most part. There are some situations where a device supports some number of levels of gray and the viewer isn't going to see color at all. It's important to avoid using color alone to refer to objects onscreen; you can't be certain that the viewer can see the color. Instead, label objects and refer to the object's name as needed.

Using color values

The examples in the book have focused on Red Green Blue (RGB) color values. However, CSS actually supports a number of color value systems. The only requirement is that the browser also supports the color system. Here are the color systems that most browsers support:

Red Green Blue (RGB): Use the rgb() method when describing this color value that uses three numbers between 0 and 255 to specify the amount of red, green, and blue to use.

Red Green Blue Alpha channel (RGBA): Use the rgba() method when describing this color value. The first three numbers are simply red, green, and blue. The fourth number, alpha channel (relative transparency), is a value between 0.0 (fully transparent) and 1.0 (fully opaque). You must have IE9+, Firefox 3+, Chrome, Safari, or Opera 10+ to use this color value scheme.

Hue Saturation Lightness (HSL): Use the hsl() method when describing this color value that consists of three numbers. Hue is a value between 0 and 360 that describes the position of a color on the color wheel: red is 0 (or 360), green is 120, and blue is 240. Saturation (the color intensity or darkness) is a percentage value between 0 (gray scale) and 100 (full color). Lightness is a percentage between 0 (black) and 100 (white).

Hue Saturation Lightness Alpha channel (HSLA): Use the hsla() method when describing this color value that uses the same first three numbers as an HSL value. The fourth number, alpha channel, is a value between 0.0 (fully transparent) and 1.0 (fully opaque). You must have IE9+, Firefox 3+, Chrome, Safari, or Opera 10+ to use this color value scheme.

Trying to understand how color values interact can be hard. The color mixer at www.w3schools.com/tags/ref_colormixer.asp helps you see how various color choices interact, making it easier to choose good color combinations.

Using color names

For many people, the easiest way to manage colors is to specify a color name. There are 17 standard color names that will work on any browser, even when that browser displays only shades of gray: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Use these color names when you must ensure the user's ability to see the difference between colors under any circumstance.

There are 130 additional color names that will work on any systems that can display them. The most accurate listing of all 147 color names (17 standard and 130 additional) appears at www.w3schools.com/cssref/css_colornames.asp. This site also makes it possible to display various shades of the colors so you can mix and match color choices. Most importantly, you obtain access to the color's precise hexadecimal value so that you can tweak your color choices as needed.

You can find these colors displayed in a number of places online, but one of the more interesting places to view them is at www.crockford.com/wrrrld/color.html. Choosing a color displays that color outside the table. Selecting another color will add the color in the inner tier, while the first choice moves out one position. This site makes it relatively easy to compare various colors to see how they look with each other.

Using hexadecimal values for color

You define a hexadecimal value for a color by preceding the value with a hash sign (#), followed by three hexadecimal color values (red, green, and blue). For example, #000000 is black, #ff0000 is red, #00ff00 is green, and #0000ff is blue. Many developers see this method as the most accurate and concise for creating colors. However, the results of using hexadecimal color values aren't really any different from those of the other techniques described in this section. (If you really like using hexadecimal values and need a good color picker for a Windows system, try the Color Cop color picker at http://colorcop.net/.)

Understanding Aural Style Sheets

Aural style sheets make it possible for users who rely on screen readers and other voice-driven technology to make better use of your site. You won’t actually hear anything when your site is using an aural style sheet unless you have a screen reader enabled. In fact, without a screen reader, the aural style sheet won’t seem to be in place at all. The aural style sheet offers cues to the screen reader that specify how to read the text on your site — and also provides hints about how to convert information to textual form.

Many operating systems today include a relatively basic screen reader as part of the product; you can enable this screen reader to test your aural style sheets. For example, Windows offers a screen reader as part of its accessibility features — and you'll find that the Mac has VoiceOver installed for the same purpose. However, most people who actually rely on screen readers use something a bit more robust, such as Jaws (www.freedomscientific.com/products/fs/jaws-product-page.asp). You can see a list of screen readers at http://en.wikipedia.org/wiki/List_of_screen_readers.

Creating an aural style sheet is precisely the same as creating any other CSS style sheet. You define aural styles for various objects by using exactly the same selectors as you use for creating visual effects. Aural style sheets do have their own set of properties, however, as described in the following list:

azimuth: Defines the horizontal source of the sound. The acceptable values are:

• angle: A value between 0 and 360 that determines the actual angle.

• Keyword: left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, or rightwards.

cue-after: Specifies a sound to make after the content is read. You can use a value of none or provide a specific URL for a sound source.

cue-before: Specifies a sound to make before the content is read. You can use a value of none or provide a specific URL for a sound source.

elevation: Defines the vertical source of the sound. The acceptable values are

• angle: A value between 0 and 360 that determines the actual angle.

• Keyword: below, level, above, higher, or lower.

pause-after: Specifies how long to pause after reading the content. You can provide a numeric value in seconds or a percentage based on the length of the content.

pause-before: Specifies how long to pause before reading the content. You can provide a numeric value in seconds or a percentage based on the length of the content.

This setting is often used to provide cues about punctuation. For example, you’d provide a longer pause for an em dash or semicolon than you would for a space.

pitch: Determines the frequency of the speaking voice. The acceptable values are

• frequency: The frequency of the speaking voice in hertz.

• Keyword: x-low, low, medium, high, or x-high.

pitch-range: Determines the amount of modulation in the spoken voice where a value of 0 is monotone. Higher values produce more animation in the voice.

play-during: Specifies a sound to make while the content is read (possibly background music or some other accompaniment. The acceptable values are

• none: Suppresses sound while reading the content.

• url: The location of the sound source to play.

• Keyword: auto, mix, or repeat.

richness: Determines the depth of the spoken voice where a value of 0 is a thin voice and higher values make the voice deeper, more resonant.

speak: Specifies how to speak the content. The acceptable values are

• normal: The content is spoken as words.

• none: The content isn't spoken at all.

• spell-out: The individual characters of the content are spoken, such as when handling abbreviations (where individual letters are spoken). For example, you'd use this setting for W3C (World Wide Web Consortium).

• Acronyms are always spoken as words, so you'd use the normal setting. For example, you'd use the spell-out setting for ACID (Atomic, Consistent, Independent, and Durable).

speak-header: Indicates whether the readers should speak the heading for each cell as the individual cells are read. The acceptable values are:

• always: The headers are read for each cell, whether or not the heading has changed.

• once: The headers are only read once for each cell.

speak-numeral: Determines how the reader handles numeric values. The acceptable values are

• digits: The individual numbers are read, such as one, two, three for 123.

• continuous: The number is read as a unit, such as one hundred twenty three for 123.

speak-punctuation: Determines how the reader handles punctuation. The acceptable values are:

• none: The reader doesn't do anything special with punctuation. Some higher end readers will add pauses automatically to match the differences in punctuation, such as using a longer pause for an em dash or semicolon.

• code: The reader tells the viewer what punctuation appears in the content. This would be especially important when reading content such as source code, where punctuation is especially important or takes on atypical meanings.

speech-rate: Indicates how fast the reader should read the content. The main reason to use this value is for emphasis or to make especially difficult passages clearer. The acceptable values are

• number: A number indicating the speed in Syllables Per Minute (SPM). Some sources use Words Per Minute (WPM), but the rate is more along the lines of syllables per minute, with longer words taking longer to say.

• Keyword: x-slow (80 SPM), slow (120 SPM), medium (180 SPM), fast (300 SPM), x-fast (500 SPM), faster (add 40 SPM to current rate), or slower (subtract 40 SPM from current rate).

stress: Indicates how much emphasis the reader should place on certain syllables of a word — the higher the numeric value, the greater the amount of emphasis. Most readers pay no attention to this value.

voice-family: Defines which voice to use when reading the content. As with fonts, the voice-family can be specific or generic. The most generic voice-family values are male, female, and child. Specific voice-family values require voice files that are supported by the reader.

volume: Indicates how loud the reader should read the content. The acceptable values are:

• number: A value between 0 and 100 to indicate absolute volume.

• %: A percentage between 0 and 100 to indicate a relative increase in volume (with a maximum value of 100).

• Keyword: silent (a value of 0), x-soft (a value of 0), soft (a value of 25), medium (a value of 50), loud (a value of 75), or x-loud (a value of 100).