PHP小码农

Appearance

dir 文本方向 ​

dir 全局属性指定元素内容的文本书写方向，用于支持从左到右（LTR）和从右到左（RTL）的语言。它与 lang 属性配合使用，帮助浏览器和辅助技术正确渲染双向文本。

前置知识

阅读本节前，建议先了解：lang 语言

基础概念 ​

dir 的三个值 ​

值说明适用场景示例语言
ltr从左到右（默认）中文、英文、法文等zh, en, fr
rtl从右到左阿拉伯语、希伯来语等ar, he, ur
auto自动检测混合语言内容动态内容

dir 的基本用法 ​

html
<!-- 默认：从左到右 -->
<p dir="ltr">这是从左到右的文本。</p>

<!-- 从右到左 -->
<p dir="rtl">هذا نص من اليمين إلى اليسار.</p>
<p dir="rtl">עברית זו טקסט מימין לשמאל.</p>

<!-- 自动检测 -->
<p dir="auto">浏览器根据内容自动判断方向</p>

dir 与 lang 的关系 ​

当 lang 设置为已知的 RTL 语言时，浏览器会自动应用 RTL 方向。但显式设置 dir 更可靠：

html
<!-- 自动 RTL（lang=ar 时浏览器推断） -->
<html lang="ar">

<!-- 显式 RTL（更可靠） -->
<html lang="ar" dir="rtl">

<!-- 强制 LTR（即使语言是 RTL） -->
<p lang="ar" dir="ltr">Hello World</p>

语法与使用 ​

在不同元素上使用 dir ​

html
<!-- 在 html 元素上：整个页面方向 -->
<html lang="ar" dir="rtl">
  <body>
    <h1>عنوان الصفحة</h1>
    <p>محتوى الصفحة...</p>
  </body>
</html>

<!-- 在特定元素上：仅该元素方向 -->
<p>这是左对齐的中文。</p>
<p dir="rtl">这是右对齐的阿拉伯文。</p>
<p>又回到左对齐。</p>

<!-- 在表格上 -->
<table dir="rtl">
  <tr>
    <th>الاسم</th>
    <th>المدينة</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>الرياض</td>
  </tr>
</table>

CSS direction 属性 ​

dir 属性的 CSS 等价是 direction 属性：

css
/* CSS 方式 */
.rtl-text {
  direction: rtl;
  text-align: right;
}

/* HTML 方式 */
<p dir="rtl">文本内容</p>

详细说明 ​

CSS logical properties 与 dir ​

在使用 RTL 布局时，应使用 CSS 逻辑属性（logical properties）：

html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>RTL 布局示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; padding: 2rem; }

    .layout {
      display: flex; gap: 1rem; padding: 1rem;
      background: #f8fafc; border-radius: 8px; margin: 1rem 0;
    }

    /* 使用逻辑属性：在 RTL 中自动翻转 */
    .sidebar {
      /* margin-inline-start 在 RTL 中等于 margin-right */
      margin-inline-start: 1rem;
      padding-inline: 1rem;
      background: #e0f2fe; border-radius: 6px;
      /* 在 RTL 中：flex 会自动处理方向 */
    }
    .content {
      flex: 1;
      padding-inline: 1rem;
    }

    /* 边框和间距也使用逻辑属性 */
    .card {
      border-inline-start: 3px solid #3b82f6;
      padding: 1rem; background: #fff; border-radius: 6px;
      margin-bottom: 1rem;
    }

    nav ul {
      list-style: none; padding: 0;
      display: flex; flex-direction: row-reverse; /* RTL：右到左 */
      gap: 1rem;
    }
  </style>
</head>
<body>
  <h1>صفحة RTL</h1>

  <div class="layout">
    <div class="sidebar">
      <h3>القائمة الجانبية</h3>
      <ul>
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">المقالات</a></li>
        <li><a href="#">الاتصال</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="card">
        <h2>مقالة</h2>
        <p>محتوى المقالة هنا...</p>
      </div>
      <div class="card">
        <h2>مقالة أخرى</h2>
        <p>محتوى المقالة الثانية...</p>
      </div>
    </div>
  </div>
</body>
</html>

dir="auto" 的行为 ​

dir="auto" 让浏览器根据第一个强方向字符来判断文本方向：

html
<!-- 内容以阿拉伯文开头：自动 RTL -->
<p dir="auto">مرحبا بالعالم</p>

<!-- 内容以拉丁文开头：自动 LTR -->
<p dir="auto">Hello World</p>

<!-- 混合内容：以第一个字符为准 -->
<p dir="auto">مرحبا Hello World</p> <!-- RTL -->
<p dir="auto">Hello مرحبا</p>    <!-- LTR -->

实战示例 ​

双向文本页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dir 属性示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; padding: 2rem; line-height: 1.7; }
    .demo { margin: 1.5rem 0; padding: 1.5rem; border: 1px solid #e2e8f0; border-radius: 8px; }
    .demo h3 { margin-bottom: 0.75rem; color: #1e293b; }
    .ltr-demo { direction: ltr; text-align: left; padding: 1rem; background: #f0fdf4; border-radius: 6px; }
    .rtl-demo { direction: rtl; text-align: right; padding: 1rem; background: #fef3c7; border-radius: 6px; }
    .auto-demo { padding: 1rem; background: #eff6ff; border-radius: 6px; }
  </style>
</head>
<body>
  <h1>dir 属性示例</h1>

  <div class="demo">
    <h3>LTR（从左到右）</h3>
    <div class="ltr-demo">
      <p>This is English text written left to right.</p>
      <p>这是一段从左到右的中文文本。</p>
    </div>
  </div>

  <div class="demo">
    <h3>RTL（从右到左）</h3>
    <div class="rtl-demo">
      <p>هذا نص عربي مكتوب من اليمين إلى اليسار.</p>
      <p>עברית זו טקסט מימין לשמאל.</p>
    </div>
  </div>

  <div class="demo">
    <h3>auto（自动检测）</h3>
    <div class="auto-demo" dir="auto">
      <p dir="auto">Hello World - 这是中文混合文本</p>
    </div>
  </div>
</body>
</html>

注意事项 ​

常见问题 ​

  1. 不要同时使用 dir 和 CSS direction：优先使用 HTML dir 属性
  2. RTL 布局使用逻辑属性：用 margin-inline-start 代替 margin-left
  3. 图片方向不受 dir 影响：图片保持原始方向，不会翻转
  4. dir 不影响数字：数字方向不变（12345 在 RTL 中仍然从左到右）

最佳实践 ​

  1. 在 html 元素上设置 dir：为 RTL 语言页面设置 dir="rtl"
  2. 使用逻辑 CSS 属性：在双向布局中使用 inline-start/end 等属性
  3. 测试 RTL 布局：确保页面在 RTL 模式下正常显示
  4. 混合文本使用 dir="auto"：不确定方向的文本使用自动检测

下一节

继续学习：tabindex 与 accesskey

参考链接 ​