Related Properties
None.
width
width sets the width of an element’s content area.
Summary
Value Syntax
<-length-> | <-percentage-> | auto | inherit
Initial Value
auto
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements, table rows, and row groups
Media Groups
visual
Values
<-length->
Any length unit. Negative length values are not permitted for this property.
<-percentage->
The width is calculated with respect to the width of the element’s containing block, assuming that the
containing block’s width has been explicitly set. If not, then a percentage value is treated as auto.
auto
The result of this value depends on a number of factors. In the normal document flow, auto will be
treated as 100%, assuming that there are no margins, borders, or padding set on the element. For
floated elements, the value auto will tend toward a width 0. In positioned elements, it may have the
same effect, or it may be overridden due to constraints introduced using properties such as left and
right. See the section on positioning rules in Chapter 1 for more details.
Note If the width of a replaced element (e.g., an image) is set to a length unit, and no
height is set, then the image will be scaled so that its width matches the declared
value, and the height is altered by the same proportion. For example, an image
100 pixels tall and 50 pixels wide is set to width: 200px; thus its height will be
increased to 100 pixels. Setting the width of a replaced element to a percentage
will operate as described above, and make the width of the element some
Cascading Style Sheets 2.0
122
percentage of the width of its containing block. It is not possible to reduce an
element to half its intrinsic size through a percentage value, for example.
Examples
div.aside {width: 25%;}
img.photo {width: 250px;}
Related Properties
height, max-width, min-width
word-spacing
word-spacing modifies the amount of space placed between words.
Summary
Value Syntax
normal | <-length-> | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
normal
The default spacing between words is not changed. In practice, this is equivalent to setting the value to
0.
<-length->
This will add to the spacing between words—the greater the length, the more space will be seen
between words. Negative values are permitted, and will cause words to bunch together, to the point of
potentially overwriting one another or even appearing to write the words “backwards.” The length given
will modify the amount of space already between words, which means that there is usually a minimum
of a single space from which the modification occurs.
Note In fully justified text (see text-align), the space between words may be
programmatically altered in order to create the effect of full justification.
In order to preserve the relative spacing between words for descendant elements, authors are
encouraged to use em length units.
Examples
em {letter-spacing: 1px;}
h1.wider {letter-spacing: 0.5em;}
p.scrunched {letter-spacing: -0.5ex;}
table {letter-spacing: normal;}
Related Properties
letter-spacing, text-align
Cascading Style Sheets 2.0
123
z-index
z-index sets the stacking level of an element.
Summary
Value Syntax
auto | <-integer-> | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
positioned elements
Media Groups
visual
Values
auto
The stack level of the element is the same as that of its parent element. Furthermore, the element does
not generate a new stacking context.
<-integer->
The stack level of the element is set to the given value, and it establishes a new stacking context for any
descendant elements. The stack level of the element in its newly created stacking context is 0. The
higher an element’s z-index value, the "closer" it is to the reader. Negative values are permitted for
this property. In theory, any arbitrarily large number may be declared, but there may be implementationspecific
limits.
Note The stack level of an element is simply a numeric designation of its position on
the z-axis. This axis is imagined as a line extending out of the canvas as well as
behind it, although no element may ever be placed “behind” the canvas. An
element is placed on the z-axis, and also given its stack level, using the property
z-index. For example, elements A and B are given z-index values of 2 and 1044,
respectively. In any situation where A and B overlap due to their positioning, then
all of B will be visible, whereas part of A will appear to be "behind" B.
If an element generates a stacking context, then all of its descendant elements are placed on the z-axis
as a group. Thus, no matter what values are assigned to descendants of element B, they will be placed
“in front” of element A and its descendants. For those familiar with vector graphics programs such as
Adobe Illustrator, a stacking context is basically equivalent to a layer on which many shapes may be
placed. The shapes in each level will have a stacking order comparable to each other, but all of them
will be “in front” of the layer below their layer.
The usual way to envision this is to add another stacking number for each context in which an element
exists. For example, assume that element B, still with a z-index value of 1044, has a descendant
element B2 with a z-index value of –40. Element A (z-index of 2) has a descendant element A2
with a z-index of 5000. If A2 and B2 overlap, B2 will still be "in front" of A2. Their z-index values
can be thought of like this: A2, 2,5000; B2, 1044,-40. In summary, the four elements in question
would be sorted this way:
A 2
A2 2,5000
B2 1044,-40
B 1044
Note that elements with a z-index of auto are effectively assigned places along the z-axis by the user
agent, but there is no defined behavior for such a case. A user agent could decide to stack such
elements in the order they are rendered, with the earliest elements in the document being the furthest
away from the user. Of course, a user agent could do just the opposite, deciding that the last elements
Cascading Style Sheets 2.0
124
in a document will be furthest away from the user on the theory that the first elements contain the most
important information. There is no way to guarantee any particular behavior.
Examples
div.sidebar {position: fixed; height: 100%; width: 20%; left: 0;
z-index: 10;}
em#drop {position: relative; top: 14px; z-index: -66;}
Related Properties
position
Chapter 5: Paged Media Styles
Overview
One of the areas in which CSS2 improves greatly over CSS1 is in its addition of rules for handling
paged media. This is usually assumed to refer to material such as printouts of a document, but it can
also refer to specialized devices which display information a page at a time, as well as to “print
previews” on a computer screen, and more. A good example is the default display of PDF files, which
are usually presented a page at a time.
In creating a model for paged media, CSS takes the general idea of the box model and extends it to
create the page box. This is the term used to refer to the area in which content is drawn on a given
piece of the display medium (e.g., a piece of paper in a printout). The area in which a page box is drawn
is referred to as a sheet. This term is used mostly to avoid the confusion which using the term “page”
would invoke. In CSS2, all page boxes are rectangular, although they may not necessarily be the same
size as the sheets on which they are drawn.
Because the page box is drawn from the general box model in CSS2, authors are able to set margins
and dimensions for a page box, just as they would with an ordinary element box (however, padding and
borders cannot be set on page boxes in CSS2). All this is done using the @page directive, which is
explained later in the chapter.
As of CSS2, the specification does not contain properties to automatically generate running heads or
footers, place page numbers, and other advanced page-layout features. These features are expected to
appear in a future version of CSS. CSS2 does allow authors to simulate these features with the property
display (see Chapter 4), although the methods are a bit clumsy.
General Paged-Media Rules
There are some concepts which should be understood before attempting to write paged-media styles.
These include page-breaking and content-clipping rules.
Page-Breaking Rules
A good portion of the paged media rules are devoted to affecting the placement of page breaks. In order
to keep these as clear as possible, CSS defines a number of rules related to “allowed” page breaks.
This section will review these rules in order to make the properties which follow easier to understand.
In general, CSS recommends the use of some general heuristics to determine how page breaks should
be placed.
�� Break pages as few times as possible.
�� Attempt to make all page boxes appear to be about the same height.
�� Avoid page breaks inside block boxes which have borders.
�� Avoid page breaks inside tables.
�� Avoid page breaks inside floated elements.
The specification comes right out and admits that these rules may contradict each other in some
circumstances. It also avoids making them actual requirements; thus, user agents are free to place
page breaks as many or as few times as possible, and to use or ignore any or all of the preceding rules.
Cascading Style Sheets 2.0
125
However, there are some rules which user agents may not ignore. First are the two basic rules which
define where page breaks may actually occur.
�� Page breaks may occur in the vertical margins between block boxes. If a page break
occurs between two block boxes, then the adjacent margins (the bottom margin of the
preceding element and the top margin of the following elements) are set to 0.
�� Page breaks may occur between the line boxes of a block box.
There is more to the story than that, as it happens. There are five rules which govern the placement of
page breaks.
1. A page break may only be placed between block boxes if the values of page-breakafter
and page-break-before for the two affected elements will allow it. This is the
case if the value of at least one of the elements is always, left, or right; or if the values
for both elements is auto.
2. If the values of page-break-after and page-break-before for two adjacent
elements is auto, and the nearest common ancestor to the two elements has a
page-break-inside value of avoid, then do not place a page break between the
elements.
3. A page break may be placed between two line boxes in a block box only if the
number of line boxes between the line box and the start of the block box is greater
than or equal to the value of orphans for the element. Similarly, a page break may
be placed between two line boxes only if the number of line boxes between the line
box and the end of the block box is greater than or equal to the value of widows for
the element.
4. A page break may be placed between two line boxes of an element only when the
value of page-break-inside for the element is auto.
5. A page break must be placed between two block boxes if the value of page-breakbefore
(for the preceding element) or page-break-after (for the following
element) is always, left, or right.
In situations where the rules do not allow for a line break, then rules 1 and 3 are ignored in order to
allow more flexibility. If there is still no valid place for a line break to appear, then rules 2 and 4 are also
ignored. In other words, all bets are off. At this point, the user agent will likely perform some form of
straightforward clipping operation to split the page, but other behaviors may be used. Rule 5 always
takes effect, no matter the circumstance.
Now that we’ve explored the circumstances in which a page break may be placed, let’s look at the two
rules which describe when a page break must be placed.
1. A page break must be placed between two block boxes if the value of page is
different for the two blocks.
2. A page break must be placed between two block boxes if the value of page for the
last line box in the preceding element is different than the value of page for the first
line box of the following element.
Finally, page breaks cannot be placed inside absolutely positioned elements.
Content-Clipping Rules
If content somehow ends up beyond the confines of the page box—for example, if it is an especially
wide image, or an element which has been positioned too far to one side or another—then the browser
must choose some mechanism to cope with the situation. As with the basic page-breaking rules, there
are a few suggestions.
�� Content should be permitted to “bleed” beyond the edges of the page box. In other
words, user agents should render content which is outside the page box so long as
there is room to do so.
�� Although it may be necessary to generate blank pages to honor the values left and
right for the page-break rules, generation of an excessive number of empty page
boxes should be avoided.
�� If an element is positioned outside the page box to the extent that no part of it will be
rendered, then the user agent may choose its own method of handling it. It may discard
the element, for example, or place it at the end of the document.
Since none of these behaviors are requirements, authors cannot rely on any particular behavior to
happen in all user agents. For this reason, the CSS specification also recommends that authors not
create rules to place elements in odd positions simply to avoid rendering them. If an element should not
Cascading Style Sheets 2.0
126
be rendered in paged media, then it can be suppressed using display: none or made invisible with
visibility: hidden.
Reference
@page
@page is used to define the page context for a given page box.
Summary
Syntax
@page <-page- selector="">?<-page- class="">? {<-page- context="">}
Media Groups
paged
Components
<-page- selector="">
Any legal string value may be used to define the page selector. For example, a page selector meant to
describe one page of a greeting card could be called card, greeting-card, or anything else which
has meaning for the author. Similarly, a page selector for handheld devices could be palm-screen or
hand-screen. The page selector can then be utilized by way of the property page.
<-page- class="">
This can be any of the page pseudo-classes :first, :left, and :right (see the upcoming
descriptions). These pseudo-classes must follow the page selector with no intervening space.
<-page- context="">
The block of CSS rules which describe the page box.
Description
The page context is especially notable for the restrictions which are imposed upon it and the way in
which it changes the behavior of a few visual properties.
First of all, a page box cannot be given padding or borders—only margins—so these properties will
have no effect in a page context. (The CSS2 specification expressly states that this may change in the
future.) Second (and more important), a page context has no concept of fonts, which means that em and
ex units cannot be used to describe the size of a page box or its margins. All such dimensions must be
declared with an absolute-length unit such as in or cm, or the relative-size length unit px (pixels). Note,
however, that the mapping of pixels to a paged medium is not defined and cannot be guaranteed. It is
possible that a laser printer, for example, would interpret a length of 600px as 600 dots. At a resolution
of 1200 dots per inch or more, this would be a very small length. For this reason, the use of pixels in
paged media is strongly discouraged.
One property whose behavior changes in a paged-medium context is position. When an element is
set to position: fixed, it will appear in the same position on every page. This can be useful for
creating effects such as running heads and footers. If this is done, care must be taken to make sure that
the fixed-position element does not overlap other content on the page. This could be accomplished by
increasing the margins on the page box on the appropriate side.
A page context may be established for any element, including the BODY element in HTML. If an element
has a different page context from the element which precedes it, then a page break should be inserted
between them. See the section on page later in this chapter for more details.
Examples
@page sideways {size: landscape; margin: 0.75in;}
@page {size: 8.5in 11in; marks: cross; margin: 1in;}
@page legal:first {size: 8.5in 14in; margin: 0.66in; margin-top: 3in;}
Related Properties
page
Cascading Style Sheets 2.0
127
:first
The pseudo-class :first is used to style the first page of a document.
Summary
Syntax
@page <-page- selector="">?:first {<-page- context="">}
Media Groups
paged
Description
By using :first, the author can set special styles for the first page of a document which will not carry
over to other pages. This could be an increased top margin, for example, or a portrait orientation when
the rest of the document is in landscape.
Examples
@page :first {size: portrait; margin-top: 2.5in;}
@page rotate:first {size: landscape; margin-bottom: 10mm;}
:left
The pseudo-class :left is used to style the left pages of a document.
Summary
Syntax
@page <-page- selector="">?:left {<-page- context="">}
Media Groups
paged
Description
This pseudo-class allows authors to define styles for pages which are on the left in double-sided
printing. For example, in one common paged-media layout format, the right margin (which will be toward
the “inside” of a two-page layout) of left-side pages should be larger to account for binding, while the left
(or “outer”) margin should be equivalent to the top and bottom margins. This can be accomplished with
simple margin rules for all :left pages.
Examples
@page :left {margin-right: 1.25in; margin-left: 1in;
margin-top: 1in; margin-bottom: 1in;}
:right
The pseudo-class :right is used to style the right pages of a document.
Summary
Syntax
@page <-page- selector="">?:right {<-page- context="">}
Media Groups
paged
Description
This pseudo-class allows authors to define styles for pages which are on the right in double-sided
printing, such as increasing the margin width for the left (“inside”) margin to account for binding (see the
previous description of :left for details). This can be accomplished with simple margin rules for all
:right pages.
Cascading Style Sheets 2.0
128
Examples
@page :right {margin-left: 1.25in; margin-right: 1in;
margin-top: 1in; margin-bottom: 1in;}
marks
marks specifies the appearance and type of cropping marks which are placed on each page.
Summary
Value Syntax
[ crop || cross ] | none | inherit
Initial Value
none
Percentages
n/a
Inherited
n/a
Applies to
page context
Media Groups
visual, paged
Values
crop
Directs that crop marks be placed on the page. These marks are used by printers to determine where a
page should be trimmed.
cross
Causes the user agent to add cross marks to the page. These marks are used to align sheets during the
printing process.
none
No marks should be placed on the page.
Note The marks which are invoked with this property are placed just outside the page
box, the size of which is determined by the property size.
The placement, size, and appearance of the marks is entirely under the control of the user agent, and
cannot be affected through CSS.
Examples
@page proof {marks: cross crop; margin: 1.5em; size: auto;}
@page {marks: none;}
Related Properties
size
orphans
orphans sets the minimum number of lines in an element that must appear at the bottom of a page.
Summary
Value Syntax
<-integer-> | inherit
Initial Value
Cascading Style Sheets 2.0
129
2
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Values
<-integer->
The number given sets the minimum number of lines permitted at the bottom of a page. The value of
orphans can affect the page-breaking for a given page, effectively moving the "break point" up or down
depending on the circumstances. For example, assume an element which starts one line before the
bottom of the page box. If the value of orphans is 2, then the page break will be placed before the
element, and it will start on the next page. This will have the side effect of increasing the "blank space"
at the bottom of the page.
Note The value of orphans will be invoked for a given element only if that element
should have a page break within it. In other words, an element which started just
before the end of a page and which carries over to the next page will use its
orphans value. Any element which fits onto a single page in its entirety can have
a value for orphans, but will not use it.
Setting the value of orphans sufficiently high can lead to strange effects. If you set orphans to 20 for
all elements in a document, then any element which is longer than 20 lines and starts less than 20 lines
before the bottom of the page will be shifted to the next page.
Examples
p {orphans: 3;}
ol {orphans: 5;}
Related Properties
page-break-after, page-break-before, page-break-inside, widows
page
page is used to invoke a page selector which has been previously defined using @page.
Summary
Value Syntax
<-page- selector=""> | auto
Initial Value
auto
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Cascading Style Sheets 2.0
130
Values
<-page- selector="">
Any previously defined page selector. See the section on @page earlier in the chapter for more details.
auto
The user agent should format the page according to its defaults.
Note As a property, page can have no apparent effect on page layout without a
previously defined page selector to use. It is useful, however, in that a page
selector can be defined for a particular page layout, and then that layout can be
assigned to individual elements. For example, suppose that you have a type of
table which needs to be printed in landscape mode. By assigning a consistent
class to these tables (e.g., table class="chart">), you can then use page to
assign a landscape-oriented page context to these elements. Since their page
context will differ from surrounding elements, these tables will appear on their
own pages, with page breaks being inserted before and after the landscape
tables.
If you wish to apply a consistent page context to the entire document, you can create a page selector
and then select the BODY element with a page rule set to that page selector.
Examples
@page proof {marks: cross crop; margin: 1.5em; size: auto;}
body.rough-draft {page: proof;}
@page rotate {size: landscape;}
table.chart {page: rotate;}
Related Properties
@page
page-break-after
page-break-after indicates whether (and how many) page breaks should be allowed after an
element’s box.
Summary
Value Syntax
auto | always | avoid | left | right | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
block-level elements
Media Groups
visual, paged
Values
auto
Page breaks should be neither forced nor prevented after the element’s box.
always
A page break should be forced after this element’s box.
avoid
Cascading Style Sheets 2.0
131
No page break should be placed after the element’s box if at all possible. This does not guarantee the
lack of a page break after the element.
left
Force one or two page breaks after the element’s box, such that the next page on which an element is
printed will be a left-hand page.
right
Force one or two page breaks after the element’s box, such that the next page on which an element is
printed will be a right-hand page.
Note The value of this property is not the sole factor in determining whether a page
break should follow the element. This decision will also be affected by the value
of page-break-before for a following element, and the value of page-break-inside
for any ancestor elements.
Examples
h1 {page-break-after: avoid;}
div.summary {page-break-after: always;}
Related Properties
orphans, page-break-before, page-break-inside, widows
page-break-before
page-break-before indicates whether (and how many) page breaks should be allowed before an
element’s box.
Summary
Value Syntax
auto | always | avoid | left | right | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
block-level elements
Media Groups
visual, paged
Values
auto
Page breaks should be neither forced nor prevented before the element’s box.
always
A page break should be forced before the element’s box.
avoid
No page break should be placed before the element’s box, if at all possible. This does not guarantee the
lack of a page break before the element.
left
Force one or two page breaks before the element’s box, such that the page on which the element is
printed will be a left-hand page.
right
Cascading Style Sheets 2.0
132
Force one or two page breaks before the element’s box, such that the page on which the element is
printed will be a right-hand page.
Note The value of this property is not the sole factor in determining whether a page
break should follow the element. This decision will also be affected by the value
of page-break-after for a preceding element, and the value of page-break-inside
for any ancestor elements.
Examples
h1 {page-break-before: right;}
table {page-break-before: always;}
Related Properties
orphans, page-break-after, page-break-inside, widows
page-break-inside
page-break-inside indicates whether page breaks should be allowed within an element’s box.
Summary
Value Syntax
avoid | auto | inherit
Initial Value
auto
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Values
avoid
No page break should be placed inside the element’s box if at all possible. This is not a guarantee, as
the element may be too large to fit on a single page.
auto
Page breaks should be neither forced nor prevented inside the element’s box.
Note The value of this property is not the sole factor in determining whether a page
break should follow the element. This decision will also be affected by the values
of page-break-before and page-break-after for any descendant elements. For
example, if a DIV is set to page-break-inside: avoid, but one of its descendant
elements has been set to page-break-before: always, then there will be a page
break inside the DIV.
Examples
ul, ol {page-break-inside: avoid;}
table {page-break-inside: avoid;}
p {page-break-inside: auto;}
Related Properties
orphans, page-break-after, page-break-before, widows
Cascading Style Sheets 2.0
133
size
size specifies the size and orientation of a page box.
Summary
Value Syntax
<-length->{1,2} | auto | portrait | landscape | inherit
Initial Value
auto
Percentages
n/a
Inherited
n/a
Applies to
page context
Media Groups
visual, paged
Values
<-length->
Sets the physical size of the page box. If only one length value is given, it sets both the height and width
of the page box. If two length values are given, the first is the width and the second the height of the
page box.
auto
The page box is sized to fit the display medium. For example, if the print page is 8.5 inches by 11
inches, then page: auto will result in a page box of that size.
portrait
Sets the page box to the same size as the display sheet, but the longer measure is forced to be the
vertical axis. As an example, if the sheet is 5 inches tall by 10 inches wide, a setting of size:
portrait will force the user agent to make the page box 10 inches tall by 5 inches wide. On the other
hand, an 8.5 inch by 11 inch sheet will result in a page box which is 8.5 inches wide by 11 inches tall.
landscape
Sets the page box to the same size as the display sheet, but the longer measure is forced to be the
horizontal axis. As an example, if the sheet is 5 inches tall by 10 inches wide, a setting of size:
landscape will force the user agent to make the page box 5 inches tall by 10 inches wide. On the
other hand, an 8.5 inch by 11 inch sheet will result in a page box which is 11 inches wide by 8.5 inches
tall.
Note If the page box which results from the values of size will not fit on the actual
sheet, then the CSS specification offers two possible fallbacks. First is to rotate
the page box 90 degrees, assuming this will allow the page box to fit onto a
sheet. If this is not the case, then the user agent may scale the page box to fit on
the sheet.
It is also left to user agents to decide where the page box will actually be placed on the sheet, although
the CSS specification recommends that it be centered within the sheet.
Examples
@page legal {size: 8.5in 14in;}
@page {size: landscape;}
Related Properties
@page
widows
widows sets the minimum number of lines in an element that must appear at the top of a page.
Cascading Style Sheets 2.0
134
Summary
Value Syntax
<-integer-> | inherit
Initial Value
2
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Values
<-integer->
The number given sets the minimum number of lines permitted at the top of a page. The value of
widows can affect the page-breaking for a given page, effectively moving the "break point" up or down
depending on the circumstances. For example, assume an element which should end one line after the
top of the page box. If the value of widows is 2, then the page break will be placed before the element,
and it will start on the current page. This will have the side effect of increasing the "blank space" at the
bottom of the previous page.
Note The value of widows will be invoked for a given element only if that element
should have a page break within it. In other words, an element which started just
before the end of a page and which carries over to the next page will use its
widows value. Any element which fits onto a single page in its entirety can have a
value for widows, but will not use it.
Setting the value of widows sufficiently high can lead to strange effects. If you set widows to 20 for all
elements in a document, then any element which ends less than 20 lines after the top of the page will
be shifted in its entirety onto the page, thereby removing it from the previous page.
Examples
div.aside {widows: 2;}
ul {widows: 6;}
Related Properties
orphans, page-break-after, page-break-before, page-break-inside
Chapter 6: Aural Media Styles
In addition to the visual and paged media, CSS also provides properties to support aural (audio) media.
Using these properties, it is theoretically possible to create audio styles nearly as rich as the visual
styles permitted by the rest of the specification. Besides enriching the Web for users who are blind or
otherwise visually impaired, aural styles could also be useful for automobile drivers who want to have
Web pages read to them by a dashboard browser, just to pick one example.
As of this writing, there is very little deployed support for aural styles, and what support does exist can
be found in niche products which exist to serve the visually impaired community. None of the popular
visual browsers, such as Netscape Navigator or Microsoft Internet Explorer, includes any support for
aural styles.
Cascading Style Sheets 2.0
135
Reference
azimuth
azimuth describes the position of a sound source along the horizontal axis of the listener’s
environment.
Summary
Value Syntax
<-angle-> | [[ left-side | far-left | left |
center-left | center | center-right | right | far-right | right-side ] ||
behind ] | leftwards | rightwards | inherit
Initial Value
center
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
<-angle->
Any angle value which corresponds to the range 0deg – 360deg. An angle value of 0deg corresponds
to a point directly in front of the listener, whereas 90deg corresponds to a point directly to the right,
180deg a point directly behind, and 270deg directly to the left of the listener. Negative angle values are
also permitted, so –90deg is equivalent to 270deg.
left-side
Equivalent to 270deg (-90deg). When combined with behind, the sound’s position is the same.
far-left
Equivalent to 300deg (-60deg). When combined with behind, the sound’s position is equivalent to
240deg.
left
Equivalent to 320deg (-40deg). When combined with behind, the sound’s position is equivalent to
220deg.
center-left
Equivalent to 340deg (-20deg). When combined with behind, the sound’s position is equivalent to
200deg.
center
Equivalent to 0deg. When combined with behind, the sound’s position is equivalent to 180deg.
center-right
Equivalent to 20deg. When combined with behind, the sound’s position is equivalent to 160deg.
right
Equivalent to 40deg. When combined with behind, the sound’s position is equivalent to 140deg.
far-right
Equivalent to 60deg. When combined with behind, the sound’s position is equivalent to 120deg.
right-side
Equivalent to 90deg. When combined with behind, the sound’s position is the same.
leftwards
Causes the audio source to be shifted by 20 degrees (in 360-degree space) to the left. In fact,
leftwards causes a shift in a counter-clockwise direction. Thus, if the sound source is initially at the
180deg position (directly behind the listener), then leftwards would actually cause the source to be
shifted to 160deg, or 20 degrees counterclockwise, which will sound to the listener like a rightward
movement.
Cascading Style Sheets 2.0
136
rightwards
Causes the audio source to be shifted by 20 degrees (in 360-degree space) to the right. In fact,
rightwards causes a shift in a clockwise direction. Thus, if the sound source is initially at the 180deg
position (directly behind the listener), then rightwards would actually cause the source to be shifted
to 200deg, or 20 degrees clockwise, which will sound to the listener like a leftward movement.
Note If an aural device can produce spatial audio, but cannot place sounds behind the
listener, then the device should convert the values between 90deg and 270deg
into values in the –90deg to 90deg range. The specification does not require a
particular method of accomplishing this, but suggests an algorithm equivalent to
the following:
if 90deg <> || <-cue-after-> ] | inherit
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
aural
Values
<-cue-before->
See the entry for cue-before.
<-cue-after->
See the entry for cue-after.
Note If two values are specified, the first corresponds to cue-before, and the second to
cue-after. If only one value is given, it applies to both cue-before and cue-after.
Examples
h1 {cue: url(flourish.wav);}
a:link {cue: url(open.wav) url(close.wav);}
Cascading Style Sheets 2.0
137
Related Properties
cue-before, cue-after, pause, pause-after, pause-before
cue-after
cue-after defines an auditory cue to be played immediately after the rendering of an element.
Summary
Value Syntax
<-uri-> | none | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
aural
Values
<-uri->
The user agent should use the sound resource defined by that URI as the audio cue. If the URI points to
something other than an audio file, then it is to be ignored and the user agent should act as though
cue-after had been set to none.
none
Setting cue-after to none means that no cue should be played.
Note cue-after can be used to play a "page turning" sound after each paragraph, sound
a gong to mark the end of a hyperlink, or other audible cues. Note that this cue is
rendered after any pauses declared using pause-after.
Examples
a:link {cue-after: url(close.wav);}
body {cue-after: url(the-end.wav);}
Related Properties
cue, cue-before, pause-after
cue-before
cue-before defines an auditory cue to be played immediately before the rendering of an element.
Summary
Value Syntax
<-uri-> | none | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
138
all elements
Media Groups
aural
Values
<-uri->
The user agent should use the sound resource defined by that URI as the audio cue. If the URI points to
something other than an audio file, then it is to be ignored and the user agent should act as though
cue-before had been set to none.
none
Setting cue-before to none means that no cue should be played.
Note cue-before can be used to play a "new section" sound before each heading,
produce a "mouse-click" sound to mark the beginning of a hyperlink, or other
audible cues. Note that this cue is rendered before any pauses declared using
pause-before.
Examples
a:visited {cue-before: url(drag.wav);}
h3 {cue-before: url(ding.wav);}
Related Properties
cue, cue-after, pause-before
elevation
elevation describes the position of a sound source along the vertical axis of the listener’s
environment.
Summary
Value Syntax
<-angle-> | above | level | below | higher | lower | inherit
Initial Value
level
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
<-angle->
Angle values are in the range –90deg to 90deg. An angle value of 0deg corresponds to a point which
is level with the listener, whereas 90deg corresponds to a point directly above, and –90deg directly
below.
above
Equivalent to the value 90deg.
level
Equivalent to the value 0deg.
below
Equivalent to the value -90deg.
higher
Cascading Style Sheets 2.0
139
Causes the sound source to be shifted upwards by 10deg. Values beyond the range –90deg to 90deg
are "clipped" to the edges of the range; thus, applying higher to a sound source with an elevation
of 90deg will result in the value 90deg.
lower
Causes the sound source to be shifted downwards by 10deg. Values beyond the range –90deg to
90deg are "clipped" to the edges of the range; thus, applying lower to a sound source with an
elevation of -90deg will result in the value -90deg.
Note By combining this property with azimuth, a sound’s position in the "aural sphere"
can be described.
Examples
h1 {elevation: above;}
h2 {elevation: 60deg;}
Related Properties
azimuth
pause
pause is a shorthand element for pause-before and pause-after.
Summary
Value Syntax
[ [<-time-> | <-percentage->]{1,2} ] | inherit
Initial Value
UA dependent
Percentages
see descriptions of pause-before and pause-after
Inherited
no
Applies to
all elements
Media Groups
aural
Values
<-time->
Any time value (e.g., 150ms); the pause will be the length of time specified.
<-percentage->
The length of the pause is dictated by the value of speech-rate. For a speech-rate of 60 words per
minute, which corresponds to one word per second, then a percentage is calculated with respect to one
second. For a speech-rate of 120 words per minute, which yields a time per word of 500
milliseconds, then percentage would be calculated with respect to 500 milliseconds.
Note If two values are specified, the first corresponds to pause-before, and the second
to pause-after. If only one value is given, it applies to both pause-before and
pause-after.
Examples
a:link, a:visited {pause: 25%;}
h1 {pause: 2s 250ms;}
Related Properties
cue-before, cue-after, pause-before, pause-after, speech-rate
Cascading Style Sheets 2.0
140
No comments:
Post a Comment