一、竖排文字的应用场景与CSS优势

在中文网页设计中，竖排文字常见于古籍数字化、书法展示、日式风格网站等场景。传统实现方式依赖图片或JavaScript，存在维护成本高、SEO不友好等缺陷。CSS原生方案具有三大优势：语义化HTML结构、动态内容适配、轻量级性能表现。

现代CSS规范已完整支持竖排文字，通过writing-mode、text-orientation、text-combine-upright等属性组合，可实现从传统古籍到现代设计的各种排版需求。最新Can I Use数据显示，这些属性在Chrome 90+、Firefox 89+、Safari 14+等现代浏览器中支持率达98%以上。

二、核心CSS属性详解

1. writing-mode属性

该属性控制文本流方向，包含三个关键值：

horizontal-tb（默认值）：水平从左到右
vertical-rl：垂直从右到左（传统中文/日文）
vertical-lr：垂直从左到右（蒙古文等）

.vertical-text {
  writing-mode: vertical-rl;
  height: 300px; /* 必须指定容器高度 */
  border: 1px solid #ccc;
}

2. text-orientation属性

控制字符方向，解决竖排时拉丁字母的显示问题：

mixed：保持拉丁字母旋转90度（默认）
upright：强制所有字符直立显示
sideways：字符侧向显示

.upright-latin {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

3. text-combine-upright属性

处理数字和短文本的横向压缩显示：

.date-display {
  text-combine-upright: all;
}
/* 显示效果：2023年 → 2023年（数字横向紧凑排列） */

三、四种典型竖排方案实现

方案1：传统中文竖排

<div class="chinese-vertical">
  <p>这是传统中文竖排文字示例</p>
</div>

.chinese-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 400px;
  padding: 20px;
  background: #f5f5f5;
}

方案2：现代设计竖排（含拉丁字符）

.modern-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Noto Serif SC', serif;
  line-height: 2.5;
  letter-spacing: 0.2em;
}

方案3：混合排版（竖排+横排标题）

<div class="mixed-layout">
  <h2 class="horizontal-title">章节标题</h2>
  <div class="vertical-content">
    <p>正文内容...</p>
  </div>
</div>

.mixed-layout {
  display: flex;
  height: 500px;
}
.horizontal-title {
  writing-mode: horizontal-tb;
  align-self: flex-start;
}
.vertical-content {
  writing-mode: vertical-rl;
  flex: 1;
}

方案4：响应式竖排（媒体查询适配）

.responsive-vertical {
  writing-mode: horizontal-tb;
}
@media (min-width: 768px) {
  .responsive-vertical {
    writing-mode: vertical-rl;
    height: 600px;
  }
}

四、常见问题解决方案

1. 容器高度控制

竖排文本必须指定明确高度，推荐使用：

固定像素值（适合已知内容量）
min-height + max-height组合
viewport单位（如100vh）

2. 标点符号处理

中文标点默认居中显示，如需调整：

.punctuation-fix {
  text-combine-upright: none;
  text-orientation: mixed;
}

3. 浏览器兼容性

针对旧版浏览器的回退方案：

.vertical-text {
  /* 现代浏览器 */
  writing-mode: vertical-rl;
  /* 旧版WebKit */
  -webkit-writing-mode: vertical-rl;
  /* 旧版Firefox */
  -moz-writing-mode: vertical-rl;
  /* 终极回退方案 */
  transform: rotate(90deg);
  transform-origin: left top;
  width: 300px;
  height: 20px;
  white-space: nowrap;
}

五、性能优化建议

避免在大型文本块中频繁切换排版方向
对竖排元素使用will-change: transform提升渲染性能
复杂布局时考虑使用CSS Grid的grid-auto-flow: row dense
字体选择建议：
- 中文：Noto Serif SC、Source Han Serif
- 日文：Noto Serif JP
- 混合文本：系统默认serif字体

六、实战案例解析

案例1：古籍数字化项目

<div class="ancient-book">
  <div class="book-title">道德經</div>
  <div class="book-content">
    <p>道可道非常道名可名非常名</p>
    <!-- 更多章节内容 -->
  </div>
</div>

.ancient-book {
  display: grid;
  grid-template-columns: 80px 1fr;
  height: 80vh;
}
.book-title {
  writing-mode: vertical-rl;
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  border-right: 2px solid #8b4513;
}
.book-content {
  writing-mode: vertical-rl;
  padding: 30px;
  line-height: 2.8;
  column-count: 2;
  column-gap: 40px;
}

案例2：日式和风网站

.japanese-style {
  writing-mode: vertical-rl;
  background: url('washi-pattern.jpg');
  color: #3a2e28;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
}

七、未来发展方向

CSS Text Module Level 4草案已提出：

text-space-collapse属性控制空格压缩
增强的text-combine功能支持更多字符组合
竖排分栏的自动流控制

开发者应关注：

Chrome DevTools中的3D视图调试竖排布局
Firefox的布局面板对writing-mode的可视化支持
Web Inspector对text-orientation的实时编辑功能

通过系统掌握这些CSS技术，开发者可以高效实现各种竖排文字需求，既保持代码的可维护性，又确保跨浏览器的兼容性。实际项目中建议采用渐进增强策略，先确保基础功能可用，再逐步添加高级排版效果。

CSS竖排文字实战指南：从原理到代码的完整解析