writing-mode: vertical-rl 是唯一可靠、语义正确、可访问的中文竖排方案，需配合 text-orientation: mixed 和 block 级容器，避免内联元素、float 或 absolute 定位导致失效。
writing-mode: vertical-rl 是唯一可靠、语义正确、可访问的竖排方案，其他方式都会破坏复制、选中、屏幕阅读器支持。
必须用 writing-mode: vertical-rl，别选错值
vertical-rl 表示“从上到下、行从右到左”，这是中文传统竖排的标准流向。它能正确处理括号方向（如「（」在上、「）」在下）、数字对齐、标点换行逻辑。
-
vertical-lr会让行从左到右推进，导致中文段落右侧留白异常，括号顺序反向，慎用 -
sideways-rl是把整段文字当图形顺时针转90°，所有字符横躺，不可读 -
horizontal-tb是默认值，不是竖排 - IE10 及更早需
-ms-writing-mode: tb-rl，但已无实际维护必要
text-orientation: mixed 是中文竖排的标配组合
不加 text-orientation，旧版 Safari 可能默认走 sideways，导致汉字歪斜、英文横躺；设成 upright 又会让数字和英文字母直立堆叠，完全不可读。
-
text-orientation: mixed：汉字 upright，ASCII 字母/数字自动顺时针旋转 90°，括号自动翻转适配 - 纯数字列（如页码、年份）可用
text-orientation: upright，但仅限 2–4 个连续数字 - 别在中文正文里用
upright，它会让 “2024” 显示成四行小字，且阅读顺序错乱
容器样式必须配合，否则 writing-mode 不生效
常见失效不是写错了属性，而是父级或自身 display 模式不兼容。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 内联元素（
span、a）默认不支持writing-mode，需显式设display: inline-block或block - 避免
float、position: absolute，它们会触发旧式布局，绕过 writing-mode 的文本流控制 - 必须设宽度（如
width: 2em）或高度（竖排下 width 控制的是“行宽”，即每列占多少水平空间） - 换行靠
white-space: normal（推荐）或pre-line，禁用nowrap，否则文字直接溢出
移动端和 Safari 渲染要注意这些细节
Safari 13+ 已完整支持，但某些嵌套场景（比如 button > span）仍有微小渲染延迟或首帧错位。
- 别用
direction或unicode-bidi干预，它们会干扰竖排下的双向字符重排序，让「（」跑右边、「）」跑左边 -
line-height建议用无单位数值（如1.6），避免 px 值在不同字号下挤压或撑开 - 不需要
text-combine-upright，它只对短数字串有效，且在中文段落里基本被忽略 - 字体本身需支持竖排特性（如 Noto Sans CJK、Source Han Serif），部分西文字体在竖排下标点位置异常
真正难的不是写对那两行 CSS，而是意识到 writing-mode 改变的是整个文本流模型——它会影响换行、对齐、甚至内联元素的排列顺序。一旦加了，就得通盘考虑容器尺寸、white-space、line-height 和字体行为，不能只当它是“让字转个向”的快捷开关。
