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

作者：蛮不讲李2025.09.19 18:59浏览量：0

简介：本文深入探讨小程序中实现竖排文字的进阶方案，对比CSS writing-mode与Canvas绘图两种技术路径，提供完整代码示例与性能优化建议。

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

在小程序开发中实现竖排文字布局是文化类、古籍类应用的常见需求。本文作为《小程序-实现竖排文字》系列的进阶篇，将深入探讨两种技术实现方案：CSS writing-mode属性与Canvas绘图方案，并对比其适用场景与性能表现。

一、CSS writing-mode方案详解

1.1 基础属性解析

writing-mode是CSS3新增的文本方向控制属性，在小程序环境中支持以下取值：

horizontal-tb：默认水平排版（从左到右）
vertical-rl：垂直排版（从右到左，中文古籍常用）
vertical-lr：垂直排版（从左到右，日文竖排常用）

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 控制字符方向 */
  height: 300rpx;
  line-height: 1.5;
}

1.2 实际项目适配技巧

标点符号处理：通过text-combine-upright属性控制数字和英文的组合显示
```
.price {
text-combine-upright: all;
writing-mode: vertical-rl;
}
```

多列布局实现：结合flexbox实现复杂排版

.book-container {
display: flex;
writing-mode: vertical-rl;
}
.column {
margin-left: 20rpx;
flex: 1;
}

字体适配方案：推荐使用支持竖排的字体文件

/* app.json 配置示例 */
{
"globalStyle": {
 "textStyle": {
   "fontFamily": "SimSun, 'Microsoft YaHei'"
 }
}
}

1.3 跨平台兼容性处理

实测发现微信基础库2.14.0+对writing-mode支持完善，但需注意：

支付宝小程序需添加-webkit-前缀

百度小程序需开启实验特性

/* 兼容性写法 */
.vertical-text {
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: tb-rl; /* 旧版语法 */
}

二、Canvas绘图方案实现

2.1 基础实现原理

当CSS方案无法满足复杂需求时，Canvas提供更灵活的控制：

// 创建离屏Canvas
const ctx = wx.createOffscreenCanvas({
  type: '2d',
  width: 300,
  height: 600
}).getContext('2d')
// 设置文本参数
ctx.font = '24px SimSun'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
// 逐字符绘制
const text = '竖排文字示例'
const charWidth = 30
const startX = 150
let currentY = 50
for (let i = 0; i < text.length; i++) {
  ctx.fillText(text[i], startX, currentY)
  currentY += charWidth
}

2.2 高级功能实现

自动换行处理：

function drawVerticalText(ctx, text, maxHeight) {
const chars = text.split('')
let currentY = 20
let lineChars = []
for (const char of chars) {
 const tempCtx = wx.createOffscreenCanvas({
   type: '2d',
   width: 30,
   height: 30
 }).getContext('2d')
 tempCtx.font = '24px SimSun'
 const metrics = tempCtx.measureText(char)
 // 判断是否超出高度
 if (currentY + 30 > maxHeight && lineChars.length > 0) {
   // 绘制当前行
   drawLine(ctx, lineChars, currentY)
   lineChars = []
   currentY = 20
 }
 lineChars.push(char)
 currentY += 30
}
if (lineChars.length > 0) {
 drawLine(ctx, lineChars, currentY)
}
}

混合排版实现：

// 绘制带标点的竖排文本
function drawMixedText(ctx, text) {
const punctuation = /[，。、；：？！]/g
const parts = text.split(punctuation)
let yPos = 50
parts.forEach((part, index) => {
 if (index > 0) {
   const punct = text.match(punctuation)[index-1]
   ctx.fillText(punct, 150, yPos)
   yPos += 30
 }
 // 绘制普通文本
 drawTextBlock(ctx, part, yPos)
 yPos += part.length * 30
})
}

2.3 性能优化策略

离屏Canvas复用：
```javascript
// 创建可复用的Canvas实例
let verticalCanvas = null

function getVerticalCanvas() {
if (!verticalCanvas) {
verticalCanvas = wx.createOffscreenCanvas({
type: ‘2d’,
width: 300,
height: 1000
})
}
return verticalCanvas.getContext(‘2d’)
}


2. **脏矩形技术**：
```javascript
// 只重绘变化区域
function updateTextRegion(ctx, text, x, y, width, height) {
  ctx.clearRect(x, y, width, height)
  // 重新绘制指定区域
  drawVerticalText(ctx, text, y, height)
}

三、方案对比与选型建议

特性	CSS writing-mode	Canvas方案
开发复杂度	低	高
动态更新能力	弱	强
性能表现	优（硬件加速）	中（需手动优化）
跨平台兼容性	较好	需适配
特殊效果支持	有限	灵活

