Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 24th of October 2016 04:01:25 PM

10.8. Media Types and @-rules

Don't get too excited yet. We aren't talking about media types in the sense of things like audio and video authoring. Well, not exactly, anyway. We're talking about creating rules for presentation within various kinds of media. The defined types of media thus far are:

These are all values of @media, one of several new @-rules. Some others are:

10.8.1. Paged Media

Since I just brought up paged media, I should probably mention that there are some new properties that apply to such media. Five of them apply to page breaks and where they appear:


The first two are used to control whether a page break should appear before or after a given element, and the latter two are common desktop publishing terms for the minimum number of lines that can appear at the end or beginning of a page. They mean the same thing in CSS2 as they do in desktop publishing.

page-break-inside (first proposed by this author, as it happens) is used to define whether or not page breaks should be case in Figure 7-83). Therefore, you should alwaysdefine a backup list-style-type for the list:

UL LI {list-style-image: url(ohio.bmp); list-style-type: square;}
Figure 7-83

Figure 7-83. Providing fallbacks for unusable images

The other thing you can do with list-style-imageis set it to the default value of none. This isgood practice because list-style-image isinherited -- so any nested lists will pick up the image as thebullet, unless you prevent this from happening: placed inside a given element. For example, you might not want unordered lists to have page breaks inside them. You would then declare UL {page-break-inside: avoid;}. The rendering agent (your printer, for example) would avoid breaking unordered lists whenever possible.

There is also size, which is simply used to define whether a page should be printed in landscape or portrait mode and the length of each axis. If you plan to print your page to a professional printing system, you might want to use marks, which can apply either cross or crop marks to your page. Thus you might declare:

@page {size: 8.5in 11in; margin: 0.5in; marks: cross;}

This will set the pages to be U.S. letter-standard, 8.5 inches wide by 11 inches tall, and place cross marks in the corners of each page.

In addition, there are the new pseudo-classes :left , :right, and :first, all of which are applied only to the @page rule. Thus, you could set different margins for left and right pages in double-sided printing:

@page:left {margin-left: 0.75in; margin-right: 1in;}
@page:right{margin-left: 1in; margin-right: 0.75in;} 

The :first selector applies only to the first page of a document, so that you could give it a larger top margin or a bigger font size:

@page:first {margin-top: 2in; font-size: 150%;}

10.8.2. The Spoken Word

To round things out, we'll cover some of the properties in the area of aural style sheets. These are properties that help define how a speaking browser will actually speak the page. This may not be important to many people, but for the visually impaired, these properties are a necessity.

First off, there is voice-family, which is much the same as font-family in its structure: the author can define both a specific voice and a generic voice family. There are several properties controlling the speed at which the page is read (speech-rate), as well as properties for the pitch , pitch-range, stress, richness, and volume of a given voice. There are also properties that let you control how acronyms, punctuation, dates, numerals, and time are spoken. There are ways to specify audio cues, which can be played before, during, or after a given element (such as a hyperlink), ways to insert pauses before or after elements, and even the ability to control the apparent position in space from which a sound comes via the properties azimuth and elevation. With these last two properties, you could define a style sheet where the text is read by a voice "in front of" the user, whereas background music comes from "behind" and audio cues come from "above" the user!

Library Navigation Links

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

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. This will display a square 10 ems wide by 10 ems high. This square is drawn from the top left outer corner, so any margins, borders, and padding will influence how much of the element is visible and how much is clipped out.

    However, if an element is set to visibility: hidden, it is made "invisible" (to use the wording in the specification). In its invisible state, the element still affects the document's layout as though it were visible. In other words, the element is still there: you justlined up, this means that the line box for this line is now only 12pixels high, just like the others. However, it also means that theoversized text intrudes into other lines even more than before.

    Let's consider another situation where another inline elementis in the same line as the boldfaced text, but its alignment is otherthan the baseline:

    <P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
    85px . Thus the top inner edge of the floatedelement should be at pixel position 85.

    A similar line of reasoning explains how the left inner edge of thefloated element can be placed to the left of the left inner edge ofits parent. This ability can be used for interesting effects likehanging floated images, but only if thebrowser honors negative margins on floated elements. If it does, theresult will be something like that shown in Figure 7-71.


    Yes, that's really all there is to it. One simpleurl value, and you're putting images in forbullets, as you can see in Figure 7-81.

    Figure 7-81

    Figure 7-81. Using images as bullets

    Of course, you should exercise care in the images you use, as thisexample makes painfully clear (shown in Figure 7-82):