Browse files

[cit] (2) <ruby> support. This isn't very compatible with IE, but it …

…seems to be relatively compatible with the Web's usage of ruby.

git-svn-id: http://svn.whatwg.org/webapps@1704 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 5f5b5ee commit f4efc73617bb37e721828ba03fe3da1642ce40c9 @Hixie Hixie committed May 26, 2008
Showing with 366 additions and 12 deletions.
  1. +207 −9 index
  2. +159 −3 source
View
216 index
@@ -25,7 +25,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 25 May
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 26 May
2008</h2>
<p>You can take part in this work. <a
@@ -600,10 +600,19 @@
<li><a href="#the-bdo"><span class=secno>3.10.21 </span>The
<code>bdo</code> element</a>
- <li><a href="#usage"><span class=secno>3.10.22 </span>Usage
+ <li><a href="#the-ruby"><span class=secno>3.10.22 </span>The
+ <code>ruby</code> element</a>
+
+ <li><a href="#the-rt"><span class=secno>3.10.23 </span>The
+ <code>rt</code> element</a>
+
+ <li><a href="#the-rp"><span class=secno>3.10.24 </span>The
+ <code>rp</code> element</a>
+
+ <li><a href="#usage"><span class=secno>3.10.25 </span>Usage
summary</a>
- <li><a href="#footnotes"><span class=secno>3.10.23
+ <li><a href="#footnotes"><span class=secno>3.10.26
</span>Footnotes</a>
</ul>
@@ -10794,7 +10803,6 @@ first matching case):&lt;/p&gt;
<h3 id=text-level><span class=secno>3.10 </span>Text-level semantics</h3>
<!-- XXX ew, find a better section name -->
- <!-- XXX ruby (delayed until someone can define it with error handling rules) -->
<h4 id=the-a><span class=secno>3.10.1 </span>The <dfn
id=a><code>a</code></dfn> element</h4>
@@ -12995,14 +13003,171 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
<a href="#refsCSS21">[CSS21]</a></p>
<!-- XXX need examples -->
- <h4 id=usage><span class=secno>3.10.22 </span>Usage summary</h4>
+ <h4 id=the-ruby><span class=secno>3.10.22 </span>The <dfn
+ id=ruby><code>ruby</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Categories
+
+ <dd><a href="#phrasing0">Phrasing content</a>.
+
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#phrasing0">phrasing content</a> is expected.
+
+ <dt>Content model:
+
+ <dd>One or more groups of: <a href="#phrasing0">phrasing content</a>
+ followed either by a single <code><a href="#rt">rt</a></code> element, or
+ an <code><a href="#rp">rp</a></code> element, an <code><a
+ href="#rt">rt</a></code> element, and another <code><a
+ href="#rp">rp</a></code> element.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#ruby">ruby</a></code> element allows one or more
+ spans of phrasing content to be marked with ruby annotations.
+
+ <p>A <code><a href="#ruby">ruby</a></code> element represents the spans of
+ phrasing content it contains, ignoring all the child <code><a
+ href="#rt">rt</a></code> and <code><a href="#rp">rp</a></code> elements
+ and their descendants. Those spans of phrasing content have associated
+ annotations created using the <code><a href="#rt">rt</a></code> element.
+
+ <div class=example>
+ <p>In this example, each ideograph in the text <span
+ lang=ja>&#x658e;&#x85e4;&#x4fe1;&#x7537;</span> is annotated with its
+ reading.</p>
+
+ <pre lang=ja>... &lt;ruby>
+ &#x658e; &lt;rt> &#x3055;&#x3044; &lt;/rt>
+ &#x85e4; &lt;rt> &#x3068;&#x3046; &lt;/rt>
+ &#x4fe1; &lt;rt> &#x306e;&#x3076; &lt;/rt>
+ &#x7537; &lt;rt> &#x304a; &lt;/rt>
+&lt;/ruby> ...</pre>
+
+ <p>This might be rendered as:</p>
+
+ <p><img alt="The four main ideographs, each with its reading annotation
+ rendered in a smaller font above it." src="images/sample-ruby.png"></p>
+ </div>
+
+ <h4 id=the-rt><span class=secno>3.10.23 </span>The <dfn
+ id=rt><code>rt</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Categories
+
+ <dd>None.
+
+ <dt>Contexts in which this element may be used:
+
+ <dd>As a child of a <code><a href="#ruby">ruby</a></code> element.
+
+ <dt>Content model:
+
+ <dd><a href="#phrasing0">Phrasing content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#rt">rt</a></code> element marks the ruby text
+ component of a ruby annotation.
+
+ <p>An <code><a href="#rt">rt</a></code> element that is a child of a
+ <code><a href="#ruby">ruby</a></code> element represents an annotation
+ (given by its children) for the zero or more nodes of phrasing content
+ that immediately precedes it in the <code><a href="#ruby">ruby</a></code>
+ element, ignoring <code><a href="#rp">rp</a></code> elements.
+
+ <p>An <code><a href="#rt">rt</a></code> element that is not a child of a
+ <code><a href="#ruby">ruby</a></code> element represents the same thing as
+ its children.
+
+ <h4 id=the-rp><span class=secno>3.10.24 </span>The <dfn
+ id=rp><code>rp</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Categories
+
+ <dd>None.
+
+ <dt>Contexts in which this element may be used:
+
+ <dd>As a child of a <code><a href="#ruby">ruby</a></code> element, either
+ immediately before or immediately after an <code><a
+ href="#rt">rt</a></code> element.
+
+ <dt>Content model:
+
+ <dd>If the <code><a href="#rp">rp</a></code> element is immediately after
+ an <code><a href="#rt">rt</a></code> element that is immediately preceded
+ by another <code><a href="#rp">rp</a></code> element: a single character
+ from Unicode character class Pe.
+
+ <dd>Otherwise: a single character from Unicode character class Ps.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#rp">rp</a></code> element can be used to provide
+ parentheses around a ruby text component of a ruby annotation, to be shown
+ by user agents that don't support ruby annotations.
+
+ <p>An <code><a href="#rp">rp</a></code> element that is a child of a
+ <code><a href="#ruby">ruby</a></code> element represents nothing and it
+ and its contents must be ignored. An <code><a href="#rp">rp</a></code>
+ element whose parent element is not a <code><a
+ href="#ruby">ruby</a></code> element represents the same thing as its
+ children.
+
+ <div class=example>
+ <p>The example above, in which each ideograph in the text <span
+ lang=ja>&#x658e;&#x85e4;&#x4fe1;&#x7537;</span> is annotated with its
+ reading, could be expanded to use <code><a href="#rp">rp</a></code> so
+ that in legacy user agentthe readings are in parentheses:</p>
+
+ <pre lang=ja>... &lt;ruby>
+ &#x658e; &lt;rp>(&lt;/rp>&lt;rt>&#x3055;&#x3044;&lt;/rt>&lt;rp>)&lt;/rp>
+ &#x85e4; &lt;rp>(&lt;/rp>&lt;rt>&#x3068;&#x3046;&lt;/rt>&lt;rp>)&lt;/rp>
+ &#x4fe1; &lt;rp>(&lt;/rp>&lt;rt>&#x306e;&#x3076;&lt;/rt>&lt;rp>)&lt;/rp>
+ &#x7537; &lt;rp>(&lt;/rp>&lt;rt>&#x304a;&lt;/rt>&lt;rp>)&lt;/rp>
+&lt;/ruby> ...</pre>
+
+ <p>In conforming user agents the rendering would be as above, but in user
+ agents that do not support ruby, the rendering would be:</p>
+
+ <pre
+ lang=ja>... &#x658e; (&#x3055;&#x3044;) &#x85e4; (&#x3068;&#x3046;) &#x4fe1; (&#x306e;&#x3076;) &#x7537; (&#x304a;) ...</pre>
+ </div>
+
+ <h4 id=usage><span class=secno>3.10.25 </span>Usage summary</h4>
<p class=big-issue>We need to summarize the various elements, in particular
to distinguish b/i/em/strong/var/q/mark/cite.</p>
<!-- XXX when you do this, also reorder the elements in this section
to bring the related ones closer together. -->
- <h4 id=footnotes><span class=secno>3.10.23 </span>Footnotes</h4>
+ <h4 id=footnotes><span class=secno>3.10.26 </span>Footnotes</h4>
<p>HTML does not have a dedicated mechanism for marking up footnotes. Here
are the recommended alternatives.
@@ -44997,9 +45162,10 @@ function receiver(e) {
end tags</dfn>, then, while the <a href="#current5">current node</a> is a
<code><a href="#dd">dd</a></code> element, a <code><a
href="#dt">dt</a></code> element, an <code><a href="#li">li</a></code>
- element, or a <code><a href="#p">p</a></code> element, the UA must pop the
- <a href="#current5">current node</a> off the <a href="#stack">stack of
- open elements</a>.
+ element, a <code><a href="#p">p</a></code> element, an <code><a
+ href="#rp">rp</a></code> element, or an <code><a href="#rt">rt</a></code>
+ element, the UA must pop the <a href="#current5">current node</a> off the
+ <a href="#stack">stack of open elements</a>.
<p>If a step requires the UA to generate implied end tags but lists an
element to exclude from the process, then the UA must perform the above
@@ -46823,6 +46989,38 @@ function receiver(e) {
in table</a>". Otherwise, switch the <span>insertion mode</span> to "<a
href="#in-select" title="insertion mode: in select">in select</a>".</p>
+ <dt>A start tag whose tag name is one of: "rp", "rt"
+
+ <dd> <!-- the parsing rules for ruby really don't match IE much at all,
+ but in practice the markup used is very simple and so strict
+ compatibility with IE isn't required. For example, as defined
+ here we get very, very different behaviour than IE for
+ pathological cases like:
+
+ <ruby><ol><li><p>a<rt>b
+ <ruby>a<rt>b<p>c
+
+ But in practice most ruby markup falls into these cases:
+
+ <ruby>a<rt>b</ruby>
+ <ruby>a<rp>b<rt>c<rp>d</ruby>
+ <ruby>a<rt>b</rt></ruby>
+ <ruby>a<rp>b</rp><rt>c</rt><rp>d</rp></ruby>
+
+ -->
+
+ <p>If the <a href="#stack">stack of open elements</a> <a href="#have-an"
+ title="has an element in scope">has a <code>ruby</code> element in
+ scope</a>, then <a href="#generate">generate implied end tags</a>. If
+ the <a href="#current5">current node</a> is not then a <code><a
+ href="#ruby">ruby</a></code> element, this is a <a href="#parse1">parse
+ error</a>; pop all the nodes from the <a href="#current5">current
+ node</a> up to the node immediately before the bottommost <code><a
+ href="#ruby">ruby</a></code> element on the <a href="#stack">stack of
+ open elements</a>.</p>
+
+ <p><a href="#insert0">Insert an HTML element</a> for the token.</p>
+
<dt>An end tag whose tag name is "br"
<dd>
View
162 source
@@ -8956,8 +8956,6 @@ first matching case):&lt;/p&gt;
<h3>Text-level semantics</h3><!-- XXX ew, find a better section name -->
- <!-- XXX ruby (delayed until someone can define it with error handling rules) -->
-
<h4>The <dfn><code>a</code></dfn> element</h4>
<dl class="element">
@@ -10999,6 +10997,129 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
+ <h4>The <dfn><code>ruby</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd>One or more groups of: <span>phrasing content</span> followed either by a single <code>rt</code> element, or an <code>rp</code> element, an <code>rt</code> element, and another <code>rp</code> element.</dd>
+ <dt>Element-specific attributes:</dt>
+ <dd>None.</dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>ruby</code> element allows one or more spans of
+ phrasing content to be marked with ruby annotations.</p>
+
+ <p>A <code>ruby</code> element represents the spans of phrasing
+ content it contains, ignoring all the child <code>rt</code> and
+ <code>rp</code> elements and their descendants. Those spans of
+ phrasing content have associated annotations created using the
+ <code>rt</code> element.</p>
+
+ <div class="example">
+
+ <p>In this example, each ideograph in the text <span
+ lang="ja">&#x658e;&#x85e4;&#x4fe1;&#x7537;</span> is annotated with
+ its reading.</p>
+
+ <pre lang="ja">... &lt;ruby>
+ &#x658e; &lt;rt> &#x3055;&#x3044; &lt;/rt>
+ &#x85e4; &lt;rt> &#x3068;&#x3046; &lt;/rt>
+ &#x4fe1; &lt;rt> &#x306e;&#x3076; &lt;/rt>
+ &#x7537; &lt;rt> &#x304a; &lt;/rt>
+&lt;/ruby> ...</pre>
+
+ <p>This might be rendered as:</p>
+
+ <p><img src="images/sample-ruby.png"
+ alt="The four main ideographs, each with its reading annotation rendered in a smaller font above it."></p>
+
+ </div>
+
+
+ <h4>The <dfn><code>rt</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As a child of a <code>ruby</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Element-specific attributes:</dt>
+ <dd>None.</dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>rt</code> element marks the ruby text component of a
+ ruby annotation.</p>
+
+ <p>An <code>rt</code> element that is a child of a <code>ruby</code>
+ element represents an annotation (given by its children) for the
+ zero or more nodes of phrasing content that immediately precedes it
+ in the <code>ruby</code> element, ignoring <code>rp</code>
+ elements.</p>
+
+ <p>An <code>rt</code> element that is not a child of a
+ <code>ruby</code> element represents the same thing as its
+ children.</p>
+
+
+ <h4>The <dfn><code>rp</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As a child of a <code>ruby</code> element, either immediately before or immediately after an <code>rt</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd>If the <code>rp</code> element is immediately after an <code>rt</code> element that is immediately preceded by another <code>rp</code> element: a single character from Unicode character class Pe.</dd>
+ <dd>Otherwise: a single character from Unicode character class Ps.</dd>
+ <dt>Element-specific attributes:</dt>
+ <dd>None.</dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>rp</code> element can be used to provide parentheses
+ around a ruby text component of a ruby annotation, to be shown by
+ user agents that don't support ruby annotations.</p>
+
+ <p>An <code>rp</code> element that is a child of a <code>ruby</code>
+ element represents nothing and it and its contents must be
+ ignored. An <code>rp</code> element whose parent element is not a
+ <code>ruby</code> element represents the same thing as its
+ children.</p>
+
+ <div class="example">
+
+ <p>The example above, in which each ideograph in the text <span
+ lang="ja">&#x658e;&#x85e4;&#x4fe1;&#x7537;</span> is annotated with
+ its reading, could be expanded to use <code>rp</code> so that in
+ legacy user agentthe readings are in parentheses:</p>
+
+ <pre lang="ja">... &lt;ruby>
+ &#x658e; &lt;rp>(&lt;/rp>&lt;rt>&#x3055;&#x3044;&lt;/rt>&lt;rp>)&lt;/rp>
+ &#x85e4; &lt;rp>(&lt;/rp>&lt;rt>&#x3068;&#x3046;&lt;/rt>&lt;rp>)&lt;/rp>
+ &#x4fe1; &lt;rp>(&lt;/rp>&lt;rt>&#x306e;&#x3076;&lt;/rt>&lt;rp>)&lt;/rp>
+ &#x7537; &lt;rp>(&lt;/rp>&lt;rt>&#x304a;&lt;/rt>&lt;rp>)&lt;/rp>
+&lt;/ruby> ...</pre>
+
+ <p>In conforming user agents the rendering would be as above, but
+ in user agents that do not support ruby, the rendering would
+ be:</p>
+
+ <pre lang="ja">... &#x658e; (&#x3055;&#x3044;) &#x85e4; (&#x3068;&#x3046;) &#x4fe1; (&#x306e;&#x3076;) &#x7537; (&#x304a;) ...</pre>
+
+ </div>
+
+
<h4>Usage summary</h4>
<p class="big-issue">We need to summarize the various elements, in
@@ -42227,7 +42348,8 @@ function receiver(e) {
<p>When the steps below require the UA to <dfn>generate implied end
tags</dfn>, then, while the <span>current node</span> is a
<code>dd</code> element, a <code>dt</code> element, an
- <code>li</code> element, or a <code>p</code> element, the UA must
+ <code>li</code> element, a <code>p</code> element, an
+ <code>rp</code> element, or an <code>rt</code> element, the UA must
pop the <span>current node</span> off the <span>stack of open
elements</span>.</p>
@@ -44022,6 +44144,40 @@ function receiver(e) {
</dd>
+ <dt>A start tag whose tag name is one of: "rp", "rt"</dt>
+ <dd>
+
+ <!-- the parsing rules for ruby really don't match IE much at all,
+ but in practice the markup used is very simple and so strict
+ compatibility with IE isn't required. For example, as defined
+ here we get very, very different behaviour than IE for
+ pathological cases like:
+
+ <ruby><ol><li><p>a<rt>b
+ <ruby>a<rt>b<p>c
+
+ But in practice most ruby markup falls into these cases:
+
+ <ruby>a<rt>b</ruby>
+ <ruby>a<rp>b<rt>c<rp>d</ruby>
+ <ruby>a<rt>b</rt></ruby>
+ <ruby>a<rp>b</rp><rt>c</rt><rp>d</rp></ruby>
+
+ -->
+
+ <p>If the <span>stack of open elements</span> <span title="has an
+ element in scope">has a <code>ruby</code> element in scope</span>,
+ then <span>generate implied end tags</span>. If the <span>current
+ node</span> is not then a <code>ruby</code> element, this is a
+ <span>parse error</span>; pop all the nodes from the <span>current
+ node</span> up to the node immediately before the bottommost
+ <code>ruby</code> element on the <span>stack of open
+ elements</span>.</p>
+
+ <p><span>Insert an HTML element</span> for the token.</p>
+
+ </dd>
+
<dt>An end tag whose tag name is "br"</dt>
<dd>
<p><span>Parse error</span>. Act as if a start tag token with

0 comments on commit f4efc73

Please sign in to comment.