Skip to content

Commit

Permalink
[giow] (0) An example of dir=auto. Since I don't speak Arabic and am …
Browse files Browse the repository at this point in the history 
…relying on Wikipedia, a close review by Arabic speakers would be even more welcome than usual.

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

git-svn-id: http://svn.whatwg.org/webapps@5673 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Nov 9, 2010
1 parent fd6901d commit 4910e2f
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 3 deletions.
43 changes: 42 additions & 1 deletion complete.html
View file
Expand Up @@ -9726,7 +9726,6 @@ <h5 id=the-dir-attribute><span class=secno>3.2.3.5 </span>The <dfn title=attr-di
</dd>



<dt>If the element is a <a href=#root-element>root element</a> and the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute is not in a defined state
(i.e. it is not present or has an invalid value)</dt>

Expand Down Expand Up @@ -9775,6 +9774,48 @@ <h5 id=the-dir-attribute><span class=secno>3.2.3.5 </span>The <dfn title=attr-di
to render correctly even in the absence of CSS (e.g. as interpreted
by search engines).</p>

<div class=example>

<p>This markup fragment is of an IM conversation.</p>

<pre>&lt;p dir=auto class="u1"&gt;&lt;b&gt;&lt;bdi&gt;Student&lt;/bdi&gt;:&lt;/b&gt; How do you write "What's your name?" in Arabic?&lt;/p&gt;
&lt;p dir=auto class="u2"&gt;&lt;b&gt;&lt;bdi&gt;Teacher&lt;/bdi&gt;:&lt;/b&gt; &#1605;&#1575; &#1575;&#1587;&#1605;&#1603;&#1567;&lt;/p&gt;
&lt;p dir=auto class="u1"&gt;&lt;b&gt;&lt;bdi&gt;Student&lt;/bdi&gt;:&lt;/b&gt; Thanks.&lt;/p&gt;
&lt;p dir=auto class="u2"&gt;&lt;b&gt;&lt;bdi&gt;Teacher&lt;/bdi&gt;:&lt;/b&gt; That's written "&#1588;&#1603;&#1585;&#1611;&#1575;".&lt;/p&gt;
&lt;p dir=auto class="u2"&gt;&lt;b&gt;&lt;bdi&gt;Teacher&lt;/bdi&gt;:&lt;/b&gt; Do you know how to write "Please"?&lt;/p&gt;
&lt;p dir=auto class="u1"&gt;&lt;b&gt;&lt;bdi&gt;Student&lt;/bdi&gt;:&lt;/b&gt; "&#1605;&#1606; &#1601;&#1590;&#1604;&#1603;", right?&lt;/p&gt;</pre>

