HTML5 Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/5673

SVNBugCommentTime (UTC)
567310808[Gecko] [Internet Explorer] [Opera] [Webkit] An example of dir=auto. Since I don't speak Arabic and am relying on Wikipedia, a close review by Arabic speakers would be even more welcome than usual.2010-11-09 02:14
Index: source
===================================================================
--- source	(revision 5672)
+++ source	(revision 5673)
@@ -9874,7 +9874,6 @@
    </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>
@@ -9936,8 +9935,50 @@
   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>
 
   <p>Every <span title="HTML elements">HTML element</span> may have a

|