dir属性是文本方向的语义起点，必须优先于CSS direction使用，直接影响Unicode双向算法行为；writing-mode: vertical-rl是中文竖排唯一合规方案，需配合text-orientation、line-height无单位值及字体实测。
dir属性才是文本方向的语义起点
HTML文档里控制文字排版方向，dir 属性必须优先于 direction CSS 属性使用。它不是“可选样式”，而是参与 Unicode 双向算法（Bidi Algorithm）的底层信号——影响光标移动、选中文本顺序、数字分组、括号包裹逻辑，甚至屏幕阅读器解析方式。
常见错误是只写 direction: rtl，结果阿拉伯语输入框里光标乱跳、复制粘贴后数字顺序错乱、英文括号翻转成「)」在左、「(」在右。这些都不是渲染问题，是逻辑顺序没被正确声明。
-
dir="rtl"应直接加在<html>或<body>上，作为整页基线；局部切换再用<div dir="ltr"> -
dir="auto"不可靠：中文开头默认ltr，阿拉伯字母混在中文后也不会触发重排，动态插入内容更不生效 -
dir会继承，但direction不会触发子元素的 Bidi 重排——后者只改视觉对齐，不改文本流
writing-mode: vertical-rl 是中文竖排唯一合规方案
要让中文在 HTML 中真正竖排，writing-mode: vertical-rl 是唯一能通过可访问性检测、支持文本选择与复制、符合出版逻辑的标准值。别用 transform: rotate(90deg) 或每个字套 <span>，它们破坏语义、光标定位和换行逻辑。
竖排失效往往不是语法错，而是布局限制：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
display: inline或inline-block→ 改为block或inline-flex - 用了
float或position: absolute→ 这些会绕过现代布局引擎，writing-mode被忽略 - 没设明确宽度（如
width: 6em）→ 浏览器无法判断“一行多宽”，换行崩溃，文字挤成单列溢出
搭配 text-orientation: mixed，汉字直立、英文字母和数字自动顺时针转 90°；若内容含大量英文缩写（如 “API”），可改用 text-orientation: upright，但需接受纯英文段落可读性下降。
direction 和 unicode-bidi 混用极易破坏竖排标点
即使设置了 writing-mode: vertical-rl，如果容器或祖先元素有 direction: rtl 或嵌套了 <bdi>，中文括号、阿拉伯数字可能被双向算法错误重排序——比如「（你好）」变成「）你好（」，或数字列错位。
竖排中文应显式剥离双向干扰：
- 去掉所有不必要的
direction声明，让其保持默认ltr（这是writing-mode: vertical-rl下的推荐基线） - 避免在竖排容器内使用
unicode-bidi: bidi-override，它会强制覆盖 Unicode 标准行为，导致括号、引号、顿号等标点位置异常 - 表单 placeholder 方向需单独用
::placeholder伪类控制，direction对它无效
white-space 和 line-height 在竖排中作用方向不变但单位敏感
竖排后 line-height 仍是“行间距”，只是方向已转为垂直。用 px 值会随字号变化失衡，建议统一用无单位数值（如 line-height: 1.5）。
换行行为由 white-space 控制，不是靠 <br>：
-
white-space: normal：允许在空格、中文标点处折行，适合长段落 -
white-space: pre-line：保留换行符\n，合并多余空格，适合手动分段文案 -
white-space: nowrap：禁用换行，竖排下文字直接溢出容器，务必避免
若含英文单词（如 “JavaScript”），加 word-break: keep-all 防止字母间断开；字体本身的支持度常被忽略——思源黑体、Noto Sans CJK 表现稳定，微软雅黑在竖排下可能出现标点偏移，上线前必须实测。
