HTML中使用text-orientation控制竖排字符方向的方法-html教程-PHP中文网

text-orientation必须与writing-mode配合使用，仅设text-orientation无效；mixed是中英混排竖排的默认推荐值，使汉字直立、ascii字符顺时针旋转90°，符合出版规范。

html中使用text-orientation控制竖排字符方向的方法

text-orientation必须和writing-mode一起用

单独设 text-orientation 没有效果，浏览器会直接忽略。它只是个“辅助属性”，只在 writing-mode 为 vertical-rl 或 vertical-lr 时才起作用。如果你写了 text-orientation: mixed 但没配 writing-mode，控制台不会报错，但文字照样横着排。

mixed 是中文竖排的默认且推荐值

text-orientation: mixed 让汉字保持直立，ASCII 字母和数字顺时针旋转 90°，括号、句号等标点也会自动适配方向——这是最符合传统出版习惯的方案。常见错误是误以为 upright 更“整齐”，结果英文变成一列无法识别的竖线，比如 “HTML” 显示成：

H
T
M
L

这不是排版，是断字。

混合文本（中英混排、带数字标题）一律优先用 mixed
upright 仅适合纯中文场景，或设计强制要求所有字符物理朝向一致（如印章效果）
sideways 几乎不用：它会让所有字符横向堆叠，实际效果接近未竖排

vertical-lr + upright 组合容易出视觉陷阱

有人想让英文也“像汉字一样竖着读”，就写 writing-mode: vertical-lr; text-orientation: upright。表面看每个字母都占一行，但问题立刻暴露：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

标点位置错乱：英文句号 . 会出现在行首而非行尾
连字符 - 和斜杠 / 方向异常，阅读节奏被打断
数字序列如 2026 变成上下排列，丧失数值可读性
某些字体（尤其非等宽字体）下字母宽度不均，导致左右错位

真正需要英文竖向对齐的场景，应优先考虑 SVG 文本或分字符 span + transform: rotate(90deg)，而不是依赖 text-orientation: upright。

别忽略 font-family 和 line-height 的连锁影响

竖排时，line-height 实际控制的是“行间距”，也就是字与字之间的垂直距离；而 letter-spacing 控制的是同一行内字符的水平偏移——但在竖排下，这个“水平”其实是垂直方向上的字距。所以：

中文字体必须支持竖排（如 "Noto Serif CJK SC"、"Source Han Serif SC"），Windows 默认的 "SimSun" 在部分 Chrome 版本中会出现字重异常
line-height: 1.2 在竖排中可能显得过挤，建议从 1.4 起调
若开启 text-orientation: mixed，旋转后的英文高度会略大于汉字，此时 line-height 需兼顾两者基线对齐

复杂点在于：这些参数在不同浏览器渲染引擎里表现不一，尤其是 Safari 对 text-orientation 的支持仍存在细微偏差，上线前务必在真机上验证混合文本的断行与对齐。