CSS: The Definitive Guide, 3rd Edition (64 page)

A very
common desire among authors of paged media is the ability to have a
running head
.
This is an element that appears on every page, such as
the document's title or the author's name. You can specify a running head in CSS2
by using a fixed-position element. For
example:

div#runhead {position: fixed; top: 0; right: 0;}

This
will place any
div
with an
id
of
runhead
at
the top-right corner of every page box when the document is output to a paged
medium. The same rule would place the element in the top-right corner of the
viewport in a continuous medium, such as a web browser. Any element positioned in
this way will appear on every page. It is not possible to "copy" an element to
become a repeated element. Thus, given the following, the
h1
element will appear as a running head on every page, including
the first
one:

h1 {position: fixed; top: 0; width: 100%; text-align: center;
font-size: 80%; border-bottom: 1px solid gray;}

The
drawback is that the
h1
element, being
positioned on the first page, cannot be printed as anything except the running
head.

All of this talk about positioning elements in a paged medium leads to an
interesting question: what happens if an element is positioned outside the page
box? You don't even need positioning to create such a situation. Think about a
pre
element that contains a line with 411
characters. This is likely to be wider than any standard piece of paper, so the
element will be wider than the page box. What happens then?

As it turns out, CSS2 doesn't say exactly what user agents should do, so it's
up to them to come up with a solution. For a very wide
pre
element, the user agent might simply clip the element to the
page box and throw away the rest of the content. It could also generate extra
pages to display the "leftover" part of the element.

There are a few general recommendations for handling content outside the page
box, two of which are really important. First, content should be allowed to
protrude slightly from a page box to allow "bleeding." This implies that no extra
page would be generated for the portions of such content that exceed the page box.

Second, user agents are cautioned not to generate large numbers of empty pages
for the sole purpose of honoring positioning information. Consider:

h1 {position: absolute; top: 1500in;}

Assuming that the page boxes are 10 inches high, the user agent would have to
precede an
h1
with 150 page breaks (and thus
150 blank pages) just to honor that rule. Instead, a user agent might choose to
skip the blank pages and only output the last one, which actually contains the
h1
element.

The other two recommendations state that user agents should not position
elements in strange places just to avoid rendering them, and that content placed
outside a page box can be rendered in any number of ways. (Some elements of CSS
are useful and intriguing, but some seem to cheerily state the obvious.)

If you're breaking up a single document into a series of slides, you need a way
to define the boundaries between each slide. This is done using the page-break
properties. Whether you use
page-break-before
or
page-break-after
will depend largely on how
your document is constructed.

As an example, consider the HTML document shown in
Figure 14-8
. There is a series of
h2
elements, each followed by an unordered
list. This forms the "outline view" for your slideshow.

Figure 14-8. A slideshow outline using simple HTML

Now all you need to do is break up the document into slides. Since every slide
starts with an
h2
element, you can simply
declare:

h2 {page-break-before: always;}

This will ensure that every page (that is, every slide) will start with an
h2
element. Since the title of each slide is
represented by an
h2
, this is fine: every slide
will have an
h2
as its first element. You can
see the rendering of a slide in
Figure
14-9
.

Figure 14-9. A slide

Of course, the slide looks pretty plain because you've done nothing else to
make it look good; you've simply defined where page breaks are to be inserted.

Given the outline as it's currently set up, you could also have defined slide
boundaries by inserting page breaks after the lists, instead of before the
h2
elements:

ul {page-break-after: always;}

This method would work well, as long as your outline never includes nested
lists. If there is a chance of having unordered lists nested within the
"top-level" lists, then you'd either need to go back to putting page breaks before
h2
elements, or add a second rule to prevent
page-breaking:

ul {page-break-after: always;}
ul ul {page-break-after: auto;}

When you position elements, their initial
containing block will be the page box in which they are placed. Thus, if you want
the title of every slide to actually appear on the bottom of the slide, you would
write something
like:

h2 {page-break-before: always; position: absolute; bottom: 0; right: 0;}

This
rule would place any
h2
element at the
bottom-right corner of the page box (slide) in which it appears. Of course, it's
possible to position elements with respect to other elements instead of the page
box. See
Chapter 10
for details on
positioning.

A fixed-position element, on the other hand, will appear
in every page box in the slideshow, just as in the print medium. This means that
you can take a single element, such as the document title, and put it on every
slide, like
this:

h1 {position: fixed; top: 0; right: 0; font-size: 80%;}

