| home / programming / css_utopia / chap3 / 3 |   [previous] |
|
|
|
Because of the problems posed by the use of any absolute value, the most flexible and least controlling way to approach measurements for style rules is to use relative units of measurement. Principally, these are em and %, although some people prefer to use the more obscure ex measurement. The “em” measurement is so named because it refers to the height of a capital “M” character in the given font, but in practice it is equal to the font-size of the current font. The “ex” measurement is based on the height of the lower-case “x” character in a font (more commonly known as the x-height of the font) and is far less common than the em.
Both the em and the percentage generate font sizes based on the inherited or default size of the font for the object to which they’re applied. In addition, ems and percentages are 1:100 equivalent. A size of 1em is identical to a size of 100%.
This description begs the question, “What’s the default or inherited font size for a particular HTML element?” The answer is: it depends.
Prior to the emergence of Opera 5 for Windows, browsers set the default values for all fonts as part of their startup process. Users had no control. The browser defined a default. The Web designer overrode defaults willy-nilly. The user took what was presented.
Then, along came the idea of user choice. Not surprisingly, this development was facilitated by the emergence of CSS. Essentially, what the developers of the Opera browser did was create a local style sheet that the user could modify, and set his or her defaults to use. They also defined a nice graphical user interface through which the user could set preferences for these styles.
This was great for users, but Web designers found themselves in a quandary. If, for example, you assumed that browsers were going to default body text to a 12 point font size[7] (which was the de facto standard before the user-controlled preferences era), you could set a style to apply a 1.25em scaling to the text and get a 15 point font size for the text in question. It was nice and predictable.
Now, however, a 1.25em scaling applied to a font tells the browser to increase the size of the font to 1.25 times (125% of) its default size. If the user has set up his or her browser to show standard text at a height of 16 points, your 1.25em transformation brings the size up to 20 points.
When you stop and think about it, though, that’s probably just fine. The user who chooses a larger base font size probably needs to see bigger type. If you want type that would otherwise be at 12 points to display at 14 for some good reason, then it’s not unreasonable to expect that this new user will benefit in the same way from seeing the font used in this particular situation increase from his or her standard 16 points to 20.[8]
Most of the time, there’s not really a reason to muck with the user’s settings for font sizes, so changing them arbitrarily isn’t a good idea. Before you apply this kind of transformation to a text segment on your Web design, ask yourself if it’s really necessary. My bet is that nine times out of ten, you’ll find it’s not.
I would be remiss if I didn’t point out that there are some inherent pitfalls in using relative font sizes, of which you should beware. Under some circumstances, relative font values can combine and multiply, producing bizarre results indeed.
For example, if you define style rules so that all text that is bold is displayed at 1.5 ems and all text that is italic is displayed at 1.5 ems, text that is bold and italic will display at 2.25 ems (1.5 x 1.5). This problem arises with child elements, which inherit from their parent container elements the computed values for measured properties and not the relative values. This is relatively easy to avoid, but if you overlook it, the results can be quite startling.
More than likely, you are familiar with the concept of comments in HTML:
<!-- this is an HTML comment -->
Comments allow you to include explanations and reminders within your code. These are entirely ignored by the browser, and are normally included solely for the developer's convenience. If you've ever had to make changes to code that hasn't been touched in a few months, I'm sure you can appreciate the value of a few well-placed comments that remind you of how it all works.
CSS has its own syntax for comments. In HTML, a comment begins with <!-- and ends with -->. In CSS, a comment begins with /* and ends with */:
<style type="text/css">
/* This rule makes all text red by default.
We include paragraphs and table cells for
older browsers that don't inherit properly. */
body, p, td, th {
color: red;
}
</style>
If you know much JavaScript, you'll recognize this syntax, which can be used to create multiline comments in that language as well. Unlike JavaScript, however, CSS does not support the single-line double-slash (//) comment style.
This chapter ends our overview of CSS technology. This chapter covered more of the syntactical and structural rules of CSS styles. Along the way, it explained the basic ideas involved in HTML document inheritance.
In Part II, which starts with Chapter 4, CSS Web Site Design, we’ll launch into a full-scale project. Beginning with a traditional table-based layout for a Website, we’ll start to focus on how to lay out the page using CSS rather than tables.
[3] You can optionally confine the ID’s use to an element of a specific type by preceding the # with the HTML element’s tag name (e.g. div#searchbox). But, as you can have only one element with the specific ID in your document, it seems silly to confine it to a specific element type.
[4] Be aware that browser support for the :lang() pseudo-class is still very scarce. It is covered here mainly for the sake of completeness.
[5] Again, if I wanted to be terribly precise, I would say that a pixel is actually a relative measurement, because its meaning is relative to the display medium on which the page is produced. But, in this context, “relative” means “relative to some other value in the style rule or in the HTML” and in that sense, pixels are absolute.
[6] High school math would lead you to predict a 9- by 12-inch screen, but, unfortunately, 15 inch monitors don’t normally have a full 15 inches of diagonal screen space. Perhaps computer manufacturers don’t study Pythagoras.
[7] Just in case you were wondering, pixel sizes and point sizes are not equivalent, and the ratio between the two varies between browsers and operating systems. For example, the 12 point default font size used by most Windows browsers was rendered at 16 pixels on that platform. 12pt is equivalent to 16px on Windows browsers.
[8] If that’s not the case, you probably want to rethink your reason for boosting the font size in the first place.
| home / programming / css_utopia / chap3 / 3 | [previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 11, 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap3
