文字竖向排列的技术背景与需求分析

在中文排版、古籍数字化、艺术海报设计等场景中，文字竖向排列是常见需求。传统DOM布局依赖CSS属性实现，而Canvas作为位图绘制技术，需通过编程计算字符位置。两种方案各有优劣：DOM方案更易维护但性能受限，Canvas方案性能更强但需手动控制细节。

DOM实现方案详解

1. CSS writing-mode属性

现代浏览器支持writing-mode: vertical-rl（从右到左）和vertical-lr（从左到右）属性，可快速实现竖排：

<div class="vertical-text">竖向排列文字</div>
<style>
.vertical-text {
  writing-mode: vertical-rl;
  height: 300px;
  border: 1px solid #ccc;
  padding: 20px;
}
</style>

优势：简单易用，支持响应式布局。
局限：对复杂排版（如标点符号处理）支持不足，部分旧浏览器需前缀。

2. 旋转与绝对定位方案

通过transform: rotate(90deg)实现字符旋转，结合绝对定位控制位置：

<div class="vertical-container">
  <span class="vertical-char">竖</span>
  <span class="vertical-char">向</span>
  <span class="vertical-char">排</span>
  <span class="vertical-char">列</span>
</div>
<style>
.vertical-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vertical-char {
  display: block;
  transform: rotate(90deg);
  margin: 5px 0;
}
</style>

适用场景：需要精确控制每个字符位置时。
优化建议：使用JavaScript动态生成字符元素，避免手动编写大量HTML。

3. Flexbox与Grid布局

结合Flexbox的flex-direction: column或Grid的grid-auto-flow: column实现：

<div class="grid-vertical">
  <div>第</div>
  <div>一</div>
  <div>行</div>
</div>
<style>
.grid-vertical {
  display: grid;
  grid-auto-flow: column;
  height: 200px;
  align-content: center;
}
</style>

性能考量：DOM节点过多时可能影响渲染性能，建议字符数控制在千级以内。

Canvas实现方案详解

1. 基础绘制方法

Canvas通过fillText或strokeText逐字符绘制，需计算每个字符的坐标：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const text = '竖向排列文字';
const fontSize = 20;
const x = 50; // 起始X坐标
const lineHeight = fontSize + 5; // 行高
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
// 从下往上绘制（传统竖排）
for (let i = 0; i < text.length; i++) {
  const y = canvas.height - (i * lineHeight + fontSize / 2);
  ctx.fillText(text[i], x, y);
}

关键参数：

• textAlign: 控制水平对齐（center/left/right）
• textBaseline: 控制垂直对齐（middle/top/bottom）

2. 复杂排版处理

处理多列竖排或混合方向时，需动态计算布局：

function drawVerticalText(ctx, text, options = {}) {
  const { x, y, width, height, fontSize, lineHeight } = options;
  const chars = text.split('');
  const columns = Math.floor(width / fontSize);
  const rows = Math.ceil(chars.length / columns);
  for (let i = 0; i < chars.length; i++) {
    const col = i % columns;
    const row = Math.floor(i / columns);
    const drawX = x + col * fontSize;
    const drawY = y + (rows - row - 1) * lineHeight; // 从下往上
    ctx.fillText(chars[i], drawX, drawY);
  }
}

应用场景：古籍页面模拟、日历竖排日期等。

3. 性能优化技巧

• 离屏Canvas：预渲染静态文字到离屏Canvas，通过drawImage复用。
• 字符缓存：对重复使用的字符（如标点）建立缓存。
• 分块渲染：超长文本分块渲染，避免主线程阻塞。

方案对比与选型建议

选型建议：

• 简单静态竖排：优先使用CSS writing-mode。
• 动态交互竖排：结合DOM与少量Canvas（如仅用Canvas绘制文字，DOM处理交互）。
• 高性能需求（如万级字符）：纯Canvas方案。

实际应用案例

1. 古籍数字化系统

某图书馆项目需展示竖排古籍，采用DOM+CSS方案：

<div class="ancient-book">
  <div class="page">
    <div class="vertical-line">
      <span>昔</span><span>者</span><span>仲</span><span>尼</span>
    </div>
  </div>
</div>
<style>
.ancient-book {
  font-family: "SimSun", serif;
  line-height: 1.8;
}
.vertical-line {
  writing-mode: vertical-rl;
  float: right; /* 从右向左排列 */
  margin-left: 1em;
}
</style>

效果增强：通过@font-face引入古籍字体，使用text-shadow模拟古籍印刷效果。

2. 数据可视化图表

某金融看板需在Canvas中绘制竖排标签：

function drawVerticalLabels(ctx, labels, x, y, width) {
  const labelWidth = 15;
  const spacing = 5;
  labels.forEach((label, i) => {
    const posX = x + width - (i * (labelWidth + spacing));
    ctx.save();
    ctx.translate(posX, y);
    ctx.rotate(-Math.PI / 2); // 旋转90度
    ctx.fillText(label, 0, 0);
    ctx.restore();
  });
}

关键点：通过translate和rotate组合实现局部坐标系旋转。

总结与展望

DOM与Canvas实现竖向排列各有适用场景，开发者应根据项目需求（文本量、交互复杂度、性能要求）选择方案。未来随着CSS Houdini和WebGPU的发展，浏览器原生竖排支持可能进一步增强，但Canvas在复杂排版中的灵活性仍不可替代。建议开发者掌握两种方案，在实际项目中灵活组合使用。