writing-mode 是 CSS 中控制文本排列方向的核心属性。它决定了文本是水平排列还是垂直排列，以及排列的流向。

常用值：
• horizontal-tb — 默认值，水平排列，从上到下
• vertical-rl — 竖排，从右到左（中文古籍、日文传统排版）
• vertical-lr — 竖排，从左到右（蒙古文等）
• sideways-rl / sideways-lr — 侧转竖排（实验性，Firefox 支持较好）

该属性会影响盒模型中的块流向和行内流向，是国际化排版的基础属性之一。

vertical-rl（从右到左）：文本先填满最右侧的列，然后向左扩展新列。这是中文和日文传统竖排的标准方式，符合古籍从右向左阅读的习惯。

vertical-lr（从左到右）：文本先填满最左侧的列，然后向右扩展新列。蒙古文等少数文字系统使用此方向。

对于中文竖排场景，vertical-rl 是最常用、最符合传统习惯的选择。古书的阅读顺序正是从右往左逐列阅读。

text-orientation 控制竖排模式下单个字符的旋转方式：

• upright — 所有字符保持直立。英文单词的每个字母都会单独直立显示，适合纯中文或希望英文也直立呈现的场景。
• mixed（默认）— CJK 字符直立，英文和数字旋转 90°。适合中英混排，英文单词保持可读性。
• sideways — 所有字符旋转 90° 侧躺。较少使用，需配合 writing-mode: vertical-rl 或 vertical-lr。

中文竖排推荐使用 upright，这样夹杂的英文单词每个字母也会直立，视觉效果统一。

writing-mode 和 text-orientation 在现代浏览器中均有良好支持：

✅ Chrome 48+ 完整支持
✅ Firefox 41+ 完整支持（包括 sideways 值）
✅ Safari 11+ 完整支持（包括 iOS Safari）
✅ Edge 79+ 完整支持
⚠️ IE 使用旧的 -ms-writing-mode 语法，需要额外处理

对于需要兼容老旧浏览器的项目，可考虑使用 CSS transform: rotate(90deg) 作为降级方案。本工具生成的代码适用于所有现代浏览器。

竖排文本中遇到英文和数字时，表现取决于 text-orientation 的设置：

• upright 模式：英文单词的每个字母单独直立，像中文汉字一样逐个排列。例如 "Hello" 会变成 H、e、l、l、o 依次竖排。
• mixed 模式：英文单词整体旋转 90°，保持单词的横向可读性，但需要读者歪头查看。

建议：如果文本以中文为主、仅偶尔出现英文单词，使用 upright 更美观统一。如果英文内容较多，建议考虑是否真的适合竖排，或使用 mixed 模式。

在竖排模式下，CSS 的 height 属性控制了每列的长度（即一列能容纳多少文字）。当文本内容超过这个高度时，会自动换到下一列。

关键属性：
• height — 控制每列的最大长度（本工具中的"列高度"）
• column-gap 或 padding — 控制列间距
• overflow — 控制溢出行为（auto 可滚动查看多列）
• line-height — 控制行间距（在竖排中表现为字符间距）
• letter-spacing — 控制字符间距

在本工具中调整"列高度"滑块即可直观感受换列效果。

当竖排文本内容超出容器时，滚动方向会因书写模式而改变：

• vertical-rl：文本列从右向左排列。内容溢出时，滚动条出现在水平方向（左右滚动），新列在左侧。
• vertical-lr：文本列从左向右排列。溢出时同样水平滚动，但新列在右侧。

这意味着在竖排长文本场景中，用户需要水平滚动来阅读完整内容，而非垂直滚动。设计网页布局时需要考虑这一行为对用户体验的影响。

竖排文本在以下场景中广泛应用：

📜 传统文化展示 — 古诗词、书法作品、古籍数字化
🎨 艺术设计 — 海报、 banner、品牌视觉中的东方美学元素
📖 电子书/阅读器 — 日文轻小说、中文竖排电子书
🏮 UI 装饰 — 侧边栏标签、装饰性文字、文化类网站
🎌 日文/中文内容 — 报纸标题、杂志排版、菜单设计

使用 CSS writing-mode 可以原生实现竖排，无需图片或复杂JS，对SEO友好且易于维护。