Proposed Specification 23 May 2011
Copyright © 2011 International Digital Publishing Forum™
All rights reserved. This work is protected under Title 17 of the United States Code. Reproduction and dissemination of this work with changes is prohibited except with the written permission of the International Digital Publishing Forum (IDPF).
EPUB is a registered trademark of the International Digital Publishing Forum.
Table of Contents
This module defines a pattern for tagging alternate style sheets using a microformat. It can be used to define standardized classes that can be hooked into the browser UI. Sample use cases include horizontal-vertical layout switches in Japanese Ebook readers; automatically selecting high-contrast styles; and other accessibility concerns.
HTML 4.0 defines the linking of external style sheets using the link element. Although typically a style sheet is linked in unconditionally, HTML 4 also defines alternate style sets, which are named, mutually-exclusive sets of style sheets that the reader can use to alter the display.
Until now, few HTML user agents have exposed alternate styles in a meaningful way. However, alternate styles are a very simple way to allow the user to alter a document's presentation to his or her preferences and accessibility needs.
This specification takes advantage of the class attribute of the HTML <link> tag (introduced in [HTML5], but supported in many UAs for much longer) to define style tags: a markup pattern for tagging style sheets with standardized class names. These class names can be used by a UA to offer special UI access to such tagged style sets.
The original impetus for this proposal was to offer standard controls for switching between horizontal and vertical layouts in Japanese ebook readers; this use case is addressed in Appendix B, Night Vision Style Set Tags.
None of this specification applies if the UA has unilaterally turned author style sheets off. (This ability is required by HTML and CSS.) In this case, of course, all style sheets are disabled.
The [CSSOM] has more low-level controls for controlling whether a given style sheet is enabled or disabled; scripting the CSSOM may alter the behavior defined here.
Future versions of this specification will define error handling rules and interaction with [CSSOM].
This section is informative
This is an informative summary of HTML's declarative alternate style set mechanism, with a few slight changes to terminology.
HTML 4 defines two types of style sheets in its linking mechanism: persistent style sheets and alternate style sheets.
A persistent style sheet is one that is always enabled, regardless of which alternate style set is enabled. A persistent style sheet is indicated by omitting the title attribute from the <link> or <style> element that imports it.
An alternate style sheet is one that is part of an alternate set, and may be enabled or disabled as part of that set. An alternate style sheet is indicated by setting a non-empty value for the title attribute of the <link> or <style> that imports it. Except for style sheets belonging to a preferred style set (see below), alternate style sheets must have an alternate value in the rel attribue value addition to the stylesheet value.
HTML allows the grouping of multiple alternate style sheets into a single, named alternate style set. All alternate style sheets with the same title value belong to the same style set.
The author can indicate whether an alternate style set is preferred by omitting the alternate value from the rel attribute of each of its component alternate style sheets. If no preferred style sets are defined, the default preferred style set is an unnamed set containing no alternate style sheets.
By default, the first preferred style set is loaded. The author can override this behavior with the Default-Style meta or HTTP header as defined in [HTML401].
A style sheet can be tagged by adding the tag's name to the class attribute of the <link> or <style> elements that imports it. Tagging a style sheet with a standard style tag (one defined by a specification referencing this specification) indicates that it implements the functionality described by the style tag's definition. Both alternate style sheets and persistent style sheets may be tagged in this way.
A style set can be tagged by tagging any one of its component style sheets. Tagging a style set indicates that it offers the functionality described by the style tag's definition.
Authors using standard tags should tag all alternate style sheets within a style set with the same set of standard tags.
Future versions of this specification may allow UAs to selectively disable tagged style sheets within a style set. Therefore all alternate style sheets that need to be enabled or disabled together must have the same set of standard tags.
If two style sheets within a style set are tagged with mutually exclusive tags, both tags are ignored.
A specification that defines style tags may indicate that a particular tag is assumed to be the default for untagged style sets.
The following style tags are defined by this appendix:
This style set provides a primarily horizontal presentation of text. This tag is mutually exclusive with vertical.
This style set provides a primarily vertical presentation of text. This tag is mutually exclusive with horizontal.
The UA may guess whether an untagged style set is horizontal or vertical, or may instead assign such a style set an indeterminate state.
Examples
The following examples use XHTML syntax; to use HTML syntax, simply drop the slash before the > in the tags.
In the following example, the author provides a style sheet for a primarily horizontal-text presentation of the document:
<link rel="stylesheet" href="horizontal.css" class="horizontal"/>
The UA, knowing that only a horizontal version is provided, would have to synthesize a vertical style if one is needed.
In the following example, the author provides a style sheet for a primarily vertical-text presentation of the document:
<link rel="stylesheet" href="vertical.css" class="vertical"/>
The UA, knowing that only a vertical version is provided, would have to synthesize a horizontal style if one is needed.
In the following example, the author provides style sheets for both horizontal-text and vertical-text presentations of the document:
<link rel="stylesheet" href="horizontal.css" class="horizontal" title="横組"/> <link rel="alternate stylesheet" href="vertical.css" class="vertical" title="縦組"/>
Since only the second style set is marked with the alternate value of the rel attribute, the author has indicated a preference for the horizontal style set which, in the absence of a user override, should be used by default.
In the following example, the author provides style sheets for both horizontal-text and vertical-text presentations of the document:
<link rel="alternate stylesheet" href="horizontal.css" class="horizontal" title="横組"/> <link rel="stylesheet" href="vertical.css" class="vertical" title="縦組"/>
Since only the first style set is marked with the alternate value of the rel attribute, the author has indicated a preference for the vertical style set which, in the absence of a user override, should be used by default.
In the following example, the author provides style sheets for both horizontal-text and vertical-text presentations of the document:
<link rel="stylesheet" href="horizontal.css" class="horizontal" title="横組"/> <link rel="stylesheet" href="vertical.css" class="vertical" title="縦組"/>
Since neither is marked with the alternate value of the rel attribute, both are preferred presentations by the author. Since the horizontal presentation is provided first, in the absence of a user preference to the contrary, it will be used by default.
The following style tags are defined by this appendix:
This style set provides a color scheme suited for daytime use (light background, dark text). This tag is mutually exclusive with night.
This style set provides a color scheme suited for nighttime use (dark background, light text). This tag is mutually exclusive with day.
Examples
In the following example, the author provides style sheets for both both day vision and night vision presentations of the document. Both horizontal-text and vertical-text presentations are available, but the horizontal presentation is preferred:
<link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Day" <link rel="alternate stylesheet" href="day.css" class="day" title="Vertical Day"/> <link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Night"/> <link rel="alternate stylesheet" href="night.css" class="night" title="Vertical Night"/> <link rel="stylesheet" href="horizontal.css" class="horizontal" title="Horizontal Day"/> <link rel="stylesheet" href="day.css" class="day" title="Horizontal Day"/> <link rel="stylesheet" href="horizontal.css" class="horizontal" title="Horizontal Night"/> <link rel="stylesheet" href="night.css" class="night" title="Horizontal Night"/>
Of the preferred style sets, the day vision variant is listed first, and so in the absence of other preferences will be loaded by default.
The same effect can be created with fewer link tags by using @import statements:
<link rel="alternate stylesheet" href="vertical-day.css" class="vertical day" title="Vertical Day"/> <link rel="alternate stylesheet" href="vertical-night.css" class="vertical night" title="Vertical Night"/> <link rel="stylesheet" href="horizontal-day.css" class="horizontal day" title="Horizontal Day"/> <link rel="stylesheet" href="horizontal-night.css" class="horizontal night" title="Horizontal Night"/>
where vertical-day.css is
@import "vertical.css"; @import "day.css";
and vertical-night.css is
@import "vertical.css"; @import "night.css";
and horizontal-day.css is
@import "horizontal.css"; @import "day.css";
and vertical-night.css is
@import "horizontal.css"; @import "night.css";
This draft resulted from discussion in the W3C CSS Working Group and the IDPF EPUB Working Group and would not exist without the particular suggestion of Anne van Kesteren.
[HTML401] HTML 4.01 Specification . 24 December 1999.
[CSSOM] CSSOM .