Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 26th of September 2016 02:13:03 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:

page-break-before
page-break-after
page-break-inside
orphans
widows 

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 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.

Web-based applications are similar to app servers, except for one thing: Web-based applications don't have client apps, instead they use web browsers on the client side. They generate their front ends using HTML, which is dynamically generated by the web-based app. In the Java world, Servlets are best suited for this job.

Web-based apps might themselves rely on another app server to gather information that is presented on the client web browser. Also, you can write Servlets that get information from remote or local databases, XML document repositories and even other Servlets. One good use for web-based apps is to be a wrapper around an app server, so that you can allow your customers to access at least part of the services offered by your app server via a simple web browser. So web-based apps allow you to integrate many components including app servers, and provide access to this information over the web via a simple web browser.

Web-based apps are very deployable, since they don't require special Java VMs to be installed on the client side, or any other special plug ins, if the creator of the web-based app relies solely on HTML. Unfortunately, this can restrict the level of service that can be offered by a web-based app when compared to the functionality offered by custom clients of an app server, but they are a good compromise when it comes to providing web-based access to your information. In fact, in a real world scenario, both a web-based app and app server may be used together, in order to provide your customers access to their information. In an Intranet setting, you might deploy the clients that come with the app server, and in an Internet setting it would be better to deploy a web-based app that sits on top of this app server, and gives your customers (relatively) limited access to their data over the web (via a simple web browser).

covered in the previous chapter, so we'll revisit the high points and delve into some trivia before moving on to the much more complex subject of horizontal formatting.

8.2.1.1. Height

In general, the height of an element is determined by its content. This can be affected by its width, of course; the skinnier a paragraph becomes, for example, the taller it has to be in order to contain all

These properties describe an offset from the nearest side of thecontaining block (thus the term side-offset ).For example, top describes how far the outer top edgeof the positioned element should be placed from the top of itscontaining block. In the case of top, positivevalues move the top edge of the positioned elementdownward, while negative values move itabove the top of its containing block.Similarly, left describes how far to the right (forpositive values) or left (for negative values) the outer left edge of