diff options
| author | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
| commit | 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch) | |
| tree | f1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/global_attributes%2Fdir.html | |
new repository
Diffstat (limited to 'devdocs/html/global_attributes%2Fdir.html')
| -rw-r--r-- | devdocs/html/global_attributes%2Fdir.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/devdocs/html/global_attributes%2Fdir.html b/devdocs/html/global_attributes%2Fdir.html new file mode 100644 index 00000000..4f4bc342 --- /dev/null +++ b/devdocs/html/global_attributes%2Fdir.html @@ -0,0 +1,61 @@ +<header><h1>dir</h1></header><div class="section-content"><p>The <code>dir</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that indicates the directionality of the element's text.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-dir.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>It can have the following values:</p> <ul> <li> +<code>ltr</code>, which means <em>left to right</em> and is to be used for languages that are written from the left to the right (like English);</li> <li> +<code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> <li> +<code>auto</code>, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This attribute is mandatory for the <a href="../element/bdo"><code><bdo></code></a> element where it has a different semantic meaning.</p> <ul> <li>This attribute is <em>not</em> inherited by the <a href="../element/bdi"><code><bdi></code></a> element. If not set, its value is <code>auto</code>.</li> <li>This attribute can be overridden by the CSS properties <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction"><code>direction</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a>, if a CSS page is active and the element supports these properties.</li> <li>As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</li> <li>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</li> </ul> </div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Browsers might allow users to change the directionality of <a href="../element/input"><code><input></code></a> and <a href="../element/textarea"><code><textarea></code></a>s in order to assist with authoring content. Chrome and Safari provide a directionality option in the contextual menu of input fields while Legacy Edge uses the key combinations <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> and <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd>. Firefox uses <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> but does NOT update the <code>dir</code> attribute value.</p> </div> +</div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">HTML Standard <br><small># the-dir-attribute</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>dir</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir"><code>HTMLElement.dir</code></a> that reflects this attribute.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir</a> + </p> +</div> |
