Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:02 PM

5.6. Font Matching

As we've seen, CSS allows for the matching of font families, weights, and variants. This is done through font matching, which is a vaguely complicated procedure. Understanding it is important for authors who wish to help user agents make good font selections when displaying their documents. I left it for the end of this chapter because it's not really necessary to understand how the font properties work, and some people will probably want to skip this part and go on to Chapter 6, "Colors and Backgrounds". If you're still interested, here's how font matching works.

In the first step of font matching, the user agent creates, or otherwise accesses, a database of font properties. This database lists the various CSS1 properties of all the fonts to which the UA has access. Typically, this will be all fonts installed on the machine, although there could be others (for example, the UA could have its own built-in fonts). If the UA encounters two identical fonts, it will simply ignore one of them.

Second, the UA takes apart an element to determine which font properties have been applied, and constructs a list of font properties necessary for the display of that element. Based on that list, the UA makes an initial choice of a font family to use in displaying the element. If there is a complete match, then the UA can use that font. Otherwise, it needs to do a little more work.

Third, if there was no font match in step two, the UA looks for alternate fonts within the same font family. If it finds any, then it repeats step two for that font.

Fourth, assuming a generic match has been found, but it doesn't contain everything needed to display a given element -- the font is missing the copyright symbol, for instance -- then the UA goes back to step three, which entails a search for another alternate font and another trip through step two.

Finally, if no match has been made and all alternate fonts have been tried, the UA selects the default font for the given generic font family and does the best it can to display the element correctly.

As you can see, step two gets visited a lot in this process. It can be broken down into more precise steps:

  1. A font is first matched against the font-style. The keyword italic is matched by any font which is labeled as either "italic" or "oblique." If neither is available, then the match fails.

  2. The next match attempt is on font-variant. Any font which is not labeled "small-caps" is assumed to be normal. A font can be matched to small-caps by any font which is labeled as "small-caps," by any font which allows the synthesis of a small-caps style, or by any font where lowercase letters are replaced by uppercase letters.

  3. The next match is to font-weight, which can never fail, thanks to the way font-weight is handled under CSS1.

  4. Finally, font-size is tackled. This must be matched within a certain tolerance, but the tolerance is left to the user agent to define. Thus, one user agent might allow matching within a 20% margin of error, whereas another might allow only 10% differences between the size specified and the size that is actually used.

The whole process is long and tedious, but it helps to understand how user agents pick the fonts they do. For example, you might specify the use of Times or any other serif font in a document, to get what's shown in Figure 5-34.

BODY {font-family: Times, serif;}
Figure 5-34

Figure 5-34. The end result of font matching

For each element, the user agent should examine the characters in that element and determine whether Times can provide characters to match. In most cases, it can do so with no problem. Assume, however,

In a similar fashion, the overall width of a list item's element box is equal to the content width of the list element that contains it. As you can see in Figure 8-8, the margins of a parent element can influence the layout of a child element.

Figure 8-8

Figure 8-8. List items' overall width equals the width of the UL element Horizontal properties

There are a number of properties relating to the layout of boxes. These are known as the that a Chinese character has been placed in the middle of a paragraph. Times has nothing that can match this character, so the user agent has to either work around the character or look for another font that can fulfill the needs of displaying that element. Of course, any Western font is highly unlikely to contain Chinese characters, but should one exist (let's call it AsiaTimes), the user agent could use it in the display of that one element -- or simply for the single character. Thus, the whole paragraph might be displayed using AsiaTimes, or everything in the paragraph might be in Times except for the single Chinese character, which is displayed in AsiaTimes.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

book is upright, for instance.

Thatleaves only an explanation of the difference betweenitalic and oblique text. Forthat, it's easiest to turn to Figure 5-24,which illustrates the differences very clearly.

In order to create applications of this category, you might have to define a DTD for your information. Then you have to write classes to import and export information from your XML document(s) (validating using your application's DTD if you have one). You must also write the classes which create the user interface in your application. The user of your application can view and modify information using the GUI (graphical user interface), and they can save (and load) their information to (and from) an XML file (that might use your DTD); in other words, they can save (and load) their information to (and from) an ApplicationML file (where Application is the name of your application). Some examples are AddressBookML, MathML, SVGML, etc.

The classes that import and export information from your ApplicationML file must use the parser and SAX or DOM API in order to import the information. These classes can access this information by using one of the following strategies:

  1. Use DOM to directly manipulate the information stored in the document (which DOM turns into a tree of nodes). This document object is created by the DOM XML parser after it reads in the XML document. This option leads to messy and hard-to-understand code. Also, this works better for document-type data rather than just computer generated data (like data structures and objects used in your code).
  2. Create your own Java object model that imports information from the XML document by using either SAX or DOM. This kind of object model only uses SAX or DOM to initialize itself with the information contained in the XML document(s). Once the parsing and initialization of your object model is completed, DOM or SAX isn't used anymore. You can use your own object model to accessed or modify your information without using SAX or DOM anymore. So you manipulate your information using your own objects, and rely on the SAX or DOM APIs to import the information from your ApplicationML file into memory (as a bunch of Java objects). You can think of this object model as an in-memory instance of the information that came was "serialized" in your XML document(s). Changes made to this object model are made persistent automatically, you have to deal with persistence issues (ie, write code to save your object model to a persistence layer as XML).
  3. learn and use the rest of CSS much more quickly.

    However, that's the good news. The bad news is that thischapter will contain a good many caveats, warnings, and discussionsof browser bugs and inconsistencies between operating systems.Remember, though, that CSS is not supposed to be a totally preciselayout language -- and besides, many of the issues discussed inthe chapter are not the fault of CSS but are more fundamental issuesthat you'll encounter no matter what you try to do with acomputer. So, once you've finished this chapter, you will have