text-orientation必须与writing-mode: vertical-rl或vertical-lr配合使用才生效，单独设置会被浏览器静默忽略；mixed是中英混排竖排推荐值，使汉字直立、ascii字符顺时针旋转90°，符合出版规范。

text-orientation 不能单独生效，必须和 writing-mode: vertical-rl 或 vertical-lr 配合使用；否则浏览器直接忽略该声明。

为什么只设 text-orientation 没反应

它是个“依赖型属性”：仅在 writing-mode 处于垂直模式时才起作用。常见错误是只写 text-orientation: mixed，但没配 writing-mode，结果文字照常横排，控制台也不报错——纯静默失效。

• 检查是否漏了 writing-mode: vertical-rl（中文竖排首选）或 vertical-lr（如蒙古文）
• horizontal-tb 下设 text-orientation 完全无效
• Safari 对 text-orientation 的支持仍有细微偏差，真机验证不可跳过

text-orientation: mixed 是中英混排的默认安全值

它让汉字直立、ASCII 字母和数字顺时针旋转 90°，括号、句号等标点自动适配方向——符合出版规范，可读性最强。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 别被“upright 更整齐”误导：text-orientation: upright 会让 “HTML” 变成每字母一行，失去语义和识别度
• 数字如 2026 在 upright 下上下堆叠，数值感崩解；mixed 则保持可读旋转形态
• 标点位置在 upright 下极易错乱：英文句号 . 跑到行首，连字符 - 方向异常

text-orientation: upright 只适合极少数场景

纯中文标题、印章式设计、或明确要求所有字符物理朝向一致时才考虑；日常正文、带数字/英文的段落一律回避。

• 若真需英文“竖向对齐”，优先用 <span></span> 包裹单字符 + transform: rotate(90deg)，而非依赖 upright
• vertical-lr + upright 组合视觉陷阱最多：字体非等宽时字母左右错位，line-height 难调，基线对不齐
• 某些中文字体（如 Windows 自带 SimSun）在 Chrome 新版中开启 upright 会触发字重异常

别忘了 font-family 和 line-height 的连锁影响

竖排不是加两个 CSS 属性就完事；字体是否支持竖排、行距如何定义、字距在垂直方向的实际效果，都会叠加影响最终呈现。

• 必须选明确支持竖排的字体，例如 "Noto Serif CJK SC"、"Source Han Serif SC"
• line-height 控制的是“字与字之间的垂直距离”，mixed 下旋转英文高度略大于汉字，建议从 1.4 起调
• letter-spacing 在竖排中实际影响的是“字与字之间的垂直偏移量”，不是水平间距

真正麻烦的从来不是写哪几行 CSS，而是混合文本在不同浏览器里断行位置、标点悬挂、基线对齐的细微差异——上线前务必在 iOS Safari、Chrome for Android、桌面端 Edge 真机上逐字核对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！