[html5] r5669 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Thu Nov 4 17:55:22 PDT 2010
Author: ianh
Date: 2010-11-04 17:55:21 -0700 (Thu, 04 Nov 2010)
New Revision: 5669
Modified:
complete.html
images/content-venn.svg
index
source
Log:
[giow] (0) Add a <bdi> element to safely let people insert user-generated content that may have bidi implications.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10807
Modified: complete.html
===================================================================
--- complete.html 2010-11-03 23:14:05 UTC (rev 5668)
+++ complete.html 2010-11-05 00:55:21 UTC (rev 5669)
@@ -214,7 +214,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>Web Applications 1.0</h1>
- <h2 class="no-num no-toc">Draft Standard — 3 November 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 5 November 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -509,11 +509,12 @@
<li><a href=#the-ruby-element><span class=secno>4.6.19 </span>The <code>ruby</code> element</a></li>
<li><a href=#the-rt-element><span class=secno>4.6.20 </span>The <code>rt</code> element</a></li>
<li><a href=#the-rp-element><span class=secno>4.6.21 </span>The <code>rp</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.22 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.23 </span>The <code>span</code> element</a></li>
- <li><a href=#the-br-element><span class=secno>4.6.24 </span>The <code>br</code> element</a></li>
- <li><a href=#the-wbr-element><span class=secno>4.6.25 </span>The <code>wbr</code> element</a></li>
- <li><a href=#usage-summary><span class=secno>4.6.26 </span>Usage summary</a></ol></li>
+ <li><a href=#the-bdi-element><span class=secno>4.6.22 </span>The <code>bdi</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
+ <li><a href=#the-br-element><span class=secno>4.6.25 </span>The <code>br</code> element</a></li>
+ <li><a href=#the-wbr-element><span class=secno>4.6.26 </span>The <code>wbr</code> element</a></li>
+ <li><a href=#usage-summary><span class=secno>4.6.27 </span>Usage summary</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
<ol>
<li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
@@ -10218,6 +10219,7 @@
<li><code><a href=#the-aside-element>aside</a></code></li>
<li><code><a href=#audio>audio</a></code></li>
<li><code><a href=#the-b-element>b</a></code></li>
+ <li><code><a href=#the-bdi-element>bdi</a></code></li>
<li><code><a href=#the-bdo-element>bdo</a></code></li>
<li><code><a href=#the-blockquote-element>blockquote</a></code></li>
<li><code><a href=#the-br-element>br</a></code></li>
@@ -10357,6 +10359,7 @@
<li><code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element)</li>
<li><code><a href=#audio>audio</a></code></li>
<li><code><a href=#the-b-element>b</a></code></li>
+ <li><code><a href=#the-bdi-element>bdi</a></code></li>
<li><code><a href=#the-bdo-element>bdo</a></code></li>
<li><code><a href=#the-br-element>br</a></code></li>
<li><code><a href=#the-button-element>button</a></code></li>
@@ -19875,7 +19878,7 @@
</div>
- <h4 id=the-bdo-element><span class=secno>4.6.22 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <h4 id=the-bdi-element><span class=secno>4.6.22 </span>The <dfn><code>bdi</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -19886,6 +19889,60 @@
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
+ <!--XXX <dd>Also, the <code title="attr-dir">dir</code> global attribute has special semantics on this element.</dd>-->
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-bdi-element>bdi</a></code> element <a href=#represents>represents</a> a span of
+ text that is to be isolated from its surroundings for the purposes
+ of bidirectional text formatting. <a href=#refsBIDI>[BIDI]</a></p>
+
+ <!-- XXX once we have dir=auto, this element should default to dir=auto -->
+
+ <div class=impl>
+
+ <p>For the purposes of the bidirectional algorithm, the user agent
+ must act as if the contents of the element were a self-contained
+ paragraph not present in the parent element.</p>
+
+ <p>The requirements on handling the <code><a href=#the-bdi-element>bdi</a></code> element for the
+ bidi algorithm may be implemented indirectly through the style
+ layer. For example, an HTML+CSS user agent should implement these
+ requirements by implementing the CSS 'unicode-bidi' property. <a href=#refsCSS>[CSS]</a></p>
+
+ </div>
+
+ <div class=example>
+
+ <p>This element is especially useful when embedding user-generated
+ content with an unknown directionality.</p>
+
+ <p>In this example, usernames are shown along with the number of
+ posts that the user has submitted. If the <code><a href=#the-bdi-element>bdi</a></code> element
+ was not used, the username of the Arabic user would end up
+ confusing the text (the bidirectional algorithm would put the colon
+ next and the number "3" to the word "User" rather than next to the
+ word "posts").</p>
+
+ <pre><ul>
+ <li>User <bdi>jcranmer</bdi>: 12 posts.
+ <li>User <bdi>hober</bdi>: 5 posts.
+ <li>User <bdi><bdo dir=rtl>إيان</bdo></bdi>: 3 posts.
+</ul></pre>
+
+ </div>
+
+
+ <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Contexts in which this element can be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
<dd>Also, the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> global attribute has special semantics on this element.</dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
@@ -19924,7 +19981,7 @@
- <h4 id=the-span-element><span class=secno>4.6.23 </span>The <dfn><code>span</code></dfn> element</h4>
+ <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -19963,7 +20020,7 @@
- <h4 id=the-br-element><span class=secno>4.6.24 </span>The <dfn><code>br</code></dfn> element</h4>
+ <h4 id=the-br-element><span class=secno>4.6.25 </span>The <dfn><code>br</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20041,7 +20098,7 @@
</div>
- <h4 id=the-wbr-element><span class=secno>4.6.25 </span>The <dfn><code>wbr</code></dfn> element</h4>
+ <h4 id=the-wbr-element><span class=secno>4.6.26 </span>The <dfn><code>wbr</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20079,7 +20136,7 @@
- <h4 id=usage-summary><span class=secno>4.6.26 </span>Usage summary</h4>
+ <h4 id=usage-summary><span class=secno>4.6.27 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -20166,6 +20223,10 @@
<td>Ruby annotations
<td><pre class=example><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
+ <tr><td><code><a href=#the-bdi-element>bdi</a></code>
+ <td>Text directionality isolation
+ <td><pre class=example>The recommended restaurant is <strong><bdi lang="">My Juice Café (At The Beach)</bdi></strong>.</pre>
+
<tr><td><code><a href=#the-bdo-element>bdo</a></code>
<td>Text directionality formatting
<td><pre class=example>The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre>
@@ -83972,7 +84033,8 @@
[dir=ltr] { direction: ltr; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
[dir=rtl] { direction: rtl; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
-bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
+bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
+bdi { unicode-bidi: isolate; }</pre>
<p>In addition, rules setting the 'quotes' property appropriately
for the locales and languages understood by the user are expected to
@@ -88731,6 +88793,14 @@
<code title=attr-base-href><a href=#attr-base-href>href</a></code>;
<code title=attr-base-target><a href=#attr-base-target>target</a></code></td>
<td><code><a href=#htmlbaseelement>HTMLBaseElement</a></code></td>
+ <tr><th><code><a href=#the-bdi-element>bdi</a></code></th>
+ <td>Text directionality isolation</td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a></td>
+ <td><code><a href=#htmlelement>HTMLElement</a></code></td>
<tr><th><code><a href=#the-bdo-element>bdo</a></code></th>
<td>Text directionality formatting</td>
<td><a href=#flow-content title="Flow content">flow</a>;
@@ -89783,6 +89853,7 @@
<code><a href=#the-aside-element>aside</a></code>;
<code><a href=#audio>audio</a></code>;
<code><a href=#the-b-element>b</a></code>;
+ <code><a href=#the-bdi-element>bdi</a></code>;
<code><a href=#the-bdo-element>bdo</a></code>;
<code><a href=#the-blockquote-element>blockquote</a></code>;
<code><a href=#the-br-element>br</a></code>;
@@ -89888,6 +89959,7 @@
<code><a href=#the-abbr-element>abbr</a></code>;
<code><a href=#audio>audio</a></code>;
<code><a href=#the-b-element>b</a></code>;
+ <code><a href=#the-bdi-element>bdi</a></code>;
<code><a href=#the-bdo-element>bdo</a></code>;
<code><a href=#the-br-element>br</a></code>;
<code><a href=#the-button-element>button</a></code>;
@@ -91206,6 +91278,9 @@
<tr><td> <code><a href=#the-base-element>base</a></code>
<td> <code><a href=#htmlbaseelement>HTMLBaseElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-bdi-element>bdi</a></code>
+ <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-bdo-element>bdo</a></code>
<td> <code><a href=#htmlelement>HTMLElement</a></code>
Modified: images/content-venn.svg
===================================================================
--- images/content-venn.svg 2010-11-03 23:14:05 UTC (rev 5668)
+++ images/content-venn.svg 2010-11-05 00:55:21 UTC (rev 5669)
@@ -29,6 +29,7 @@
<li><code>aside</code></li>
<li><code>audio</code></li>
<li><code>b</code></li>
+ <li><code>bdi</code></li>
<li><code>bdo</code></li>
<li><code>blockquote</code></li>
<li><code>br</code></li>
@@ -199,6 +200,7 @@
<li><code>area</code>*</li>
<li><code>audio</code></li>
<li><code>b</code></li>
+ <li><code>bdi</code></li>
<li><code>bdo</code></li>
<li><code>br</code></li>
<li><code>button</code></li>
Modified: index
===================================================================
--- index 2010-11-03 23:14:05 UTC (rev 5668)
+++ index 2010-11-05 00:55:21 UTC (rev 5669)
@@ -218,7 +218,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>HTML5 (including next generation additions still in development)</h1>
- <h2 class="no-num no-toc">Draft Standard — 3 November 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 5 November 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -516,11 +516,12 @@
<li><a href=#the-ruby-element><span class=secno>4.6.19 </span>The <code>ruby</code> element</a></li>
<li><a href=#the-rt-element><span class=secno>4.6.20 </span>The <code>rt</code> element</a></li>
<li><a href=#the-rp-element><span class=secno>4.6.21 </span>The <code>rp</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.22 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.23 </span>The <code>span</code> element</a></li>
- <li><a href=#the-br-element><span class=secno>4.6.24 </span>The <code>br</code> element</a></li>
- <li><a href=#the-wbr-element><span class=secno>4.6.25 </span>The <code>wbr</code> element</a></li>
- <li><a href=#usage-summary><span class=secno>4.6.26 </span>Usage summary</a></ol></li>
+ <li><a href=#the-bdi-element><span class=secno>4.6.22 </span>The <code>bdi</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
+ <li><a href=#the-br-element><span class=secno>4.6.25 </span>The <code>br</code> element</a></li>
+ <li><a href=#the-wbr-element><span class=secno>4.6.26 </span>The <code>wbr</code> element</a></li>
+ <li><a href=#usage-summary><span class=secno>4.6.27 </span>Usage summary</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
<ol>
<li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
@@ -10195,6 +10196,7 @@
<li><code><a href=#the-aside-element>aside</a></code></li>
<li><code><a href=#audio>audio</a></code></li>
<li><code><a href=#the-b-element>b</a></code></li>
+ <li><code><a href=#the-bdi-element>bdi</a></code></li>
<li><code><a href=#the-bdo-element>bdo</a></code></li>
<li><code><a href=#the-blockquote-element>blockquote</a></code></li>
<li><code><a href=#the-br-element>br</a></code></li>
@@ -10334,6 +10336,7 @@
<li><code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element)</li>
<li><code><a href=#audio>audio</a></code></li>
<li><code><a href=#the-b-element>b</a></code></li>
+ <li><code><a href=#the-bdi-element>bdi</a></code></li>
<li><code><a href=#the-bdo-element>bdo</a></code></li>
<li><code><a href=#the-br-element>br</a></code></li>
<li><code><a href=#the-button-element>button</a></code></li>
@@ -19852,7 +19855,7 @@
</div>
- <h4 id=the-bdo-element><span class=secno>4.6.22 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <h4 id=the-bdi-element><span class=secno>4.6.22 </span>The <dfn><code>bdi</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -19863,6 +19866,60 @@
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
+ <!--XXX <dd>Also, the <code title="attr-dir">dir</code> global attribute has special semantics on this element.</dd>-->
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-bdi-element>bdi</a></code> element <a href=#represents>represents</a> a span of
+ text that is to be isolated from its surroundings for the purposes
+ of bidirectional text formatting. <a href=#refsBIDI>[BIDI]</a></p>
+
+ <!-- XXX once we have dir=auto, this element should default to dir=auto -->
+
+ <div class=impl>
+
+ <p>For the purposes of the bidirectional algorithm, the user agent
+ must act as if the contents of the element were a self-contained
+ paragraph not present in the parent element.</p>
+
+ <p>The requirements on handling the <code><a href=#the-bdi-element>bdi</a></code> element for the
+ bidi algorithm may be implemented indirectly through the style
+ layer. For example, an HTML+CSS user agent should implement these
+ requirements by implementing the CSS 'unicode-bidi' property. <a href=#refsCSS>[CSS]</a></p>
+
+ </div>
+
+ <div class=example>
+
+ <p>This element is especially useful when embedding user-generated
+ content with an unknown directionality.</p>
+
+ <p>In this example, usernames are shown along with the number of
+ posts that the user has submitted. If the <code><a href=#the-bdi-element>bdi</a></code> element
+ was not used, the username of the Arabic user would end up
+ confusing the text (the bidirectional algorithm would put the colon
+ next and the number "3" to the word "User" rather than next to the
+ word "posts").</p>
+
+ <pre><ul>
+ <li>User <bdi>jcranmer</bdi>: 12 posts.
+ <li>User <bdi>hober</bdi>: 5 posts.
+ <li>User <bdi><bdo dir=rtl>إيان</bdo></bdi>: 3 posts.
+</ul></pre>
+
+ </div>
+
+
+ <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Contexts in which this element can be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
<dd>Also, the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> global attribute has special semantics on this element.</dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
@@ -19901,7 +19958,7 @@
- <h4 id=the-span-element><span class=secno>4.6.23 </span>The <dfn><code>span</code></dfn> element</h4>
+ <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -19940,7 +19997,7 @@
- <h4 id=the-br-element><span class=secno>4.6.24 </span>The <dfn><code>br</code></dfn> element</h4>
+ <h4 id=the-br-element><span class=secno>4.6.25 </span>The <dfn><code>br</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20018,7 +20075,7 @@
</div>
- <h4 id=the-wbr-element><span class=secno>4.6.25 </span>The <dfn><code>wbr</code></dfn> element</h4>
+ <h4 id=the-wbr-element><span class=secno>4.6.26 </span>The <dfn><code>wbr</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20056,7 +20113,7 @@
- <h4 id=usage-summary><span class=secno>4.6.26 </span>Usage summary</h4>
+ <h4 id=usage-summary><span class=secno>4.6.27 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -20143,6 +20200,10 @@
<td>Ruby annotations
<td><pre class=example><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
+ <tr><td><code><a href=#the-bdi-element>bdi</a></code>
+ <td>Text directionality isolation
+ <td><pre class=example>The recommended restaurant is <strong><bdi lang="">My Juice Café (At The Beach)</bdi></strong>.</pre>
+
<tr><td><code><a href=#the-bdo-element>bdo</a></code>
<td>Text directionality formatting
<td><pre class=example>The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre>
@@ -79886,7 +79947,8 @@
[dir=ltr] { direction: ltr; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
[dir=rtl] { direction: rtl; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
-bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
+bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
+bdi { unicode-bidi: isolate; }</pre>
<p>In addition, rules setting the 'quotes' property appropriately
for the locales and languages understood by the user are expected to
@@ -84645,6 +84707,14 @@
<code title=attr-base-href><a href=#attr-base-href>href</a></code>;
<code title=attr-base-target><a href=#attr-base-target>target</a></code></td>
<td><code><a href=#htmlbaseelement>HTMLBaseElement</a></code></td>
+ <tr><th><code><a href=#the-bdi-element>bdi</a></code></th>
+ <td>Text directionality isolation</td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a></td>
+ <td><code><a href=#htmlelement>HTMLElement</a></code></td>
<tr><th><code><a href=#the-bdo-element>bdo</a></code></th>
<td>Text directionality formatting</td>
<td><a href=#flow-content title="Flow content">flow</a>;
@@ -85697,6 +85767,7 @@
<code><a href=#the-aside-element>aside</a></code>;
<code><a href=#audio>audio</a></code>;
<code><a href=#the-b-element>b</a></code>;
+ <code><a href=#the-bdi-element>bdi</a></code>;
<code><a href=#the-bdo-element>bdo</a></code>;
<code><a href=#the-blockquote-element>blockquote</a></code>;
<code><a href=#the-br-element>br</a></code>;
@@ -85802,6 +85873,7 @@
<code><a href=#the-abbr-element>abbr</a></code>;
<code><a href=#audio>audio</a></code>;
<code><a href=#the-b-element>b</a></code>;
+ <code><a href=#the-bdi-element>bdi</a></code>;
<code><a href=#the-bdo-element>bdo</a></code>;
<code><a href=#the-br-element>br</a></code>;
<code><a href=#the-button-element>button</a></code>;
@@ -87120,6 +87192,9 @@
<tr><td> <code><a href=#the-base-element>base</a></code>
<td> <code><a href=#htmlbaseelement>HTMLBaseElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-bdi-element>bdi</a></code>
+ <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-bdo-element>bdo</a></code>
<td> <code><a href=#htmlelement>HTMLElement</a></code>
Modified: source
===================================================================
--- source 2010-11-03 23:14:05 UTC (rev 5668)
+++ source 2010-11-05 00:55:21 UTC (rev 5669)
@@ -10426,6 +10426,7 @@
<li><code>aside</code></li>
<li><code>audio</code></li>
<li><code>b</code></li>
+ <li><code>bdi</code></li>
<li><code>bdo</code></li>
<li><code>blockquote</code></li>
<li><code>br</code></li>
@@ -10578,6 +10579,7 @@
<li><code>area</code> (if it is a descendant of a <code>map</code> element)</li>
<li><code>audio</code></li>
<li><code>b</code></li>
+ <li><code>bdi</code></li>
<li><code>bdo</code></li>
<li><code>br</code></li>
<li><code>button</code></li>
@@ -21184,6 +21186,64 @@
</div>
+ <h4>The <dfn><code>bdi</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element can be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <!--XXX <dd>Also, the <code title="attr-dir">dir</code> global attribute has special semantics on this element.</dd>-->
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>bdi</code> element <span>represents</span> a span of
+ text that is to be isolated from its surroundings for the purposes
+ of bidirectional text formatting. <a href="#refsBIDI">[BIDI]</a></p>
+
+ <!-- XXX once we have dir=auto, this element should default to dir=auto -->
+
+ <div class="impl">
+
+ <p>For the purposes of the bidirectional algorithm, the user agent
+ must act as if the contents of the element were a self-contained
+ paragraph not present in the parent element.</p>
+
+ <p>The requirements on handling the <code>bdi</code> element for the
+ bidi algorithm may be implemented indirectly through the style
+ layer. For example, an HTML+CSS user agent should implement these
+ requirements by implementing the CSS 'unicode-bidi' property. <a
+ href="#refsCSS">[CSS]</a></p>
+
+ </div>
+
+ <div class="example">
+
+ <p>This element is especially useful when embedding user-generated
+ content with an unknown directionality.</p>
+
+ <p>In this example, usernames are shown along with the number of
+ posts that the user has submitted. If the <code>bdi</code> element
+ was not used, the username of the Arabic user would end up
+ confusing the text (the bidirectional algorithm would put the colon
+ next and the number "3" to the word "User" rather than next to the
+ word "posts").</p>
+
+ <pre><ul>
+ <li>User <bdi>jcranmer</bdi>: 12 posts.
+ <li>User <bdi>hober</bdi>: 5 posts.
+ <li>User <bdi><bdo dir=rtl>إيان</bdo></bdi>: 3 posts.
+</ul></pre>
+
+ </div>
+
+
<h4>The <dfn><code>bdo</code></dfn> element</h4>
<dl class="element">
@@ -21517,6 +21577,11 @@
<td><pre class="example"><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
<tr>
+ <td><code>bdi</code>
+ <td>Text directionality isolation
+ <td><pre class="example">The recommended restaurant is <strong><bdi lang="">My Juice Café (At The Beach)</bdi></strong>.</pre>
+
+ <tr>
<td><code>bdo</code>
<td>Text directionality formatting
<td><pre class="example">The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre>
@@ -96234,7 +96299,8 @@
[dir=ltr] { direction: ltr; unicode-bidi: embed; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
[dir=rtl] { direction: rtl; unicode-bidi: embed; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
-bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */</pre>
+bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
+bdi { unicode-bidi: isolate; }</pre>
<p>In addition, rules setting the 'quotes' property appropriately
for the locales and languages understood by the user are expected to
@@ -101785,6 +101851,17 @@
</tr>
<tr>
+ <th><code>bdi</code></th>
+ <td>Text directionality isolation</td>
+ <td><span title="Flow content">flow</span>;
+ <span title="Phrasing content">phrasing</span></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>bdo</code></th>
<td>Text directionality formatting</td>
<td><span title="Flow content">flow</span>;
@@ -103121,6 +103198,7 @@
<code>aside</code>;
<code>audio</code>;
<code>b</code>;
+ <code>bdi</code>;
<code>bdo</code>;
<code>blockquote</code>;
<code>br</code>;
@@ -103229,6 +103307,7 @@
<code>abbr</code>;
<code>audio</code>;
<code>b</code>;
+ <code>bdi</code>;
<code>bdo</code>;
<code>br</code>;
<code>button</code>;
@@ -104802,6 +104881,10 @@
<td> <code>HTMLBaseElement</code> : <code>HTMLElement</code>
<tr>
+ <td> <code>bdi</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>bdo</code>
<td> <code>HTMLElement</code>
More information about the Commit-Watchers
mailing list