dir属性是文本方向的语义起点，必须优先于css direction使用，直接影响unicode双向算法行为；writing-mode: vertical-rl是中文竖排唯一合规方案，需配合text-orientation、line-height无单位值及字体实测。

dir属性才是文本方向的语义起点

HTML文档里控制文字排版方向，dir 属性必须优先于 direction CSS 属性使用。它不是“可选样式”，而是参与 Unicode 双向算法（Bidi Algorithm）的底层信号——影响光标移动、选中文本顺序、数字分组、括号包裹逻辑，甚至屏幕阅读器解析方式。

常见错误是只写 direction: rtl，结果阿拉伯语输入框里光标乱跳、复制粘贴后数字顺序错乱、英文括号翻转成「)」在左、「(」在右。这些都不是渲染问题，是逻辑顺序没被正确声明。

• dir="rtl" 应直接加在 或 上，作为整页基线；局部切换再用 <div dir="ltr"> <li> <code>dir="auto" 不可靠：中文开头默认 ltr，阿拉伯字母混在中文后也不会触发重排，动态插入内容更不生效
• dir 会继承，但 direction 不会触发子元素的 Bidi 重排——后者只改视觉对齐，不改文本流

writing-mode: vertical-rl 是中文竖排唯一合规方案

要让中文在 HTML 中真正竖排，writing-mode: vertical-rl 是唯一能通过可访问性检测、支持文本选择与复制、符合出版逻辑的标准值。别用 transform: rotate(90deg) 或每个字套 <span></span>，它们破坏语义、光标定位和换行逻辑。

竖排失效往往不是语法错，而是布局限制：

• 父容器是 display: inline 或 inline-block → 改为 block 或 inline-flex
• 用了 float 或 position: absolute → 这些会绕过现代布局引擎，writing-mode 被忽略
• 没设明确宽度（如 width: 6em）→ 浏览器无法判断“一行多宽”，换行崩溃，文字挤成单列溢出

搭配 text-orientation: mixed，汉字直立、英文字母和数字自动顺时针转 90°；若内容含大量英文缩写（如 “API”），可改用 text-orientation: upright，但需接受纯英文段落可读性下降。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载

direction 和 unicode-bidi 混用极易破坏竖排标点

即使设置了 writing-mode: vertical-rl，如果容器或祖先元素有 direction: rtl 或嵌套了 <bdi></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 表现稳定，微软雅黑在竖排下可能出现标点偏移，上线前必须实测。