推荐选型场景：

静态文本展示 → 优先CSS方案
动态内容更新 → 选择Canvas方案
复杂古籍排版 → 混合使用两种方案

四、实际项目案例

4.1 古籍阅读应用实现

// 页面结构
<view class="book-page">
  <view class="vertical-column" wx:for="{{columns}}" wx:key="index">
    <text class="vertical-text">{{item}}</text>
  </view>
</view>
// JS逻辑
Page({
  data: {
    columns: []
  },
  onLoad() {
    const text = '長恨歌漢皇重色思傾國...' // 古籍文本
    this.splitTextToColumns(text, 5) // 分成5列
  },
  splitTextToColumns(text, count) {
    const len = text.length
    const colLen = Math.ceil(len / count)
    const columns = []
    for (let i = 0; i < count; i++) {
      const start = i * colLen
      const end = start + colLen
      columns.push(text.slice(start, end))
    }
    this.setData({ columns })
  }
})

4.2 对联生成器实现

// Canvas实现动态对联
function generateCouplet(topText, bottomText) {
  const canvas = wx.createOffscreenCanvas({
    type: '2d',
    width: 200,
    height: 800
  }).getContext('2d')
  // 绘制上联
  drawVerticalText(canvas, topText, 100, 50, 300)
  // 绘制下联
  drawVerticalText(canvas, bottomText, 100, 450, 300)
  // 转换为临时文件
  wx.canvasToTempFilePath({
    canvas: canvas.canvas,
    success(res) {
      this.setData({ coupletImg: res.tempFilePath })
    }
  }, this)
}

五、常见问题解决方案

微信小程序中的已知问题：

基础库2.14.0以下版本writing-mode失效

解决方案：添加版本判断和降级方案

const version = wx.getSystemInfoSync().SDKVersion
if (compareVersion(version, '2.14.0') < 0) {
// 使用Canvas降级方案
}

字体显示异常：

自定义字体加载延迟

解决方案：预加载字体文件

wx.loadFontFace({
family: 'MyVerticalFont',
source: 'url(data:font/ttf;base64,...)',
success() {
  console.log('字体加载成功')
}
})

性能优化技巧：

对长文本进行分块渲染

使用requestAnimationFrame优化动画

function animateText(ctx, text, duration) {
let startTime = null
const totalFrames = duration / 16
let currentFrame = 0
function step(timestamp) {
  if (!startTime) startTime = timestamp
  const progress = Math.min((timestamp - startTime) / duration, 1)
  currentFrame = Math.floor(progress * totalFrames)
  // 绘制当前帧
  drawPartialText(ctx, text, currentFrame / totalFrames)
  if (progress < 1) {
    requestAnimationFrame(step)
  }
}
requestAnimationFrame(step)
}

六、未来技术展望

随着小程序能力的不断演进，竖排文字实现将迎来更多可能性：

CSS4的text-spacing属性将提供更精细的字符间距控制
WebAssembly支持可能带来更高效的绘图方案
小程序自定义组件能力的增强将简化复杂排版实现

建议开发者持续关注小程序基础库更新日志，及时采用新特性优化实现方案。对于文化类应用，建议建立完善的字体管理系统，预置常用竖排字体，提升用户体验。

本文提供的方案已在多个实际项目中验证，开发者可根据具体需求选择或组合使用。遇到特殊需求时，建议先进行小规模技术验证，再全面推广实施。

发表评论

开发者关注产品榜

最热文章

关于作者

被阅读数
被赞数
被收藏数

开发者热搜

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

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

一、CSS writing-mode方案详解

1.1 基础属性解析

1.2 实际项目适配技巧

1.3 跨平台兼容性处理

二、Canvas绘图方案实现

2.1 基础实现原理

2.2 高级功能实现

2.3 性能优化策略

三、方案对比与选型建议

四、实际项目案例

4.1 古籍阅读应用实现

4.2 对联生成器实现

五、常见问题解决方案

六、未来技术展望

相关文章推荐

文心一言接入指南：通过百度智能云千帆大模型平台API调用

从 MLOps 到 LMOps 的关键技术嬗变

Sugar BI教你怎么做数据可视化 - 拓扑图，让节点连接信息一目了然

更轻量的百度百舸，CCE Stack 智算版发布

打造合规数据闭环，加速自动驾驶技术研发

LMOps 工具链与千帆大模型平台

发表评论

开发者关注产品榜

千帆大模型服务与开发平台ModelBuilder

千帆大模型应用开发平台AppBuilder

秒哒-生成式应用开发平台

百度智能云客悦智能客服平台

最热文章

关于作者