一、竖排文字的技术背景与需求场景

在中文、日文、韩文等东亚语言体系中，竖排文字是传统书籍、古籍、书法作品的常见排版方式。随着Web技术发展，设计师开始在网页中复现这种经典排版效果，用于文化展示、古籍数字化、艺术创作等场景。相较于JavaScript方案，纯CSS实现具有轻量级、可维护性强的优势。

1.1 竖排文字的核心应用场景

• 古籍数字化项目中的原文展示
• 传统书法艺术网站的标题设计
• 日式/中式风格网页的视觉元素
• 移动端竖屏阅读模式的适配
• 广告海报中的创意文字排版

1.2 传统实现方式的局限性

早期开发者常采用以下方案：

• 文字逐个定位（维护成本高）
• 图片替代（SEO不友好）
• JavaScript动态计算（性能损耗）
  这些方案存在扩展性差、维护困难等问题，CSS原生方案成为最优解。

二、CSS竖排文字实现方案详解

2.1 writing-mode属性详解

writing-mode是控制文本方向的核心属性，支持以下值：

.vertical-text {
  writing-mode: vertical-rl; /* 竖排从右到左 */
  /* 或 */
  writing-mode: vertical-lr; /* 竖排从左到右 */
  /* 或 */
  writing-mode: horizontal-tb; /* 默认水平排版 */
}

2.1.1 方向选择依据

• vertical-rl：符合中文古籍排版习惯（从右向左）
• vertical-lr：适用于现代竖排设计（从左向右）
• 浏览器兼容性：所有现代浏览器均支持

2.2 text-orientation属性控制

当使用竖排时，需要配合text-orientation调整字符方向：

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 保持标点符号正确方向 */
  /* 或 */
  text-orientation: upright; /* 强制字符直立 */
}

2.2.1 实际应用场景

• 中文排版：推荐mixed（自动处理标点）
• 日文排版：可能需要upright（保持假名方向）
• 艺术字体：可尝试sideways（90度旋转）

2.3 文本方向组合方案

完整竖排方案需组合多个属性：

.traditional-layout {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  direction: rtl; /* 控制块级元素方向 */
  unicode-bidi: bidi-override; /* 双向文本处理 */
}

三、进阶排版技巧与兼容处理

3.1 行列对齐控制

使用text-combine-upright处理数字/英文：

.date-display {
  text-combine-upright: all; /* 压缩多字符为单列宽度 */
}
/* 示例：将"2023"压缩显示为单列 */

3.2 跨浏览器兼容方案

/* 现代浏览器 */
.vertical {
  writing-mode: vertical-rl;
}
/* 旧版WebKit浏览器 */
.vertical {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* IE兼容方案 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .vertical {
    /* 使用transform旋转替代 */
    transform: rotate(90deg);
    transform-origin: left top;
    width: 20px; /* 控制列宽 */
    white-space: nowrap;
  }
}

3.3 响应式竖排设计

@media (max-width: 768px) {
  .vertical-text {
    writing-mode: horizontal-tb; /* 小屏幕切换为横排 */
    writing-mode: unset;
  }
}

四、实用案例代码库

4.1 基础竖排实现

<div class="simple-vertical">
  <p>这是竖排文字示例</p>
</div>
<style>
.simple-vertical {
  writing-mode: vertical-rl;
  height: 300px;
  border: 1px solid #ccc;
  padding: 20px;
}
</style>

4.2 古籍风格排版

<div class="ancient-book">
  <div class="title">古籍标题</div>
  <div class="content">正文内容从右向左竖排显示</div>
</div>
<style>
.ancient-book {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "SimSun", serif;
  line-height: 2.5;
  max-width: 400px;
  margin: 0 auto;
}
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2em;
}
</style>

4.3 混合排版方案

<div class="hybrid-layout">
  <div class="vertical-column">竖排内容</div>
  <div class="horizontal-section">横排说明</div>
</div>
<style>
.hybrid-layout {
  display: flex;
  height: 400px;
}
.vertical-column {
  writing-mode: vertical-rl;
  padding: 20px;
  border-right: 1px solid #eee;
}
.horizontal-section {
  padding: 20px;
  flex: 1;
}
</style>

五、性能优化与最佳实践

5.1 渲染性能考虑

• 避免在大型文本块中频繁切换排版方向
• 对竖排元素设置明确的高度/宽度
• 使用will-change: transform优化动画

5.2 可访问性建议

/* 增强可读性 */
.vertical-text {
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* 打印优化 */
@media print {
  .vertical-text {
    writing-mode: horizontal-tb;
  }
}

5.3 调试技巧

• 使用浏览器开发者工具的”Layout”面板检查文本方向
• 通过getComputedStyle()验证实际应用的CSS值
• 测试不同字体家族的竖排显示效果

六、未来发展方向

随着CSS规范的演进，竖排文字将获得更完善的支持：

• CSS Text Module Level 4新增的text-space-collapse属性
• 变量字体对竖排场景的优化
• 浏览器对复杂脚本（如蒙古文、满文）竖排的支持

开发者应持续关注：

• caniuse.com的writing-mode支持数据
• W3C CSS工作组的最新草案
• 主流框架（如Bootstrap）的竖排组件开发

通过掌握这些CSS原生方案，开发者可以高效实现各种竖排文字需求，在保持代码简洁的同时获得最佳的跨平台兼容性。实际项目中建议从简单场景入手，逐步掌握复杂排版技巧，最终实现专业级的文字排版效果。