You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
15 KiB
437 lines
15 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<title>The CSS 'Reader' Media Type</title>
|
|
|
|
<link href="default.css" rel="stylesheet" type="text/css">
|
|
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet"
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class="head">
|
|
<p><a class="logo" href="http://www.w3.org/" rel="home"><img alt="W3C"
|
|
height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a>
|
|
|
|
<h1 id="the-css">The CSS 'Reader' Media Type</h1>
|
|
|
|
<h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 24 February 2004</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2004/WD-css3-reader-20040224">http://www.w3.org/TR/2004/WD-css3-reader-20040224</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-reader">http://www.w3.org/TR/css3-reader</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>none
|
|
|
|
<dt>Editors:
|
|
|
|
<dd>Bert Bos (W3C), <bert@w3.org>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a>
|
|
© 2004 <a href="http://www.w3.org/"><abbr title="World Wide Web
|
|
Consortium">W3C</abbr></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
|
|
Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>),
|
|
All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
|
|
<a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-software">software
|
|
licensing</a> rules apply.
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
|
|
|
|
<p><em>This is the first draft of the 'reader' media type. It is published to
|
|
get some early feedback, especially on whether 'reader' is necessary and
|
|
implementable.</em>
|
|
|
|
<p>'Reader' is a keyword for use in Media Queries <a href="#MEDIAQ"
|
|
rel="biblioentry">[MEDIAQ]</a>. When a Media Query that includes the 'reader'
|
|
keyword is attached to (a link to) a style sheet, it indicates that that
|
|
style sheet is designed to be used by a "reader" device (typically a screen
|
|
reader), that both displays and speaks a document at the same time. It may
|
|
also display the document and render it in braille at the same time, or do
|
|
all three.
|
|
|
|
<p>Media Queries (and thus 'reader') can be used in documents in HTML <a
|
|
href="#HTML401" rel="biblioentry">[HTML401]</a>, XML <a href="#XML10"
|
|
rel="biblioentry">[XML10]</a>, SVG <a href="#SVG10"
|
|
rel="biblioentry">[SVG10]</a>, CSS <a href="#CSS21"
|
|
rel="biblioentry">[CSS21]</a> and other formats, wherever they link to a
|
|
style sheet, and potentially also in links to other resources. (But the
|
|
latter is not treated in this specification.)
|
|
|
|
<h2 class="no-num no-toc" id="status">Status of this document</h2>
|
|
|
|
<p><em>This section describes the status of this document at the time of its
|
|
publication. Other documents may supersede it. A list of current W3C
|
|
publications and the latest revision of this technical report can be found in
|
|
the <a href="http://www.w3.org/TR/">W3C technical reports index at
|
|
http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>It is inappropriate to use W3C Working Drafts as reference material or to
|
|
cite them as other than "work in progress." Its publication does not imply
|
|
endorsement by the W3C membership. Implementations for the purpose of
|
|
experimenting with the specification are welcomed, as long as they are
|
|
clearly marked as experimental.
|
|
|
|
<p>This document is a working draft of the <a
|
|
href="http://www.w3.org/Style/CSS/members"> CSS Working Group</a> which is
|
|
part of the <a href="http://www.w3.org/Style/"> style activity</a> (see <a
|
|
href="http://www.w3.org/Style/Activity"> summary</a>).
|
|
|
|
<p><em>Comments</em> on and discussions of this draft can be sent to the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org"> www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request"> instructions</a>). W3C Members can
|
|
also send comments directly to the CSS working group.
|
|
|
|
<p>Patent disclosures relevant to CSS may be found on the Working Group's
|
|
public <a href="http://www.w3.org/Style/CSS/Disclosures"> patent disclosure
|
|
page.</a>
|
|
|
|
<p>This is the first draft in this series ("css3-reader").
|
|
|
|
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class="toc">
|
|
<li><a href="#dependencies"><span class="secno">1. </span>Dependencies on
|
|
other modules</a>
|
|
|
|
<li><a href="#intro"><span class="secno">2. </span>Introduction</a>
|
|
|
|
<li><a href="#reader"><span class="secno">3. </span>The 'reader' media
|
|
type</a>
|
|
|
|
<li><a href="#features"><span class="secno">4. </span>CSS features that apply
|
|
to 'reader'</a>
|
|
|
|
<li><a href="#test-suite"><span class="secno">5. </span>Test suite</a>
|
|
|
|
<li><a href="#profiles"><span class="secno">6. </span>Profiles</a>
|
|
|
|
<li><a href="#conformance"><span class="secno">7. </span>Conformance</a>
|
|
|
|
<li><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li><a href="#normative-references">Normative references</a>
|
|
|
|
<li><a href="#other-references">Other references</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id="dependencies"><span class="secno">1. </span>Dependencies on other
|
|
modules</h2>
|
|
|
|
<p>This CSS3 module depends on the following other CSS specifications:
|
|
|
|
<ul>
|
|
<li><cite>CSS 2.1</cite> <a href="#CSS21" rel="biblioentry">[CSS21]</a>
|
|
|
|
<li><cite>Media Queries</cite> <a href="#MEDIAQ"
|
|
rel="biblioentry">[MEDIAQ]</a>
|
|
</ul>
|
|
|
|
<h2 id="intro"><span class="secno">2. </span>Introduction</h2>
|
|
|
|
<p>HTML <a href="#HTML401" rel="biblioentry">[HTML401]</a>, XML <a
|
|
href="#XML10" rel="biblioentry">[XML10]</a>, SVG <a href="#SVG10"
|
|
rel="biblioentry">[SVG10]</a>, CSS <a href="#CSS21"
|
|
rel="biblioentry">[CSS21]</a> and other formats can link to one or more style
|
|
sheets that help in specifying the way a document is rendered for a human
|
|
reader. Media Queries <a href="#MEDIAQ" rel="biblioentry">[MEDIAQ]</a> can be
|
|
attached to those links to indicate for what type of device or media the
|
|
style sheet is designed, e.g., big screen with color, small monochrome
|
|
screen, printer, slide projector or speech synthesizer.
|
|
|
|
<div class="example">
|
|
<p>E.g., an HTML4 document can link to a style sheet for use on (computer)
|
|
screens and another for use on printers like this:
|
|
|
|
<pre>
|
|
<html>
|
|
<head>
|
|
<title>My HTML document</title>
|
|
<link rel="stylesheet" <strong>media="screen"</strong> href="my-screen-style.css">
|
|
<link rel="stylesheet" <strong>media="print"</strong> href="my-print-style.css">
|
|
</head>
|
|
<body>
|
|
...
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
<p>The following example CSS style sheet links to another style sheet for
|
|
printing and includes style rules that apply to a slide projection:
|
|
|
|
<pre>
|
|
@import "my-print-style.css" <strong>print</strong>;
|
|
|
|
@media <strong>projection</strong> {
|
|
h1 { page-break-before: always }
|
|
h2 { color: red }
|
|
...
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Media Queries contain a media type ('screen', 'print', 'projection',
|
|
'speech', etc.) optionally followed by further constraints ('min-width',
|
|
'max-width', 'color', etc.). 'Reader' is one such media type, applying to
|
|
devices like screen readers, that display a document visually and read it
|
|
with the help of a speech synthesizer at the same time.
|
|
|
|
<div class="example">
|
|
<p>The following is an XML document in some hypothetical format, that
|
|
includes the standard style sheet Processing Instruction (the "style PI") <a
|
|
href="#XMLSTYLE" rel="biblioentry">[XMLSTYLE]</a> to link to two style
|
|
sheets, one for rendering on color screens in a window that is less then 400
|
|
pixels wide and another for readers that have a monitor in portrait mode:
|
|
|
|
<pre>
|
|
<?xml-stylesheet href="style1.css" type="text/css"
|
|
<strong>media="screen and (color) and (max-width: 400px"</strong>?>
|
|
<?xml-stylesheet href="style2.css" type="text/css"
|
|
<strong>media="reader and (max-device-ratio: 1/1)</strong>"?>
|
|
<doc>
|
|
...
|
|
</doc>
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id="reader"><span class="secno">3. </span>The 'reader' media type</h2>
|
|
|
|
<p>The keyword 'reader' is a "media type" as defined by Media Queries <a
|
|
href="#MEDIAQ" rel="biblioentry">[MEDIAQ]</a>. It can be used in all places
|
|
where Media Queries can be used (including LINK elements in HTML, the style
|
|
PI in XML and @import/@media in CSS).
|
|
|
|
<p>'Reader' is exclusive with all other media types defined in Media Queries,
|
|
except with the keyword 'all'. That is, a user agent that applies style rules
|
|
marked as being for a 'reader' must not at the same time apply style rules
|
|
marked for some other media.
|
|
|
|
<p>However, a single user agent might operate in different "modes" at
|
|
different times or even at the same time in different windows (different
|
|
"canvasses"). A user agent can, e.g., provide a print preview (using style
|
|
rules for the 'print' media) and a simulation of a handheld device (using
|
|
style rules for 'handheld').
|
|
|
|
<p>This specification does not define which UAs must use which media type.
|
|
UAs (or the users using them) can select which media type best fits them and
|
|
the environment in which they run. The following are therefore only
|
|
informative guidelines:
|
|
|
|
<p>The 'reader' media type typically is used by a UA that:
|
|
|
|
<ul>
|
|
<li> is a "screen reader" (often designed as an accessibility aid);
|
|
|
|
<li> displays a document on screen and speaks what is on screen;
|
|
|
|
<li> either scrolls the screen automatically in sync with the speech; or
|
|
|
|
<li> waits for the user to scroll;
|
|
|
|
<li> allows the user to indicate the part to be spoken, by pointing or by
|
|
using fast-forward/fast-reverse or similar functions;
|
|
|
|
<li> instead of or in addition to speaking, it may also render the displayed
|
|
text on a dynamic braille device.
|
|
</ul>
|
|
|
|
<p class="issue">Do we need a pseudo-class for the element currently being
|
|
spoken? (Karaoke!)
|
|
|
|
<h2 id="features"><span class="secno">4. </span>CSS features that apply to
|
|
'reader'</h2>
|
|
|
|
<p>The CSS features that apply to the 'reader' media type are all properties
|
|
and other features that apply to the following media groups. See <a
|
|
href="http://www.w3.org/TR/CSS21/media.html#media-groups">section 7.3.1
|
|
"Media Groups"</a> of CSS 2.1 <a href="#CSS21"
|
|
rel="biblioentry">[CSS21]</a> for definitions of these groups. <span
|
|
class="issue">[No section to point to in CSS3 yet?]</span>
|
|
|
|
<table class="equiv-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>
|
|
|
|
<th>continuous / paged?
|
|
|
|
<th>visual / audio / speech / tactile?
|
|
|
|
<th>grid / bitmap?
|
|
|
|
<th>interactive / static?
|
|
|
|
<tr>
|
|
<th>reader
|
|
|
|
<td>continuous
|
|
|
|
<td>all
|
|
|
|
<td>both
|
|
|
|
<td>interactive
|
|
</table>
|
|
|
|
<p>All property definitions in CSS3 modules include a line that specifies to
|
|
which of these media groups the property applies.
|
|
|
|
<p class="note">Note that 'reader' can be used both with bitmapped and with
|
|
grid-based screens. To distinguish between the two types, a designer can use
|
|
the 'grid' media feature as defined by Media Queries <a href="#MEDIAQ"
|
|
rel="biblioentry">[MEDIAQ]</a>.
|
|
|
|
<div class="example">
|
|
<p>E.g., a style sheet might be written as follows:
|
|
|
|
<pre>
|
|
@media reader and (grid: 0) {
|
|
/* styles for bitmapped displays */
|
|
...
|
|
}
|
|
@media reader and (grid: 1) {
|
|
/* Styles for grid-based displays */
|
|
...
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p class="issue">Can it be "static" as well? A reader that just starts
|
|
reading at the top and continues until the end of the document, scrolling the
|
|
display as needed, without user interaction? Maybe not important.
|
|
|
|
<h2 id="test-suite"><span class="secno">5. </span>Test suite</h2>
|
|
|
|
<p class="issue">[TBD]
|
|
|
|
<h2 id="profiles"><span class="secno">6. </span>Profiles</h2>
|
|
|
|
<p class="issue">[TBD]
|
|
|
|
<h2 id="conformance"><span class="secno">7. </span>Conformance</h2>
|
|
|
|
<p class="issue">[TBD]
|
|
|
|
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
|
|
|
|
<p>Joe Clark (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2003Oct/0328.html">see
|
|
message on www-style</a> and <a href="#FIR" rel="biblioentry">[FIR]</a>)
|
|
|
|
<h2 class="no-num" id="normative-references">Normative references</h2>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="CSS21">[CSS21]
|
|
|
|
<dd>Bert Bos; Tantek Çelik; Ian Hickson; Håkon Wium Lie. <cite>Cascading
|
|
Style Sheets, level 2 revision 1.</cite> 15 September 2003. W3C Working
|
|
Draft. (Work in progress) URL: <a
|
|
href="http://www.w3.org/TR/2003/WD-CSS21-20030915">http://www.w3.org/TR/2003/WD-CSS21-20030915</a>
|
|
<!---->
|
|
|
|
<dt id="MEDIAQ">[MEDIAQ]
|
|
|
|
<dd>Håkon Wium Lie; Tantek Çelik; Daniel Glazman. <cite>Media queries.</cite>
|
|
8 July 2002. W3C Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708">http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708</a>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h2 class="no-num" id="other-references">Other references</h2>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="FIR">[FIR]
|
|
|
|
<dd>Joe Clark. "Facts and Opinion About Fahrner Image Replacement" in:
|
|
<cite>A List Apart.</cite> Issue No. 160. 20 October 2003. URL: <a
|
|
href="http://www.alistapart.com/articles/fir/">http://www.alistapart.com/articles/fir/</a>
|
|
<!---->
|
|
|
|
<dt id="HTML401">[HTML401]
|
|
|
|
<dd>Raggett, D.; Le Hors, A.; Jacobs, I.. <cite>HTML 4.01
|
|
Specification.</cite> Dec 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
<!---->
|
|
|
|
<dt id="SVG10">[SVG10]
|
|
|
|
<dd>Various. <cite>Scalable Vector Graphics (SVG) 1.0 Specification.</cite>
|
|
Sep 2001. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a>
|
|
<!---->
|
|
|
|
<dt id="XML10">[XML10]
|
|
|
|
<dd>Tim Bray; Jean Paoli; C. M. Sperberg-McQueen; Eve Maler. <cite>Extensible
|
|
Markup Language (XML) 1.0 (Second Edition).</cite> Oct 2000. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2000/REC-xml-20001006">http://www.w3.org/TR/2000/REC-xml-20001006</a>
|
|
<!---->
|
|
|
|
<dt id="XMLSTYLE">[XMLSTYLE]
|
|
|
|
<dd>J. Clark. <cite>Associating Style Sheets with XML documents.</cite> 29
|
|
June 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/xml-stylesheet">http://www.w3.org/TR/xml-stylesheet</a>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
sgml-omittag:nil
|
|
sgml-shorttag:nil
|
|
sgml-namecase-general:t
|
|
sgml-general-insert-case:lower
|
|
sgml-always-quote-attributes:t
|
|
sgml-indent-step:nil
|
|
sgml-indent-data:t
|
|
sgml-parent-document:nil
|
|
sgml-exposed-tags:nil
|
|
sgml-local-catalogs:nil
|
|
sgml-local-ecat-files:nil
|
|
End:
|
|
-->
|