5. Essential OEB Styles

You've learned the essentials of styles in OEB, but you would be hard-pressed at this point to put this knowledge to use without knowing which styles are actually allowed. You probably have visions of how you'd like to change the appearance of your document: its fonts, its indentation, even its color. Here we'll address some of the most important style properties available for your use. Keep in mind that OEB style sheets are little more (and a little more less) than a subset of Cascading Style Sheets (CSS); what you'll learn here will in large part be transferable (although somewhat restricted) to CSS as it is used in general.

Style Units

The styles you have seen so far in the examples have been qualitative, specifying whether a particular property applies to a particular section of text. We've seen how to specify italics: the font-style of text is either italic or it isn't. Similarly with color, the CSS color property can take color names such as black and red.

Other style values can be quantitative, specifying numerical values for style properties. There are many cases in which you would want to specify the length, the height, or the width of something such as a font size or an indentation amount. Implicit in each of these cases is a unit of measurement: if you want a font of size 12, does that "12" represent a height of 12 pixels, 12 centimeters, or 12 kilometers?

When a length (the CSS term for instances of numeric value) is used, CSS requests that you specify a unit, unless in specific cases which we'll discuss later. A percentage, for example, does not need a unit specified, nor does a property which takes a count of something rather than a measurement. In all other cases, a unit will be used from the following list of those supported by CSS (and by OEB):

This list can be used as a short reference; the units themselves will become more straightforward in their actual use.

Font Properties

CSS font-related properties specify how a portion of text looks: the size, the type family, and the style, for instance. Specifically, we'll consider font-family, font-size, font-style, and font-weight, throwing text-decoration, color and background-color in for good measure.

The font-family Property

When you think of changing a font in a word processor, you usually think of specifying its name: "Times New Roman" and "Arial" are common examples. These names do not really specify the entire font itself (remember, the font includes the size, style and everything else about the font), but instead indicates the font family, the group of fonts of varying styles and sizes that look similar.

The font-family property allows you to specify the name of a font family in the normal CSS way, specifying the property and value in a declaration:

{font-family: "Times New Roman"}

Since this particular font family, "Times New Roman", has spaces in its name, we've placed it inside quotes. Family names without spaces do not need quotes.

In a real style sheet, you would also need to specify one or more elements to which to apply the style, using a selector. For example, you might wish to specify the default font for the entire OEB document. Since all text in an OEB document appears inside an enclosing <body> element, you can specify a default font by using body as the selector:

body {font-family: "Times New Roman"}

The font family "Times New Roman" is quite popular and comes installed on many computer operating platforms. There's no way to guarantee that it will be installed on the device or software the person reading your book is using, however. You might even decide to use a font family that no one else is using (after all, style sheets are about specifying custom styles). Perhaps you've created a custom font family, and it only exists on your machine! Your book will look quite nice on your own computer or reading device, but what about on other systems?

CSS defines several generic font families (or more accurately, generic divisions of font families), three of which OEB uses. These font familes are guaranteed to be present on any OEB compliant reading system. They are:

Using one of these three fonts will guarantee that your text will be assigned a font with the same properties you intended on every OEB compliant reading system. But what about customization? OEB does not yet specify a way to deliver custom fonts to a reading system, but there is a middle ground: CSS allows one to specify the preferred font family, yet also specify the font family to use if the preferred font is not present.

Specify a list of preferred font-family values by separating them with commas (,) with the most preferred font first. If you use "Book Antiqua", a serif font family, you might specify the following as the default font:

body {font-family: "Book Antiqua", "Times New Roman", serif}

Notice that we've specified serif, the generic font family guaranteed to be present, as our last choice. We always want the text displayed, and even if the reading system offers no frills whatsoever, this font family is guaranteed to be present. In fact, it is recommended that you always provide one of the generic font families as your last choice in your fallback list.

The font-size Property

CSS allows a font size to be specified absolutely, using the font-size property and one of the units specified earlier. (Note that there is no whitespace between the value and the unit name.) A 12 point font could be selected as the default using the following:

body {font-size: 12pt}

While it might be appropriate to specify the absolute size of the default font, which applies to everything inside the <body> tag (and thereby everything in the document), it's not wise to specify an absolute value for elements within the document. For example, to make all emphasized text a little larger than the surrounding text, an absolute value might be used like this:

Not Recommended: em {font-size: 14pt}

There are several reasons this isn't a good idea. What if you were to later change the default font for <body> to 16 points? You'd then have to make sure that every other absolute value, such as that for <em>, was changed as well, or the emphasized text would be smaller than the surrounding text — the 14-point emphasized text didn't change, but the surrounding text changed to 16 points. Furthermore, remember that the <em> element can appear several places, such as within an <h1> element, which traditionally is larger than the default text. You'd want the emphasized text even larger than the 14 points you specified. In short, it would be ideal to be able to specify that a particular element's size in relation to its surrounding text (or rather, relative to the size of the enclosing element's font).

One way CSS allows this to be done is using percentages. If you want emphasized text to be slightly larger than the text that surrounds it, it would be better to use something like this:

em {font-size: 120%}

In this case, if the <em> tag appeared inside an element of 12-point text, it would be rendered in a 14.4-point font (12 multiplied by 120% is 14.4). If the <em> element were to appear inside 16-point text, it would be rendered in a 19.2-point font. The following example shows how using a percentage can make relative sizes appear correctly in several locations:

Style Sheet:

body {font-size: 12pt}
em {font-size: 120%}

Document Extract:

<h2>The <em>Extremely</em> Small Blovjus</h2>
<p>...Being <em>extremely</em> smaller than other blovji his age...</p>

The Extremely Small Blovjus

...Being extremely smaller than other blovji his age...

There are several other ways to represent relative sizes. You can use the units "em" or "ex", which specifies that the font should be so many multiples of the width of the "m" character or the height of the "ex" character, respectively, in the current font. We won't discuss these methods here.

Just like font-family, which allows certain pre-defined font family names to be used, the font-size property has several pre-defined sizes. Some of these are relative sizes, functioning exactly as if percentages were used, and others are absolute, functioning exactly as if absolute sizes were used.

Predefined relative font-size values:

CSS recommends that a difference of 120% be used, which would make using font-size: larger equivalent to using font-size: 120%, for example, but this difference is not guaranteed.

The other pre-defined font-size values are the following:

Although these are equivalent to using absolute font sizes, the actual font sizes these values stand for may very from platform to platform. CSS does say that you can expect values of larger and smaller to change between these absolute values. That is, for a current font size of small, an element with font-size: larger would give the equivalent of a font of size medium.

The font-style Property

The font-style, as implemented by OEB, allows a font to be specified as italic or normal (that is, not italic). Although CSS allows another value, oblique, OEB reading systems are not required to support it, and may represent it as synonymous with italic.

The font-weight Property

Although CSS allows several values to be used with the font-weight property, OEB eliminates all but two of them, making font-weight simply a way to designate that text should be rendered as bold, in much the same way that font-style represented italics. The two values OEB allows for font-weight are bold and normal.

The text-decoration Property

The text-decoration property allows underlining to be specified, in much the same way that previous properties allowed italics and bold to be specified. The two values allowed are none (the default), and underline.