CSS writing-mode 书写模式生成器

writing-mode 是 CSS 的书写模式属性，决定文本流的方向——文字按什么方向排列、行按什么方向换行。 它解决了三大痛点：一是竖排文字需要 JavaScript 或 transform 模拟，体验差且不可选； 二是多语言排版（中文/日文竖排、阿拉伯文从右到左、蒙古文垂直从左到右）需要不同书写方向； 三是古籍排版、杂志竖排标题等设计场景缺乏原生方案。 使用 writing-mode 只需一行 CSS 即可切换书写方向，浏览器原生支持文本选择、光标移动、可访问性， 远优于 transform: rotate 等模拟方案。

horizontal-tb（默认）：水平方向，从上到下换行。中英文标准横排。
vertical-rl：垂直方向，从右到左换行。中文/日文传统竖排（书页从右往左翻）。
vertical-lr：垂直方向，从左到右换行。蒙古文传统竖排。
sideways-rl：侧向，从右到左，文字旋转 90°（西文侧排）。
sideways-lr：侧向，从左到右，文字旋转 -90°。
关键差异：vertical-* 文字本身不旋转（中文方块字正立），sideways-* 文字整体旋转 90°（西文侧躺）。 中文竖排应选 vertical-rl，蒙古文选 vertical-lr，西文侧排选 sideways-*。

text-orientation 仅在 vertical-* 模式下生效，决定字符在垂直行中的朝向：
mixed（默认）：CJK 字符（中文/日文/韩文）正立，拉丁字母、数字侧躺 90°。 适合日文竖排（汉字正立，假名与西文侧排）。
upright：所有字符正立，包括拉丁字母和数字。适合纯中文竖排、古籍排版。
sideways：所有字符侧躺 90°（包括 CJK）。适合横向标签的垂直排列、蒙古文。
选型：日文混排用 mixed，纯中文古籍用 upright，西文侧排用 sideways。

direction 决定文本的水平流向：
ltr（默认）：从左到右。中文、英文、法文等大多数语言。
rtl：从右到左。阿拉伯文、希伯来文、波斯文等 RTL 语言。
注意：在 vertical-* 模式下，direction 影响行的换行方向 （vertical-rl + ltr 行从右往左换，vertical-lr + rtl 行从左往右换）。
在 horizontal-tb 模式下，direction 决定文本水平流向。 阿拉伯文页面必须设置 direction: rtl，否则文本顺序错误。
配合 unicode-bidi 属性可处理混合方向文本（如中英混排中的阿拉伯文段落）。

text-combine-upright 让多个字符在垂直行中横向组合显示为一个字符宽度， 解决竖排文本中数字/英文需要横排的需求：
none（默认）：不组合，每个字符单独垂直排列。
all：行内所有连续的字符横向组合为一个单元。
digits <n>：仅数字横向组合，n 为最大位数（2-4）。 例如 text-combine-upright: digits 2 让"2026"中的"20"和"26"分别横排显示。
应用场景：中文古籍中的年号、竖排表格中的数字、日文竖排中的西文数字。
本工具的"数字横排"预设展示了 digits 2 效果。

两者都是垂直书写，差别在行的换行方向：
vertical-rl：第一行在最右，后续行向左换行。模拟中文/日文古籍翻页（从右往左翻）。
vertical-lr：第一行在最左，后续行向右换行。模拟蒙古文、满文传统书写。
中文古籍：用 vertical-rl + text-orientation: upright， 所有汉字正立，行从右往左排列。本工具的"古籍竖排"预设。
蒙古文：用 vertical-lr + text-orientation: sideways， 蒙古文字符侧躺（蒙古文传统就是侧躺书写），行从左往右排列。本工具的"蒙古文"预设。
现代竖排：中文杂志、日文漫画常用 vertical-rl + mixed， 兼容西文与数字的侧排显示。

transform: rotate 是视觉变换，仅改变渲染位置，不改变文本流：
- 文本选择方向错误（横排文本旋转后仍按横排选择）
- 光标移动方向错误（按左右键仍按横排逻辑移动）
- 屏幕阅读器朗读顺序错误（按 DOM 顺序朗读，非视觉顺序）
- 无法自动换行（超出容器宽度不会自动断行）
writing-mode 是语义化的书写模式，改变文本流本身：
- 文本选择按视觉方向（竖排时按垂直方向选择）
- 光标移动符合视觉预期（按上下键移动）
- 屏幕阅读器按视觉顺序朗读
- 自动换行（按行高换行）
- 支持混合方向文本（unicode-bidi 配合）
因此所有需要改变文本流的场景都应优先用 writing-mode，transform: rotate 仅用于装饰性旋转。

浏览器兼容性：writing-mode 在 Chrome 48+、Firefox 36+、Safari 11+ 全面支持， 覆盖 95%+ 的现代浏览器。旧版 IE 支持 -ms-writing-mode（值不同，需单独处理）。
sideways-rl / sideways-lr：Chrome 91+、Firefox 69+ 支持，Safari 16+ 支持。 兼容性较新，使用前需确认目标浏览器支持。
text-orientation：Chrome 53+、Firefox 36+、Safari 10.1+ 支持。
text-combine-upright：需带 -webkit- 前缀（Chrome/Safari）， Firefox 48+ 支持标准属性。digits 值浏览器支持不一，建议降级为 all。
注意事项：
1. iOS Safari 对 sideways-* 支持有限，移动端优先用 vertical-*
2. 老版本浏览器可能需要 -webkit-writing-mode 前缀
3. 竖排文本的换行符、对齐方式可能与横排不同，需测试
4. 垂直模式下 line-height 控制行间距（垂直方向），与横排不同
本工具：所有处理在浏览器本地完成，零上传、零追踪、零广告。