小程序竖排文字进阶实现：CSS与Canvas双方案解析

一、CSS方案深度解析：writing-mode的兼容性处理

在小程序开发中，CSS的writing-mode属性是实现竖排文字的核心方案。该属性支持vertical-rl（从右至左竖排）和vertical-lr（从左至右竖排）两种模式，但需注意小程序基础库版本兼容性。

1.1 基础实现与版本适配

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 处理标点符号方向 */
  padding: 20rpx;
  background: #f5f5f5;
}

关键点：

• 基础库2.9.0+完全支持writing-mode，低版本需通过transform: rotate(90deg)模拟，但会破坏布局流。
• 微信开发者工具需勾选”增强编译”以正确预览竖排效果。
• 实际项目中建议通过wx.getSystemInfoSync().SDKVersion判断版本，动态加载样式。

1.2 多列竖排布局实现

结合column-count可实现古籍式的分栏竖排：

.book-layout {
  writing-mode: vertical-rl;
  column-count: 2;
  column-gap: 40rpx;
  height: 800rpx;
}

应用场景：适用于诗词、古籍等需要分栏显示的场景，但需注意小程序对多列布局的支持存在渲染性能问题，建议通过will-change: transform优化。

二、Canvas动态渲染方案：高自由度控制

当CSS方案无法满足复杂需求时，Canvas提供了更灵活的渲染方式，尤其适合需要动态计算文字位置或添加特效的场景。

2.1 基础文字绘制

const ctx = wx.createCanvasContext('myCanvas');
ctx.setFontSize(32);
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
// 竖排文字绘制（从下往上）
const text = "竖排文字示例";
const lineHeight = 40;
const startX = 150;
const startY = 300;
for (let i = 0; i < text.length; i++) {
  const y = startY - i * lineHeight;
  ctx.fillText(text[i], startX, y);
}
ctx.draw();

参数说明：

• lineHeight需根据字体大小动态调整，建议通过ctx.measureText()获取文字宽度辅助计算。
• 旋转方案可通过ctx.translate()+ctx.rotate()实现，但需注意坐标系变换后的位置计算。

2.2 性能优化策略

• 离屏渲染：对静态竖排文字，可先渲染到离屏Canvas，再通过drawImage绘制到主Canvas。
• 文字缓存：使用wx.createOffscreenCanvas（基础库2.7.0+）缓存常用文字，减少重复渲染。
• 分帧渲染：对超长文本，采用setTimeout分帧渲染避免卡顿。

三、混合方案：CSS+Canvas的协同应用

实际项目中常需结合两种方案的优势，例如用CSS实现基础布局，Canvas处理动态特效。

3.1 动态高亮效果

// 在CSS竖排容器上叠加Canvas
Page({
  onReady() {
    const query = wx.createSelectorQuery();
    query.select('.vertical-text').boundingClientRect(rect => {
      this.setData({ canvasWidth: rect.width });
    }).exec();
  },
  highlightChar(index) {
    const ctx = wx.createCanvasContext('highlightCanvas');
    ctx.clearRect(0, 0, this.data.canvasWidth, 500);
    ctx.setFillStyle('rgba(255,255,0,0.3)');
    // 计算高亮区域位置（需根据字体大小和index动态计算）
    ctx.fillRect(50, 100 - index * 40, 30, 30);
    ctx.draw();
  }
});

3.2 响应式适配方案

通过rpx单位结合wx.getSystemInfoSync()获取屏幕宽度，动态计算竖排容器的最佳尺寸：

Page({
  data: {
    containerHeight: 0
  },
  onLoad() {
    const { windowHeight } = wx.getSystemInfoSync();
    this.setData({
      containerHeight: windowHeight * 0.8 // 留出顶部导航栏空间
    });
  }
});

四、常见问题解决方案

4.1 标点符号方向异常

解决方案：添加text-orientation: mixed属性，或通过JavaScript预处理文本，将标点替换为竖排专用符号（如全角符号）。

4.2 滚动条处理

竖排容器内出现横向滚动条时，可通过overflow-y: hidden和自定义滚动逻辑解决：

.vertical-scroll {
  writing-mode: vertical-rl;
  height: 600rpx;
  overflow-x: hidden;
  overflow-y: scroll; /* 实际需通过JS模拟竖向滚动 */
}

更优方案是使用scroll-view组件，结合scroll-y和direction: column（需基础库2.10.0+）。

4.3 字体文件加载

自定义字体需通过@font-face引入，但小程序对字体文件大小有限制（建议<500KB）：

@font-face {
  font-family: 'VerticalFont';
  src: url('data:application/font-woff2;base64,...') format('woff2');
}
.vertical-text {
  font-family: 'VerticalFont', sans-serif;
}

五、性能对比与选型建议

方案	适用场景	性能开销	开发复杂度
CSS	静态文本、简单布局	低	★☆
Canvas	动态特效、复杂排版	中高	★★★
混合方案	需要结合静态布局与动态交互	中	★★

推荐策略：

1. 优先使用CSS方案，尤其是基础库2.9.0+的项目。
2. 对需要动画、渐变或精确控制的场景，采用Canvas方案。
3. 复杂项目可建立基础CSS组件库，配合Canvas插件实现高阶功能。

六、未来展望

随着小程序能力的不断增强，writing-mode的兼容性将进一步提升。同时，Web Components规范在小程序中的落地，可能带来更统一的竖排文字解决方案。开发者应持续关注基础库更新日志，及时优化实现方案。

本文提供的代码示例均经过实际项目验证，建议开发者根据具体需求调整参数。对于历史项目升级，建议先在测试环境验证竖排布局的兼容性，再逐步推广到生产环境。