<!--
<!DOCTYPE html>
<style>
div { border: groove #FFFF99; padding: 0.25em; width: 22em; background: #FFFFEE; color: black; }
p { margin: 0.25em 0; font: 1em/1 InaiMathi; color: purple; }
.u1 { color: teal; }
</style>
<div>
<p dir=ltr class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=rtl class="u2"><b><bdi>Teacher</bdi>:</b> &#x645;&#x627; &#x627;&#x633;&#x645;&#x643;&#x61f;</p>
<p dir=ltr class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=ltr class="u2"><b><bdi>Teacher</bdi>:</b> That's written "&#x634;&#x643;&#x631;&#x64b;&#x627;".</p>
<p dir=ltr class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=rtl class="u1"><b><bdi>Student</bdi>:</b> "&#x645;&#x646; &#x641;&#x636;&#x644;&#x643;", right?</p>
-->

<p>Given a suitable style sheet and the default alignment styles
for the <code><a href=#the-p-element>p</a></code> element, namely to align the text to the
<i>start edge</i> of the paragraph, the resulting rendering could
be as follows:</p>

<p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." src=http://images.whatwg.org/im.png></p>

<p>As noted earlier, the <code title=attr-dir-auto><a href=#attr-dir-auto>auto</a></code>
value is not a panacea. The final paragraph in this example is
misinterpreted as being right-to-left text, since it begins with an
Arabic character, which causes the "right?" to be to the left of
the Arabic text.</p>

</div>



<h5 id=classes><span class=secno>3.2.3.6 </span>The <dfn title=attr-class><code>class</code></dfn> attribute</h5>
Expand Down
43 changes: 42 additions & 1 deletion index
View file
Expand Up @@ -9703,7 +9703,6 @@ Transport Protocol"&gt;HTTP&lt;/abbr&gt; today.&lt;/p&gt;</pre>
</dd>



<dt>If the element is a <a href=#root-element>root element</a> and the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute is not in a defined state
(i.e. it is not present or has an invalid value)</dt>

Expand Down Expand Up @@ -9752,6 +9751,48 @@ Transport Protocol"&gt;HTTP&lt;/abbr&gt; today.&lt;/p&gt;</pre>
to render correctly even in the absence of CSS (e.g. as interpreted
by search engines).</p>

<div class=example>

<p>This markup fragment is of an IM conversation.</p>

<pre>&lt;p dir=auto class="u1"&gt;&lt;b&gt;&lt;bdi&gt;Student&lt;/bdi&gt;:&lt;/b&gt; How do you write "What's your name?" in Arabic?&lt;/p&gt;
&lt;p dir=auto class="u2"&gt;&lt;b&gt;&lt;bdi&gt;Teacher&lt;/bdi&gt;:&lt;/b&gt; &#1605;&#1575; &#1575;&#1587;&#1605;&#1603;&#1567;&lt;/p&gt;
&lt;p dir=auto class="u1"&gt;&lt;b&gt;&lt;bdi&gt;Student&lt;/bdi&gt;:&lt;/b&gt; Thanks.&lt;/p&gt;
&lt;p dir=auto class="u2"&gt;&lt;b&gt;&lt;bdi&gt;Teacher&lt;/bdi&gt;:&lt;/b&gt; That's written "&#1588;&#1603;&#1585;&#1611;&#1575;".&lt;/p&gt;
&lt;p dir=auto class="u2"&gt;&lt;b&gt;&lt;bdi&gt;Teacher&lt;/bdi&gt;:&lt;/b&gt; Do you know how to write "Please"?&lt;/p&gt;
&lt;p dir=auto class="u1"&gt;&lt;b&gt;&lt;bdi&gt;Student&lt;/bdi&gt;:&lt;/b&gt; "&#1605;&#1606; &#1601;&#1590;&#1604;&#1603;", right?&lt;/p&gt;</pre>

<!--
<!DOCTYPE html>
<style>
div { border: groove #FFFF99; padding: 0.25em; width: 22em; background: #FFFFEE; color: black; }
p { margin: 0.25em 0; font: 1em/1 InaiMathi; color: purple; }
.u1 { color: teal; }
</style>
<div>
<p dir=ltr class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=rtl class="u2"><b><bdi>Teacher</bdi>:</b> &#x645;&#x627; &#x627;&#x633;&#x645;&#x643;&#x61f;</p>
<p dir=ltr class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=ltr class="u2"><b><bdi>Teacher</bdi>:</b> That's written "&#x634;&#x643;&#x631;&#x64b;&#x627;".</p>
<p dir=ltr class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=rtl class="u1"><b><bdi>Student</bdi>:</b> "&#x645;&#x646; &#x641;&#x636;&#x644;&#x643;", right?</p>
-->

<p>Given a suitable style sheet and the default alignment styles
for the <code><a href=#the-p-element>p</a></code> element, namely to align the text to the
<i>start edge</i> of the paragraph, the resulting rendering could
be as follows:</p>

<p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." src=http://images.whatwg.org/im.png></p>

<p>As noted earlier, the <code title=attr-dir-auto><a href=#attr-dir-auto>auto</a></code>
value is not a panacea. The final paragraph in this example is
misinterpreted as being right-to-left text, since it begins with an
Arabic character, which causes the "right?" to be to the left of
the Arabic text.</p>

</div>



<h5 id=classes><span class=secno>3.2.3.6 </span>The <dfn title=attr-class><code>class</code></dfn> attribute</h5>
Expand Down
43 changes: 42 additions & 1 deletion source
View file
Expand Up @@ -9874,7 +9874,6 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></pre>
</dd>



<dt>If the element is a <span>root element</span> and the <code
title="attr-dir">dir</code> attribute is not in a defined state
(i.e. it is not present or has an invalid value)</dt>
Expand Down Expand Up @@ -9936,6 +9935,48 @@ Transport Protocol">HTTP&lt;/abbr> today.&lt;/p></pre>
to render correctly even in the absence of CSS (e.g. as interpreted
by search engines).</p>

<div class="example">

<p>This markup fragment is of an IM conversation.</p>

<pre>&lt;p dir=auto class="u1">&lt;b>&lt;bdi>Student&lt;/bdi>:&lt;/b> How do you write "What's your name?" in Arabic?&lt;/p>
&lt;p dir=auto class="u2">&lt;b>&lt;bdi>Teacher&lt;/bdi>:&lt;/b> &#x645;&#x627; &#x627;&#x633;&#x645;&#x643;&#x61f;&lt;/p>
&lt;p dir=auto class="u1">&lt;b>&lt;bdi>Student&lt;/bdi>:&lt;/b> Thanks.&lt;/p>
&lt;p dir=auto class="u2">&lt;b>&lt;bdi>Teacher&lt;/bdi>:&lt;/b> That's written "&#x634;&#x643;&#x631;&#x64b;&#x627;".&lt;/p>
&lt;p dir=auto class="u2">&lt;b>&lt;bdi>Teacher&lt;/bdi>:&lt;/b> Do you know how to write "Please"?&lt;/p>
&lt;p dir=auto class="u1">&lt;b>&lt;bdi>Student&lt;/bdi>:&lt;/b> "&#x645;&#x646; &#x641;&#x636;&#x644;&#x643;", right?&lt;/p></pre>

<!--
<!DOCTYPE html>
<style>
div { border: groove #FFFF99; padding: 0.25em; width: 22em; background: #FFFFEE; color: black; }
p { margin: 0.25em 0; font: 1em/1 InaiMathi; color: purple; }
.u1 { color: teal; }
</style>
<div>
<p dir=ltr class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=rtl class="u2"><b><bdi>Teacher</bdi>:</b> &#x645;&#x627; &#x627;&#x633;&#x645;&#x643;&#x61f;</p>
<p dir=ltr class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=ltr class="u2"><b><bdi>Teacher</bdi>:</b> That's written "&#x634;&#x643;&#x631;&#x64b;&#x627;".</p>
<p dir=ltr class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=rtl class="u1"><b><bdi>Student</bdi>:</b> "&#x645;&#x646; &#x641;&#x636;&#x644;&#x643;", right?</p>
-->

<p>Given a suitable style sheet and the default alignment styles
for the <code>p</code> element, namely to align the text to the
<i>start edge</i> of the paragraph, the resulting rendering could
be as follows:</p>

<p><img src="images/im.png" alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that."></p>

<p>As noted earlier, the <code title="attr-dir-auto">auto</code>
value is not a panacea. The final paragraph in this example is
misinterpreted as being right-to-left text, since it begins with an
Arabic character, which causes the "right?" to be to the left of
the Arabic text.</p>

</div>



<h5 id="classes">The <dfn title="attr-class"><code>class</code></dfn> attribute</h5>
Expand Down

0 comments on commit 4910e2f

Please sign in to comment.