Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 26th of November 2015 01:14:11 AM

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 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 percentages for margin and padding may be the best way to set styles that will hold up in more than one media; for example, documents that will look good on a monitor as well as a printout.

It's also possible to mix percentages with length values. Thus, to set H1 elements to have top and bottom margins of one-half em and side margins that are 10% of the width of the browser window, you can declare the following, shown in Figure 7-12:

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 side notes, we have chosen to simply describe positioning as it is given by the CSS2 specification and leave things there. Perhaps the second edition of this book will contain more practical advice, but at this time, the only practical advice we can give is this: test your positioning code thoroughly, and be prepared for inconsistencies between positioning implementations.

9.1. General Concepts

Before delving into the specific mechanisms of positioning, we need

4.1.1. Indentation and Horizontal Alignment

It's best to start with a discussion of how you can affect the horizontal positioning of text within a line. This is not the same as actual positioning, which is done with respect to the page itself. Think of these properties as ways to affect how the lines of text are laid out, as you might do when creating a newsletter or writing a report.

properties. The positioned element does not flow around the contentof other elements, nor does their content flow around the positionedelement. This implies that an absolutely positioned element mayoverlap other elements, or be overlapped by them. (We'll seehow you can affect the overlapping order at the end of the chapter.)

Remember that the containing block of an absolutely positionedelement is not necessarily its parent element. In fact, it often isnot, unless the author takes steps to correct this situation.Fortunately, that's easy to do. Just pick the element that youbut it's valid behavior.

Let's consider another example, illustrated in Figure 8-20, where the left margin is set to be negative:

DIV {width: 400px; border: 1px solid black;}P.wide {margin-left: -50px; width: auto; margin-right: 10px;border: 3px solid gray;}
Figure 8-20

Figure 8-20. Setting a negative left margin

In this case, not only does the paragraph spill beyond the borders ofthe DIV, but also beyond the edge of the browseraccording to their values for vertical-align. Bydefault, this will cause all text in the line to be aligned alongtheir baselines, but of course differentvertical-align values will have different effects.All of the elements could be top-aligned, for example. We'llreturn to vertical alignment later in the chapter, but for now willassume that everything is baseline-aligned.

Now the line-height comes into play. Let'sassume the following case: