中文古风竖排必须用 writing-mode: vertical-rl，它实现从上到下、右到左的排列，符合传统雕版逻辑，且兼容数字西文正向显示与标点自动避头尾。

竖排文字的writing-mode基础值选哪个

writing-mode 实现竖排，核心是选对值：中文古风竖排必须用 writing-mode: vertical-rl。不是 vertical-lr，也不是 sideways-lr——前者在部分浏览器（如旧版 Safari）渲染异常，后者会让字旋转90°，完全失去“直书”感。

• vertical-rl 表示文字从上到下、行从右到左排列，符合传统雕版、线装书的排版逻辑
• 若内容含阿拉伯数字或西文，它们默认保持正向（不旋转），这是预期行为；若需强制旋转，得额外加 text-orientation: upright
• 注意：IE 仅支持 -ms-writing-mode: tb-rl（已废弃），现代项目可忽略，但若需兼容旧内网系统，得加前缀

标点、数字、西文的对齐问题怎么调

竖排时，中文标点（如，。！？；：）默认会自动“避头尾”并居中对齐，但数字和英文常错位——比如 2024年 的“2024”会挤在左侧，破坏视觉重心。

• 给数字/英文包裹 2024，再设 .mono-v { text-orientation: mixed; }，让它们保持正立且宽度适配汉字
• 中文引号、括号需用全角字符（“”、（）），半角符号（""、()）在 vertical-rl 下会横置且位置漂移
• 行末标点若被截断（如“。”跑到下一行开头），加 line-break: strict 或 overflow-wrap: normal 控制断行策略

配合direction和text-align才能控制阅读起点

writing-mode 只管流向，不决定“从哪开始读”。古籍通常右起（第一列在最右），这靠组合属性实现：

• direction: rtl 让块级容器内元素从右往左布局（影响浮动、inline顺序）
• text-align: right 使每行文字右对齐，确保首字顶格靠右
• 若内容含
  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  或
  块级嵌套，需在父容器设 direction: rtl，否则子块仍按 ltr 排列，导致列序错乱

  font-family选错会导致竖排崩坏

  不是所有字体都支持竖排渲染。思源黑体、Noto Serif CJK、霞鹜文楷等开源字体明确声明支持 vertical-rl，但很多商用字体（尤其旧版微软雅黑）会把汉字压扁或错位。

  • 测试方法：给元素设 writing-mode: vertical-rl 后检查是否出现字形拉伸、间距断裂、标点悬浮
  • 必须显式声明 font-feature-settings: "vert"（部分字体需开启垂直替代特性）
  • 避免用 font: 16px "Microsoft YaHei" 这类写法——它在 Safari 上可能回退到不支持竖排的 fallback 字体

  古风竖排真正的难点不在 writing-mode 本身，而在于字体支持、标点上下文处理、以及多层嵌套时 direction 和 text-align 的传导逻辑。一个 没加 text-orientation，或者一行里混了半角数字又没包裹，整段就显得“不古”。

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