[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>&#x625;&#x64a;&#x627;&#x646;</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