Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[giow] (0) Add a <bdi> element to safely let people insert user-gener…
…ated content that may have bidi implications.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10807

git-svn-id: http://svn.whatwg.org/webapps@5669 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Nov 5, 2010
1 parent 8923ec7 commit 29d7102
Show file tree
Hide file tree
Showing 4 changed files with 260 additions and 25 deletions.
99 changes: 87 additions & 12 deletions complete.html
Expand Up @@ -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 &mdash; 3 November 2010</h2>
<h2 class="no-num no-toc">Draft Standard &mdash; 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>-->
Expand Down Expand Up @@ -509,11 +509,12 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand Down Expand Up @@ -10218,6 +10219,7 @@ <h6 id=flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</h6>
<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>
Expand Down Expand Up @@ -10357,6 +10359,7 @@ <h6 id=heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</h6>
<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>
Expand Down Expand Up @@ -19875,7 +19878,61 @@ <h4 id=the-rp-element><span class=secno>4.6.21 </span>The <dfn><code>rp</code></
</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>
<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>
<!--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>&lt;ul&gt;
&lt;li&gt;User &lt;bdi&gt;jcranmer&lt;/bdi&gt;: 12 posts.
&lt;li&gt;User &lt;bdi&gt;hober&lt;/bdi&gt;: 5 posts.
&lt;li&gt;User &lt;bdi&gt;<bdo dir=rtl>&#1573;&#1610;&#1575;&#1606;</bdo>&lt;/bdi&gt;: 3 posts.
&lt;/ul&gt;</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>
Expand Down Expand Up @@ -19924,7 +19981,7 @@ <h4 id=the-bdo-element><span class=secno>4.6.22 </span>The <dfn><code>bdo</code>



<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>
Expand Down Expand Up @@ -19963,7 +20020,7 @@ <h4 id=the-span-element><span class=secno>4.6.23 </span>The <dfn><code>span</cod



<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>
Expand Down Expand Up @@ -20041,7 +20098,7 @@ <h4 id=the-br-element><span class=secno>4.6.24 </span>The <dfn><code>br</code></
</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>
Expand Down Expand Up @@ -20079,7 +20136,7 @@ <h4 id=the-wbr-element><span class=secno>4.6.25 </span>The <dfn><code>wbr</code>



<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>

Expand Down Expand Up @@ -20166,6 +20223,10 @@ <h4 id=usage-summary><span class=secno>4.6.26 </span>Usage summary</h4>
<td>Ruby annotations
<td><pre class=example><strong>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</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>&lt;bdi lang=""&gt;My Juice Caf&eacute; (At The Beach)&lt;/bdi&gt;</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>&lt;bdo dir=rtl&gt;Juice&lt;/bdo&gt;</strong>"</pre>
Expand Down Expand Up @@ -83972,7 +84033,8 @@ <h4 id=punctuation-and-decorations><span class=secno>14.2.6 </span>Punctuation a

[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
Expand Down Expand Up @@ -88731,6 +88793,14 @@ <h3 class=no-num id=elements-1>Elements</h3>
<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>;
Expand Down Expand Up @@ -89783,6 +89853,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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>;
Expand Down Expand Up @@ -89888,6 +89959,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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>;
Expand Down Expand Up @@ -91206,6 +91278,9 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
<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>

Expand Down
2 changes: 2 additions & 0 deletions images/content-venn.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 29d7102

Please sign in to comment.