HTML dir 全局属性

试一试

<p dir="rtl">
  This paragraph is in English but incorrectly goes right to left.
</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>

<hr />

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">
  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
</p>

它可以有以下值：

• ltr，表示从左到右，用于从左到右书写的语言（例如英语）；
• rtl，表示从右到左，用于从右到左书写的语言（例如阿拉伯语）；
• auto，由用户代理决定。它在解析元素内的字符时使用一种基本算法，直到找到一个具有强方向性的字符，然后将该方向性应用于整个元素。

如果未指定，则该值将从父元素继承。

如果激活了 CSS 页面并且元素支持 direction 和 unicode-bidi CSS 属性，则可以通过这些属性覆盖此属性。

由于文本的方向性与其内容语义相关，而不是与其呈现相关，因此建议 Web 开发人员在可能的情况下使用此属性而不是相关的 CSS 属性。这样，即使在不支持 CSS 或 CSS 被禁用的浏览器上，文本也能正确显示。

继承

如果一个元素没有 dir 属性，它将继承其父节点设置的 dir 值，而父节点又可能从其父节点继承，依此类推。

用法说明

图像可以将其 dir 属性设置为 "rtl"，在这种情况下，HTML 属性 title 和 alt 将被格式化并定义为 "rtl"。

当表格的 dir 设置为 "rtl" 时，列的顺序将从右到左排列。

此属性对于 <bdo> 元素是必需的，并且在该元素上具有不同的语义含义。

此属性不会被 <bdi> 元素继承。如果未设置，其值为 auto。

浏览器可能允许用户更改 <input> 和 <textarea> 元素的文本方向性，以帮助用户创建内容。Chrome 和 Safari 在输入字段的上下文菜单中提供了方向性选项。Firefox 在 <textarea> 中使用 Ctrl (Windows)/Cmd (macOS) + Shift + X 来切换文本方向。这些功能会在 ltr 和 rtl 之间切换 dir 属性的值。

规范

浏览器兼容性

另见

• 所有 全局属性。
• 反映此属性的 HTMLElement.dir。
• 处理不同的文本方向