This
technique can be used to create running footers, graphical sidebars for every
slide, and so on.

It's often said that web designs should be flexible and able to adapt to any
resolution—and that's certainly true in most cases. However, projection styling is
not web styling, so it often makes sense for a projection style sheet to be
created with a specific resolution in mind. As an example, most projectors (as of
this writing) default to a resolution of 1024 × 768. If you know you'll be
projecting at that size, it's logical to set up your CSS for that exact size. Font
sizing, element placement, and so forth can all be tuned to create the best visual
experience for the target resolution.

For that matter, you might create different style sheets for different
resolutions: one for 800 × 600, another for 1024 × 768, and a third for 1280 ×
1024, just to cover the most common bases.
Figure 14-10
shows a slide at 1024 × 768.

Figure 14-10. A fully styled slide

Another thing to bear in mind is that projected documents are generally more
readable for the audience if they employ high-contrast colors. This is
particularly true since some projector bulbs aren't as bright as others, and
dimmer bulbs call for even higher contrast. This also highlights (no pun intended)
the fact that you have even less of a guarantee of color fidelity in projection
situations than in normal web design (and that's not saying much).

speak

There are two other
properties that affect the way in which element content is rendered aurally. The
first affects the rendering of punctuation and is called (appropriately enough)
speak-punctuation
.

Given the default value of
none
,
punctuation is rendered aurally as pauses of appropriate lengths, although CSS
does not define these lengths. To pick an example, the pause representing a period
(and thus the end of a sentence) might be twice as long as the pause representing
a comma. Pause lengths are likely to be language-dependent.

With the
value
code
, punctuation is actually rendered
aurally. Thus, the following example would be rendered as, "avast comma ye
scalawags exclamation
point":

Avast, ye scalawags!

To
use another example, the following fragment might be rendered aurally as, "a left
bracket href right bracket left curly brace color colon red semicolon right curly
brace":

a[href] {color: red;}

Similar
to affecting punctuation rendering,
speak-numeral
defines the method of speaking
numbers.

The default value
continuous
means that the number is spoken as a whole number, whereas
digits
causes numbers to be read
individually.
Consider:

23

23

The aural rendering of the first paragraph would be "twenty-three,"
whereas the second paragraph would be rendered as "two three." As with
punctuation, numeric renderings are language-dependent but undefined.

In the aural rendering of a table, it can be easy
to lose track of what the cell data actually means. If you're on the 9th row of a
12-row table, and the 6th cell in that row is "21.77," what are the odds you'll
remember what the 6th column represents? Will you even remember what the numbers
in this row relate to? Table headers provide this information and are easy to
check visually. To solve this problem in the aural medium, CSS2 introduced
speak-header
.

By default, a user agent will render the content of a table header
only once, when the cell is encountered. The other alternative is to always render
the table header information when a cell relating to that header is
rendered.

Let's consider the following simple table as an
example:

Favorite Color
Jim
Joe
Jane
red
green
blue

Without
any styles applied, the aural rendering of this table would be, "Favorite Color
Jim Joe Jane red green blue." You can probably figure out what all that means, but
imagine a table containing the favorite colors of 10 or 20 people. Now, suppose
you apply the following styles to this
table:

#colors {speak-header: always;}
#headers {speak: none;}

The
aural rendering of the table should then be, "Favorite Color Jim red Joe green
Jane blue." This is much easier to understand, and it will continue to be—no
matter how large the table might grow.

In addition to ways to affect the style of speech, CSS
also offers
speech-rate
, which is used to set
the speed at which content is aurally rendered.

The values are defined as follows:

Here are two examples of extreme changes in speech
rate:

*.duh {speech-rate: x-slow;}
div#disclaimer {speech-rate: x-fast;}

CSS
does not define how the speech rate is altered. A user agent could draw out each
word, stretch out the pauses between words, or both.

volume

Provides a numeric representation of the volume.
0
corresponds to the minimum audible volume, which is
not
the same as being silent;
100
corresponds to the maximum comfortable
volume.

Calculated as a percentage of the inherited value.

silent


No sound is produced, which is different from the numeric value
0
. This is the aural equivalent of
visibility: hidden
.

x-soft


Equivalent to the numeric value
0
.

soft


Equivalent to the numeric value
25
.

medium


Equivalent to the numeric value
50
.

loud


Equivalent to the numeric value
75
.

x-loud


Equivalent to the numeric value
100
.