4. Stylesheets

Support for DSSSL is progressing, but spare time is at an all-time low. If anyone would like to help, please contact the author.

The following sections closely parallel the CSS1 specification so it should be very easy to look up what Emacs/W3 supports when browsing through the CSS1 specification. Please note that a lot of the text in the following sections comes directly from the specification as well.

4.1 Terminology

attribute

HTML attribute, ie: `align=center' -- align is the attribute.

author

The author of an HTML document.

block-level element

An element which has a line break before and after (e.g. 'H1' in HTML).

canvas

The part of the UA's drawing surface onto which documents are rendered.

child element

A subelement in SGML terminology.

contextual selector

A selector that matches elements based on their position in the document structure. A contextual selector consists of several simple selectors. E.g., the contextual selector 'H1.initial B' consists of two simple selectors, 'H1.initial' and 'B'.

CSS

Cascading Style Sheets.

declaration

A property (e.g. 'font-size') and a corresponding value (e.g. '12pt').

designer

The designer of a style sheet.

document

HTML document.

element

HTML element.

element type

A generic identifier in SGML terminology.

fictional tag sequence

A tool for describing the behavior of pseudo-classes and pseudo-elements.

font size

The size for which a font is designed. Typically, the size of a font is approximately equal to the distance from the bottom of the lowest letter with a descender to the top of the tallest letter with an ascender and (optionally) with a diacritical mark.

HTML extension

Markup introduced by UA vendors, most often to support certain visual effects. The FONT, CENTER and BLINK elements are examples of HTML extensions, as is the BGCOLOR attribute. One of the goals of CSS is to provide an alternative to HTML extensions.

inline element

An element which does not have a line break before and after (e.g. 'STRONG' in HTML)

intrinsic dimensions

The width and height as defined by the element itself, not imposed by the surroundings. In this specification it is assumed that all replaced elements -- and only replaced elements -- come with intrinsic dimensions.

parent element

The containing element in SGML terminology.

pseudo-element

Pseudo-elements are used in CSS selectors to address typographical items (e.g. the first line of an element) rather than structural elements.

pseudo-class

Pseudo-classes are used in CSS selectors to allow information external to the HTML source (e.g. the fact that an anchor has been visited or not) to classify elements.

property

A stylistic parameter that can be influenced through CSS.

reader

The person for whom the document is rendered.

replaced element

An element that the CSS formatter only knows the intrinsic dimensions of. In HTML, IMG, INPUT, TEXTAREA, SELECT and OBJECT elements can be examples of replaced elements. E.g., the content of the IMG element is often replaced by the image that the SRC attribute points to. CSS1 does not define how the intrinsic dimensions are found.

rule

A declaration (e.g. 'font-family: helvetica') and its selector (e.g. 'H1').

selector

A string that identifies what elements the corresponding rule applies to. A selector can either be a simple selector (e.g. 'H1') or a contextual selector (e.g. 'H1 B') which consists of several simple selectors.

SGML

Standard Generalized Markup Language, of which HTML is an application.

simple selector

A selector that matches elements based on the element type and/or attributes, and not the element's position in the document structure. E.g., 'H1.initial' is a simple selector.

style sheet

A collection of rules.

UA

User Agent, often a web browser or web client.

user

Synonymous with reader.

weight

The priority of a rule.

4.2 Basic Concepts

Designing simple style sheets is easy. One needs only to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say:

  H1 { color: blue }

The example above is a simple CSS rule. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.

The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors.

4.3 Pseudo-Classes/Elements

In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn't cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process.

Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are "inserted" by the UA under certain conditions to be used for addressing in style sheets. They are referred to as "classes" and "elements" since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence.

Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.

The only support pseudo-classes in Emacs/W3 are on the anchor tag (<a>...</a>).

User agents commonly display newly visited anchors differently from older ones. In CSS1, this is handled through pseudo-classes on the 'A' element:

  A:link { color: red }       /* unvisited link */
  A:visited { color: blue }   /* visited links */
  A:active { color: lime }    /* active links */

All 'A' elements with an 'HREF' attribute will be put into one and only one of these groups (i.e. target anchors are not affected). UAs may choose to move an element from 'visited' to 'link' after a certain time. An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.

The formatting of an anchor pseudo-class is as if the class had been inserted manually. A UA is not required to reformat a currently displayed document due to anchor pseudo-class transitions. E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger that a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.

Pseudo-class selectors do not match normal classes, and vice versa. The style rule in the example below will therefore not have any influence:

  A:link { color: red }

  <A CLASS=link NAME=target5> ... </A>

In CSS1, anchor pseudo-classes have no effect on elements other than 'A'. Therefore, the element type can be omitted from the selector:

  A:link { color: red }
  :link { color: red }

The two selectors above will select the same elements in CSS1.

Pseudo-class names are case-insensitive.

Pseudo-classes can be used in contextual selectors:

  A:link IMG { border: solid blue }

Also, pseudo-classes can be combined with normal classes:

  A.external:visited { color: blue }

  <A CLASS=external HREF="http://out.side/">external link</A>

If the link in the above example has been visited, it will be rendered in blue. Note that normal class names precede pseudo-classes in the selector.

4.4 The Cascade

In CSS, more than one style sheet can influence the presentation simultaneously. There are two main reasons for this feature: modularity and author/reader balance.

modularity

A style sheet designer can combine several (partial) style sheets to reduce redundancy:

@import url(http://www.style.org/pastoral); @import url(http://www.style.org/marine); H1 { color: red } /* override imported sheets */

author/reader balance

Both readers and authors can influence the presentation through style sheets. To do so, they use the same style sheet language thus reflecting a fundamental feature of the web: everyone can become a publisher. The UA is free to choose the mechanism for referencing personal style sheets.

Sometimes conflicts will arise between the style sheets that influence the presentation. Conflict resolution is based on each style rule having a weight. By default, the weights of the reader's rules are less than the weights of rules in the author's documents. I.e., if there are conflicts between the style sheets of an incoming document and the reader's personal sheets, the author's rules will be used. Both reader and author rules override the UA's default values.

The imported style sheets also cascade with each other, in the order they are imported, according to the cascading rules defined below. Any rules specified in the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the cascading order than rules in the style sheet itself. Imported style sheets can themselves import and override other style sheets, recursively.

In CSS1, all '@import' statements must occur at the start of a style sheet, before any declarations. This makes it easy to see that rules in the style sheet itself override rules in the imported style sheets.

NOTE: The use of !important in CSS stylesheets is unsupported at this time.

Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm must be followed:

1. Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used. If there is no inherited value (this is the case for the 'HTML' element and for properties that do not inherit), the initial value is used.
2. Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.
3. Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values. An imported style sheet has the same origin as the style sheet from which it is imported.
4. Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity. Some examples:

   LI {...} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */ LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ #x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */

   Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
5. Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.

This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the reader has the ability to turn off the influence of a certain style sheet, e.g. through a pull-down menu.

A declaration in the 'STYLE' attribute of an element has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

In the above example, the color of the 'P' element would be red. Although the specificity is the same for both declarations, the declaration in the 'STYLE' attribute will override the one in the 'STYLE' element because of cascading rule number 5.

The UA may choose to honor other stylistic HTML attributes, for example 'ALIGN'. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 1. The rules are assumed to be at the start of the author style sheet and may be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

4.5 Properties

In the text below, the allowed values for each property are listed with a syntax like the following:

      Value: N | NW | NE
      Value: [ <length> | thick | thin ]{1,4}
      Value: <uri>? <color> [ / <color> ]?
      Value: <uri> || <color>

The words between < and > give a type of value. The most common types are <length>, <percentage>, <url>, <number>and <color> these are described in the section on [[units]]. The more specialized types (e.g. <font-family>and <border-style>) are described under the property where they appear.

Other words are keywords that must appear literally, without quotes. The slash (/) and the comma (,) must also appear literally.

Several things juxtaposed mean that all of them must occur, in the given order. A bar (|) separates alternatives: one of them must occur. A double bar (A || B) means that either A or B or both must occur, in any order. Brackets ([]) are for grouping. Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar. Thus "a b | c || d e" is equivalent to "[ a b ] | [ c || [ d e ]]".

Every type, keyword, or bracketed group may be followed by one of the following modifiers:

• An asterisk (*) indicates that the preceding type, word or group is repeated zero or more times.
• A plus (+) indicates that the preceding type, word or group is repeated one or more times.
• A question mark (?) indicates that the preceding type, word or group is optional.
• A pair of numbers in curly braces ({A,B}) indicates that the preceding type, word or group is repeated at least A and at most B times.

Other than the value the following information is also shown.

4.5.1 Font Properties

Setting font properties will be among the most common uses of style sheets. Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts, and terms that apply to one font family may not be appropriate for others. E.g. 'italic' is commonly used to label slanted text, but slanted text may also be labeled as being Oblique, Slanted, Incline, Cursive or Kursiv. Therefore it is not a simple problem to map typical font selection properties to a specific font.

The properties defined by CSS1 are described in the following sections.

4.5.1.1 font-family

  BODY { font-family: gill, helvetica, sans-serif }

There are two types of list values:

<family-name>

The name of a font family of choice. In the last example, "gill" and "helvetica" are font families.

<generic-family>

In the example above, the last value is a generic family name. The following generic families are defined:

• 'serif' (e.g. Times)
• 'sans-serif' (e.g. Helvetica)
• 'cursive' (e.g. Zapf-Chancery)
• 'fantasy' (e.g. Western)
• 'monospace' (e.g. Courier)

Style sheet designers are encouraged to offer a generic font family as a last alternative.

Font names containing whitespace should be quoted:

  BODY { font-family: "new century schoolbook", serif }
  
  <BODY STYLE="font-family: 'My own font', fantasy">

If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

4.5.1.2 font-style

The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.

A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.

The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.

  H1, H2, H3 { font-style: italic }
  H1 EM { font-style: normal }

In the example above, emphasized text within 'H1' will appear in a normal face.

4.5.1.3 font-variant

Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.

The following example results in an 'H3' element in small-caps, with emphasized words in oblique small-caps:

  H3 { font-variant: small-caps }
  EM { font-style: oblique }

There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS1 has no properties that select those.

4.5.1.4 font-weight

The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

  P { font-weight: normal }   /* 400 */
  H1 { font-weight: 700 }     /* bold */

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:

  STRONG { font-weight: bolder }

There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, others may have eight different face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.

4.5.1.5 font-size

<absolute-size>

An <absolute-size> keyword is an index to a table of font sizes computed and kept by the UA. Possible values are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

On a computer screen a scaling factor of 1.5 is suggested between adjacent indexes; if the 'medium' font is 10pt, the 'large' font could be 15pt. Different media may need different scaling factors. Also, the UA should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.

<relative-size>

A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are larger or smaller. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the UA is free to interpolate between table entries or round off to the closest one. The UA may have to extrapolate table values if the numerical value goes beyond the keywords.

Length and percentage values should not take the font size table into account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, 'em' and 'ex' length values refer to the font size of the current element. On the 'font-size' property, these length units refer to the font size of the parent element.

Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.

Examples:

  P { font-size: 12pt; }
  BLOCKQUOTE { font-size: larger }
  EM { font-size: 150% }
  EM { font-size: 1.5em }

If the suggested scaling factor of 1.5 is used, the last three declarations are identical.

4.5.1.6 font

For a definition of allowed and initial values, see the previously defined properties. Properties for which no values are given are set to their initial value.

  P { font: 12pt/14pt sans-serif }
  P { font: 80% sans-serif }
  P { font: x-large/110% "new century schoolbook", serif }
  P { font: bold italic large Palatino, serif }
  P { font: normal small-caps 120%/120% fantasy }

In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.

In the first three rules above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal'). The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.

4.5.2 Colors and Backgrounds

These properties describe the color (often called foreground color) and background of an element (i.e. the surface onto which the content is rendered). One can set a background color and/or a background image. The position of the image, if/how it is repeated, and whether it is fixed or scrolled relative to the canvas can also be set.

The 'color' property inherits normally. The background properties do not inherit, but the parent element's background will shine through by default because of the initial 'transparent' value on 'background-color'.

NOTE: Currently, Emacs/W3 can only show background images under XEmacs. Emacs 19 doesn't have the support in its display code yet.

4.5.2.1 color

This property describes the text color of an element (often referred to as the foreground color). There are different ways to specify red:

  EM { color: red }              /* natural language */
  EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

See 4.6.3 color Units for a description of possible color values.

4.5.2.2 background-color

This property sets the background color of an element.

  H1 { background-color: #F00 }

4.5.2.3 background-image

This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.

  BODY { background-image: url(marble.png) }
  P { background-image: none }

4.5.2.4 background-repeat

This property is not supported at all under Emacs/W3.

4.5.2.5 background-attachment

This property is not supported at all under Emacs/W3.

4.5.2.6 background-position

This property is not supported at all under Emacs/W3.

4.5.2.7 background

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

Possible values on the 'background' properties are the set of all possible values on the individual properties.

  BODY { background: red }
  P { background: url(chess.png) gray 50% repeat fixed }

The 'background' property always sets all the individual background properties. In the first rule of the above example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

4.5.3 Text Properties

4.5.3.1 word-spacing

The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).

  H1 { word-spacing: 0.4em }

Here, the word-spacing between each word in 'H1' elements would be increased by '1em'.

NOTE: Emacs/W3 cannot currently support this, due to limitations in Emacs. It may be implemented in the future.

4.5.3.2 letter-spacing

The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).

  BLOCKQUOTE { letter-spacing: 0.1em }

Here, the letter-spacing between each character in 'BLOCKQUOTE' elements would be increased by '0.1em'.

NOTE: Emacs/W3 cannot currently support this, due to limitations in Emacs. It may be implemented in the future.

4.5.3.3 text-decoration

This property describes decorations that are added to the text of an element. If the element has no text (e.g. the 'IMG' element in HTML) or is an empty element (e.g. '<EM></EM>'), this property has no effect. A value of 'blink' causes the text to blink.

The color(s) required for the text decoration should be derived from the 'color' property value.

This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.

  A:link, A:visited, A:active { text-decoration: underline }

The example above would underline the text of all links (i.e., all 'A' elements with a 'HREF' attribute).

NOTE: The 'line-through' property is only supported under XEmacs currently. A patch has been sent to the Emacs maintainers to add support for this, but it has not made it into the main distribution yet.

4.5.3.4 vertical-align

This is currently unsupported in Emacs/W3.

4.5.3.5 text-transform

'capitalize'

Uppercases the first character of each word.

'uppercase'

Uppercases all letters of the element.

'lowercase'

Lowercases all letters of the element.

'none'

Neutralizes inherited value.

The actual transformation in each case is human language dependent.

  H1 { text-transform: uppercase }

The example above would put 'H1' elements in uppercase text.

NOTE: This capability was in the previous version of Emacs/W3, but has not been reimplemented in the new display code yet. Please feel free to send me patches.

4.5.3.6 text-align

This property describes how text is aligned within the element. The actual justification algorithm used is UA and human language dependent.

Example:

  DIV.center { text-align: center }

Since 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered. Note that alignments are relative to the width of the element, not the canvas.

4.5.3.7 text-indent

Not currently implemented in Emacs/W3.

4.5.3.8 line-height

Not currently implemented in Emacs/W3.

4.5.4 Box Properties

4.5.5 Classification

These properties classify elements into categories more than they set specific visual parameters.

The list-style properties describe how list items (i.e. elements with a 'display' value of 'list-item') are formatted. The list-style properties can be set on any element, and it will inherit normally down the tree. However, they will only be have effect on elements with a 'display' value of 'list-item'. In HTML this is typically the case for the 'LI' element.

4.5.5.1 display

This property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.).

An element with a 'display' value of 'block' opens whitespace suitable for a paragraph break. Typically, elements like 'H1' and 'P' are of type 'block'. A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, 'LI' will typically have this value.

An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content.

A value of 'none' turns off the display of the element, including children elements and the surrounding box.

  P { display: block }
  EM { display: inline }
  LI { display: list-item }
  IMG { display: none }

The last rule turns off the display of images.

A value of 'line' results in a single line break. Emacs/W3 needs this extension to be able to fully specify the behaviour of BR and HR elements within a stylesheet.

NOTE: Emacs/W3 defaults to using 'inline' for this property, which is a slight deviation from the specification.

4.5.5.2 white-space

This property declares how whitespace inside the element is handled: the 'normal' way (where whitespace is collapsed), as 'pre' (which behaves like the 'PRE' element in HTML) or as 'nowrap' (where wrapping is done only through BR elements):

  PRE { white-space: pre }
  P   { white-space: normal }

4.5.5.3 list-style-type

This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.

Fo example:

  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style-type: lower-alpha }   /* a b c d e etc. */
  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

4.5.5.4 list-style-image

This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.

NOTE: This is currently unimplemented in Emacs/W3.

  UL { list-style-image: url(http://png.com/ellipse.png) }

4.5.5.5 list-style-position

The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content. For a formatting example see section 4.1.3.

4.5.5.6 list-style

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.

  UL { list-style: upper-roman inside }
  UL UL { list-style: circle outside }
  LI.square { list-style: square }

Setting 'list-style' directly on 'LI' elements can have unexpected results. Consider:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all 'LI' elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:

  OL.alpha  { list-style: lower-alpha }
  UL        { list-style: disc }

In the above example, inheritance will transfer the 'list-style' values from 'OL' and 'UL' elements to 'LI' elements.

A URL value can be combined with any other value:

  UL { list-style: url(http://png.com/ellipse.png) disc }

In the example above, the 'disc' will be used when the image is unavailable.

4.5.6 Media Selection

To specify that a stylesheet declaration should only apply when using a certain media type (ie: different font families preferred when printing versus on-screen presentation), the declarations should be wrapped in the proposed @media directive.

The @media directive takes two arguments, the media type, and a block of style declarations.

  @media print { 
    BODY { font-size: 10pt }
    H1 { font-size: 14pt }
  }

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }

Currently, the following media types are defined.

Print

Output for paged opaque material, and for documents viewed on screen in print preview mode.

Screen

A continuous presentation for computer screens.

Projector

Paged presentation for projected presentations.

Braille

For braille tactile feedback devices.

Speech

Aural presentation.

Light

The stylesheet will only be applied if the user is using a light background.

Dark

The stylesheet will only be applied if the user is using a dark background.

Emacs

The stylesheet will only be applied if the user is running in Emacs 19.

XEmacs

The stylesheet will only be applied if the user is running in XEmacs 19.

All

The default value, the style sheet applies to all output devices.

4.5.7 Speech Properties

Those of us who are sighted are accustomed to visual presentation of HTML documents, frequently on a bitmapped display. This is not the only possible presentation method, however. Aural presentation, using a combination of speech synthesis and 'audio icons', provides an alternative presentation. This form of presentation is in current use by the blind and print-impaired communities.

Often such aural presentation occurs by converting the document to plain text and feeding this to a 'screen reader' -- software or hardware that simply reads all the characters on the screen. This results in less effective presentation than would be the case if the document structure were retained.

There are other large markets for aural presentation, including in-car and home entertainment use; aurual or mixed aural/visual presentation is thus likely to increase in importance over the next few years. Realizing that that the aural rendering is essentially independent of the visual rendering:

• Allows orthogonal aural and visual views.
• Allows browsers to optionally implement both aural and visual views to produce truly multimodal documents.

4.5.7.1 volume

The legal range of percentage values is 0% to 100%. There is a fixed mapping between keyword values and percentages:

• 'x-soft' = '0%'
• 'soft' = '25%'
• 'medium' = '50%'
• 'loud' = '75%'
• 'x-loud' = '100%'

Volume refers to the median volume of the waveform. In other words, a highly inflected voice at a volume of 50 might peak well above that. Note that '0%' does not mean the same as "mute". 0% represents the minimum audible volume level and 100% corresponds to the maximum comfortable level. The UA should allow the values corresponding to 0% and 100% to be set by the user. Suitable values depend on the equipment in use (speakers, headphones), the environment (in car, home theater, library) and personal preferences. Some examples:

• A browser for in-car use has a setting for when there is lots of background noise . 0% would map to a fairly high level and 100% to a quite high level. The overall values are likely to be human adjustable for comfort, for example with a physical volume control: what this proposal does is adjust the dynamic range.
• Another speech browser is being used in the home, late at night, (don't annoy the neighbors) or in a shared study room. 0% is set to very quiet and 100% to a fairly quiet level, too. As with the first example, there is a low slope; the dynamic range is reduced. The actual volumes are low here, wheras they were high in the first example.
• In a quiet and isolated house, an expensive hifi home theatre setup. 0% is set fairly low and 100% to quite high; there is wide dynamic range.

The same authors stylesheet could be used in all cases, simply by mapping the 0 and 100 points suitably at the client side.

4.5.7.2 pause-before

This property specifies the pause before elements. It may be given in an absolute units (seconds, milliseconds) or as a relative value in which case it is relative to the reciprocal of the 'speed' property: if speed is 120 words per minute (ie a word takes half a second -- 500 milliseconds) then a pause-before of 100% means a pause of 500 ms and a pause-before of 20% means 100ms.

Using relative units gives more robust stylesheets in the face of large changes in speed.

4.5.7.3 pause-after

This property specifies the pause after elements. Values are specified the same way as 'pause-before'.

4.5.7.4 pause

The 'pause' property is a shorthand for setting 'pause-before' and 'pause-after'. The first value is pause-before and the second is pause-after. If only one value is given, it applies to both properties.

Examples:

  H1 { pause: 20ms }       /* pause-before: 20ms; pause-after: 20ms */
  H2 { pause: 30ms 40ms }  /* pause-before: 30ms; pause-after: 40ms */
  H3 { pause-after: 10ms } /* pause-before: ?;    pause-after: 10ms */

4.5.7.5 cue-before

Examples:

  A  { cue-before: url(bell.aiff); cue-after: url(dong.wav) }
  H1 { cue-before: url(pop.au); cue-after: url(pop.au) }
  H1 { cue: url(pop.au) }  /* same as previous */

4.5.7.6 cue-after

See section 4.5.7.5 cue-before.

4.5.7.7 cue

See section 4.5.7.5 cue-before.

4.5.7.8 cue-during

Examples:

  BLOCKQUOTE.sad { cue-during: url(violins.aiff) }

4.5.7.9 speed

Specifies the speaking rate. Note that both absolute and relative keyword values are allowed (compare with 4.5.1.4 font-weight).

4.5.7.10 voice-family

The value is a prioritized list of voice family names. Generic families are male, female, and child.

Examples of specific voice families are: comedian, paul, lisa

Examples

  H1 { voice-family: announcer, male }
  P.part.romeo { voice-family: romeo, male }
  P.part.juliet { voice-family: juliet, female }

4.5.7.11 pitch

4.5.7.12 pitch-range

4.5.7.13 stress

Specifies the level of stress (assertiveness or emphasis) of the speaking voice. English is a stressed language, and different parts of a sentence are assigned primary, secondary or tertiary stress. The value of property 'stress' controls the amount of inflection that results from these stress markers.

Increasing the value of this property results in the speech being more strongly inflected. It is in a sense dual to property 'pitch-range' and is provided to allow developers to exploit higher-end auditory displays.

4.5.7.14 richness

Specifies the richness (brightness) of the speaking voice. Different speech devices may require the setting of one or more device-specific parameters to achieve this effect.

The effect of increasing richness is to produce a voice that carries -- reducing richness produces a soft, mellifluous voice.

4.5.7.15 speak-punctuation

'code' indicates that punctuation such as semicolons, braces, and so on are to be spoken literally. The default value of 'none' means that punctuation is not spoken but instead is rendered naturally as various pauses.

4.5.7.16 speak-date

This is a hint that the element contains a date and also how that date should be spoken. month-day-year is common in the USA, while day-month-year is common in Europe and year-month-day is also used.

This should really be an HTML tag not a stylesheet property, since it gives semantic information about the content.

4.5.7.17 speak-numeral

4.5.7.18 speak-time

4.6 Units

4.6.1 Length Units

4.6.2 Percentage Units

4.6.3 color Units

4.6.4 URLs

4.6.5 Angle Units

These are the legal angle units:

• deg: degrees
• grad
• rad: radians

4.6.6 Time Units

These are the legal time units:

• ms: milliseconds
• s: seconds

This document was generated by XEmacs shared group account on December, 19 2009 using texi2html 1.65.