Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 04th of December 2016 04:52:02 AM

10.3. Fonts and Text

The font property has also picked up a few new values in CSS2:

caption
icon
menu
message-box
small-caption
status-bar 

These values give the font property the ability to match the font family, size, weight, and so forth, according to the settings users have specified on their computers. For example, icons on a Macintosh are typically labeled using 9-point Geneva. Assuming that hasn't been changed by the user, any font declaration with a value of icon will result in 9-point Geneva for that text -- as long as the page is viewed using a Macintosh:

SPAN.OScap {font: icon;}  /* will look like icon labels in OS */

On a Windows system, of course, the font would come out different, and under other window managers (like X), it would look different still. The flexibility is certainly interesting, and it allows the author to easily create pages that have an appearance familiar to the user.

10.3.1. New Font Properties

The font section gains two new properties in CSS2. font-size-adjust is intended to help browsers make sure that text will be the intended size, regardless of whether the browser can use the font specified in the style sheet. It is often a problem that authors will call for a font that is not available to the user, and when another font is substituted, it's either too big or too small to read comfortably. This new property addresses that very problem, and should be very useful for authors who want to make sure that their documents are readable no matter what font is substituted.

The other new font property is font-stretch , which allows you to define variable widths for the fonts you use. This is similar to setting a character width in a desktop publishing system. The property uses keywords such as ultra-condensed , wider, and expanded. The changes are handled in a fashion similar to font weights, where a table of condensed and expanded font faces is constructed, and the this is not discussed here (see Chapter 8, "Visual Formatting", for more details).

7.4.6. Borders: Known Issues

Of course, there are a few problems with using borders. The most distressing is the fact that Navigator 4.x won't draw a border around the content area of a block-level element but instead inserts keywords are assigned to various faces. If no face exists, the user agent may try to scale a font on its own, or it may simply ignore font-stretch altogether. Figure 10-13 shows what a font might look like for each possible value of font-stretch.

Figure 10-13

Figure 10-13. Stretching fonts

10.3.2. text-shadow

In terms of text, there is one new property, text-shadow, which has the effect you'd probably expect from its name: you can define a drop shadow of a given color for text. You can even set an offset and a blur radius, which means you can get cool fuzzy shadows, or even glow effects, using this property. We should fully expect to see this property horribly abused the instant it's supported by any browser; for a few examples of why, see the simulations in Figure 10-14.

Figure 10-14

Figure 10-14. Various effects using the text-shadow property



Library Navigation Links

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

Client and Server side - Application Servers

The 2nd category of Java applications called Java Application Servers (or app servers) and they make good use of XML. Unlike client side graphical Java apps (from the previous section) which are very standalone in their operations, app servers tie many different networked software components together in order to provide information from multiple sources to a set of client side Java apps or web browsers (maybe even running on different devices). This is shown in Figure 2. An app server is actually a conglomeration of several distributed and client/server software systems. So when you write an app server, you are actually writing many different software systems which are all networked to work together, to process information that comes from various sources, and distribute this information to a set of client apps (that you also have to write) running on different devices and platforms.

How can XML help app servers do their work? As you can see in Figure 2, in order for the app server to harvest information from such a rich variety of sources, there must be some common ground between all of these sources (each of which might be running on a different hardware and software system). This common ground is the information which flows throughout the entire system, regardless of what source the information comes from. CORBA is an example of tying disparate systems together based on the interfaces that certain remote objects implement. XML does the same thing for data. It allows these disparate systems to share information in a medium that consists only of pure information (and the structural relationships that exist inside of that information). By taking the lowest common denominator approach by using plain text to encode data, XML allows these systems to talk with each other without requiring any special binary information format converters or other service layers to translate between binary formats (for encoding data). Also, since HTTP already supports transmission of plain text, it is completely natural to move XML around using the Hyper Text Transfer Protocol through firewalls and disparate networks. This is shown in Figure 3. XML can be transmitted between systems using one of the most prevalent protocols in use today, Hypertext Transfer Protocol or HTTP 1.1 (which is the protocol of the web).

5. A floating element's top may not be higher than the top of any earlier floating or block-level element.

Similar to rule 4, this keeps a floated element from floating all the way to the top of its parent element. Thus, if a DIV 's first child element is a paragraph, followed by a floated image and then another paragraph, the top of the floated image can't be any higher than the top of the paragraph that precedes it. It is also impossible for a floated element's top to be any higher than the top of a floatedcontaining block.

As wonderful as all of this is, there arises a serious question. Suppose you have a positioned element that you don't want to be any smaller than a certain size? Consider the following styles:

top: 10%; bottom: 20%; left: 50%; right: 10%;

Thus the height is 70%, and the width 40% of the containing block's height and width. That's fine as far as it goes -- but what happens if the containing block is only 50 pixels