中文古风竖排必须用 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”会挤在左侧，破坏视觉重心。
- 给数字/英文包裹
<span class="mono-v">2024</span>，再设.mono-v { text-orientation: mixed; }，让它们保持正立且宽度适配汉字 - 中文引号、括号需用全角字符（“”、（）），半角符号（""、()）在
vertical-rl下会横置且位置漂移 - 行末标点若被截断（如“。”跑到下一行开头），加
line-break: strict或overflow-wrap: normal控制断行策略
配合direction和text-align才能控制阅读起点
writing-mode 只管流向，不决定“从哪开始读”。古籍通常右起（第一列在最右），这靠组合属性实现：
-
direction: rtl让块级容器内元素从右往左布局（影响浮动、inline顺序） -
text-align: right使每行文字右对齐，确保首字顶格靠右 - 若内容含
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>或<div> 块级嵌套，需在父容器设 <code>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的传导逻辑。一个<span></span>没加text-orientation，或者一行里混了半角数字又没包裹，整段就显得“不古”。 - 测试方法：给元素设
