text-orientation仅在writing-mode为vertical-rl或vertical-lr时生效；mixed使CJK直立、ASCII旋转90°，适合现代中文竖排；upright使所有字符直立，易致英文不可读；sideways已废弃。
text-orientation 只在垂直书写模式下生效，单独设置它毫无作用；必须配合 writing-mode: vertical-rl 或 vertical-lr 才能起效。
text-orientation 必须和 writing-mode 一起用
很多人直接写 text-orientation: mixed 发现没反应，就是因为漏了 writing-mode。CSS 规范明确规定：该属性仅适用于 writing-mode 值为 vertical-rl 或 vertical-lr 的元素。
-
writing-mode: vertical-rl是中文竖排的默认流向（从上到下、行从右向左） - 没有
writing-mode，text-orientation就像给水平文本“调旋转角度”——根本不存在这个上下文 - 浏览器会静默忽略该声明，DevTools 中可能显示为 strike-through 灰色
mixed vs upright：中英文混合场景怎么选
这是最常踩坑的地方。两种值对拉丁字符的处理逻辑完全不同：
-
text-orientation: mixed（默认）：CJK 字符直立，ASCII 字母和阿拉伯数字顺时针旋转 90°，括号等标点自动适配方向 —— 这是现代中文网页竖排的推荐值 -
text-orientation: upright：所有字符（含英文字母、数字、标点）全部直立不旋转 —— 英文变成一列竖着的字母，基本不可读，仅适合纯中文古籍或特殊艺术排版 - 别用
upright处理含 URL、年份、人名缩写（如 “W. Zhang”）的文本，复制粘贴后顺序错乱、语义崩坏
sideways 已被弃用，别再试了
text-orientation: sideways 在部分旧文档里出现过，但已被 CSS Writing Modes Level 4 移除。当前主流浏览器（Chrome 120+、Firefox 125+、Safari 17+）已不再支持该值，设了也无效。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 如果你看到效果，大概率是浏览器兼容层 fallback 到了
mixed - 不要在生产环境写
sideways或已废弃的sideways-right - 想让所有字符统一顺时针转 90°？老老实实用
transform: rotate(90deg)+display: inline-block，但注意它破坏换行和选择逻辑
direction 和 unicode-bidi 会干扰 text-orientation
即使写了 writing-mode: vertical-rl; text-orientation: mixed，如果父容器或自身设置了 direction: rtl 或 unicode-bidi: bidi-override，某些 Unicode 双向字符（比如中文括号、全角数字）会被重排序，导致「)」出现在左边、「(」在右边，或者「2026」显示成「6202」。
- 竖排中文场景下，
direction应保持默认ltr（这是writing-mode: vertical-rl的推荐基线） - 移除所有不必要的
direction、unicode-bidi声明，尤其避免嵌套bdi元素 - 若必须处理双向内容（如夹杂阿拉伯数字的古籍引文），优先用 Unicode LTR/RTL 标记符（
\u200E/\u200F）而非 CSS 属性干预
真正要让竖排中文既可用又健壮，关键不是堆砌属性，而是守住三件事：先设 writing-mode，再选对 text-orientation 值，最后清掉所有干扰 direction 的副作用。字体是否支持竖排、line-height 是否足够、复制粘贴是否保序——这些细节比属性名本身更决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
