📚 课程目录第2章 CSS direction与unicode-bidi属性详解

2. CSS direction 与 unicode-bidi 属性详解

CSS 的 direction 和 unicode-bidi 是构建 RTL 布局最底层的两个属性。它们控制文本、行内盒、表格列以及滚动条的方向，是整个镜像适配体系的起点。

2.1 direction 属性

direction 属性定义内容的书写方向，属性值仅两个且不继承（但元素自身会沿用到后代行内盒）。

属性值	含义	对布局的影响
`ltr`	从左到右（默认）	行内内容左对齐，块级起始边在左侧，`padding/margin/left-right` 逻辑映射按此方向
`rtl`	从右到左	行内内容右对齐，块级起始边在右侧，`start/end` 逻辑值反转

关键点： direction 只影响块级元素内的 内联排列方向，不会自动反转数字或双向文本的固有顺序——这需要 unicode-bidi 配合。

2.2 unicode-bidi 属性

unicode-bidi 属性控制双向文本（Bidi）的算法策略，决定如何处理同一段落内 LTR 和 RTL 字符的嵌套顺序。常用值见下表：

属性值	行为说明	典型场景
`normal`	使用默认 Unicode 双向算法，不额外嵌入方向层	普通混合文本（如英文+阿拉伯文）
`embed`	在当前元素内创建一个独立的双向嵌入层，方向由 `direction` 决定	RTL 块中嵌套一段 LTR 文本
`bidi-override`	强制所有字符按 `direction` 方向显示，忽略字符自身双向属性	数字或固定格式文本的方向强制纠正
`isolate`	让元素内的双向上下文与外部隔离，不影响外层排序	在 RTL 整体内嵌入一个 LTR 组件（如邮箱地址）
`isolate-override`	隔离 + 强制覆盖，元素内所有字符按 `direction` 显示，且外部无法干扰	用户输入预览、代码编辑器
`plaintext`	忽略元素自身的 `direction`，仅根据文本内容的首个强方向字符决定	展示用户生成内容，不依赖父容器方向

常见陷阱： 使用 bidi-override 会使数字、标点等中性字符完全跟随 direction，容易打乱数值或电话号码的阅读顺序。优先使用 embed 或 isolate。

2.3 作用于范围与继承

direction 可施加在 任何块级、行内块、表格单元格 上，其效果会向下传递到行内盒（但不改变 direction 的计算值继承）。
unicode-bidi 默认 normal，只对设置了 direction 且内容包含双向字符的元素生效。
两个属性共同决定了 start / end 逻辑方向，进而影响 margin-inline-start、text-align: start、inset-inline-start 等逻辑属性。

  调试技巧： 在 Chrome DevTools 中选中元素 → Styles 面板 → 勾选 “Show all computed styles”，搜索 “direction” 和 “unicode-bidi” 可快速查看计算值。若发现文本方向错乱，优先检查父级是否误设了 unicode-bidi: bidi-override。

2.4 常见用法示例

以下代码展示三种典型组合：

/* 1. 整块区域设为 RTL，内部嵌入一段 LTR 英文 */
.rtl-wrapper {
  direction: rtl;
  unicode-bidi: embed;
}
.english-embed {
  direction: ltr;
  unicode-bidi: embed;
}

/* 2. 强制所有字符右对齐（用于数字/固定格式） */
.force-rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}

/* 3. 隔离外部方向影响的 LTR 组件 */
.ltr-isolate {
  direction: ltr;
  unicode-bidi: isolate;
}

2.5 兼容性概要

现代浏览器（Chrome 49+, Firefox 53+, Safari 10+, Edge 79+）对 direction 和 unicode-bidi 的完整属性值均支持良好。唯一需要注意：

isolate、isolate-override、plaintext 在 IE11 及更早版本中不支持，需使用 embed 降级。
移动端 WebView（Android 4.4 以下）对 unicode-bidi 的部分值存在解析差异，建议在全局重置中配合 dir 属性兜底。

2.6 性能与稳定性

这两个属性仅影响渲染引擎的文本整形阶段，无显著性能开销。但需注意：

大量嵌套 unicode-bidi: embed 会增加 Bidi 算法复杂度，建议只在必要元素上使用。
配合 dir HTML 属性（而非 CSS）在页面加载时更快生效，可减少 FOUC（闪白）现象。