Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[e] (0) Add example showing bidi in placeholder=''
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=17814
Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@7292 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Aug 28, 2012
1 parent 8d78c34 commit 3c1fdc2
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 0 deletions.
17 changes: 17 additions & 0 deletions complete.html
Expand Up @@ -52109,6 +52109,23 @@ <h6 id=the-placeholder-attribute><span class=secno>4.10.7.3.10 </span>The <code

</div>

<div class=example>

<p>In situations where the control's content has one directionality
but the placeholder needs to have a different directionality,
Unicode's bidirectional-algorithm formatting characters can be used
in the attribute value:</p>

<pre>&lt;input name=t1 type=tel placeholder="<strong>&amp;#x202B;</strong>&thinsp;<bdo dir=rtl>&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;1</bdo>&thinsp;<strong>&amp;#x202E;</strong>"&gt;
&lt;input name=t2 type=tel placeholder="<strong>&amp;#x202B;</strong>&thinsp;<bdo dir=rtl>&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;2</bdo>&thinsp;<strong>&amp;#x202E;</strong>"&gt;</pre>

<p>For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:</p>

<pre>&lt;input name=t1 type=tel placeholder="<strong>&amp;#x202B;</strong>&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;1<strong>&amp;#x202E;</strong>"&gt;
&lt;input name=t2 type=tel placeholder="<strong>&amp;#x202B;</strong>&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;2<strong>&amp;#x202E;</strong>"&gt;</pre>

</div>



<!--TOPIC:DOM APIs-->
Expand Down
17 changes: 17 additions & 0 deletions index
Expand Up @@ -52109,6 +52109,23 @@ You cannot submit this form when the field is incorrect.</samp></pre>

</div>

<div class=example>

<p>In situations where the control's content has one directionality
but the placeholder needs to have a different directionality,
Unicode's bidirectional-algorithm formatting characters can be used
in the attribute value:</p>

<pre>&lt;input name=t1 type=tel placeholder="<strong>&amp;#x202B;</strong>&thinsp;<bdo dir=rtl>&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;1</bdo>&thinsp;<strong>&amp;#x202E;</strong>"&gt;
&lt;input name=t2 type=tel placeholder="<strong>&amp;#x202B;</strong>&thinsp;<bdo dir=rtl>&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;2</bdo>&thinsp;<strong>&amp;#x202E;</strong>"&gt;</pre>

<p>For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:</p>

<pre>&lt;input name=t1 type=tel placeholder="<strong>&amp;#x202B;</strong>&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;1<strong>&amp;#x202E;</strong>"&gt;
&lt;input name=t2 type=tel placeholder="<strong>&amp;#x202B;</strong>&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;2<strong>&amp;#x202E;</strong>"&gt;</pre>

</div>



<!--TOPIC:DOM APIs-->
Expand Down
17 changes: 17 additions & 0 deletions source
Expand Up @@ -60657,6 +60657,23 @@ You cannot submit this form when the field is incorrect.</samp></pre>

</div>

<div class="example">

<p>In situations where the control's content has one directionality
but the placeholder needs to have a different directionality,
Unicode's bidirectional-algorithm formatting characters can be used
in the attribute value:</p>

<pre>&lt;input name=t1 type=tel placeholder="<strong>&amp;#x202B;</strong>&#x2009;<bdo dir=rtl>&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;1</bdo>&#x2009;<strong>&amp;#x202E;</strong>">
&lt;input name=t2 type=tel placeholder="<strong>&amp;#x202B;</strong>&#x2009;<bdo dir=rtl>&#1585;&#1602;&#1605;&nbsp;&#1575;&#1604;&#1607;&#1575;&#1578;&#1601;&nbsp;2</bdo>&#x2009;<strong>&amp;#x202E;</strong>"></pre>

<p>For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:</p>

<pre>&lt;input name=t1 type=tel placeholder="<strong>&amp;#x202B;</strong>&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;1<strong>&amp;#x202E;</strong>">
&lt;input name=t2 type=tel placeholder="<strong>&amp;#x202B;</strong>&amp;#1585;&amp;#1602;&amp;#1605;&nbsp;&amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601;&nbsp;2<strong>&amp;#x202E;</strong>"></pre>

</div>



<!--TOPIC:DOM APIs-->
Expand Down

0 comments on commit 3c1fdc2

Please sign in to comment.