huozi

活huó字zì

一个简单的中日韩文字排印引擎，为游戏富文本特别设计。A simple typography engine for CJK languages, especially designed for game rich-text.

---

总览

活字是 AVG.js 的模块之一，为剧情游戏文字排版设计，兼顾中西混排和纯西文排版。

排版规则

• 方块字优先
• 横排且纵横对齐
• 避首尾
  • 行末最多悬挂两个标点（共占 1em 宽）
  • 行末标点超过两个的，避行首规则失效
  • 在前两条规则的基础上，行末标点自第一个需避行尾的标点前断开，进入下一行
• 行内标点挤压：除破折号等不可挤压的标点外，所有标点均会两两合并为一个em宽度
• 遇非方块字（英文字母、数字等），按照西文排版方式进行排版。
• 非方块字两端以补不定长空格的方式凑齐 em 的整数倍宽度，以保证后续内容纵横对齐。

演示

https://icemic.github.io/huozi.js/

使用

npm install huozi

import huozi from 'huozi';

const canvas = document.getElementById('app');
const context = canvas.getContext('2d');

const textSequence = '需要排版的文字内容'.replace(/\r\n/g, '\n').split('').map(value => {
    return {
      fontSize: 26,
      character: value
    }
  });

const layoutSequence = huozi(textSequence);

context.clearRect(0, 0, 800, 600);
context.strokeStyle = '#999';

for (const char of layoutSequence) {
  context.font = `${char.fontSize}px sans-serif`;
  context.textBaseline = 'hanging';
  context.fillText(char.character, char.x, char.y);
  context.strokeRect(char.x, char.y, char.width, char.height);
}

输入格式：

[{
  character: String,  // 单个字符
  fontSize: Number    // 该字符的字号
}]

输出格式：

[{
  character: String,
  fontSize: Number,
  x: Number,          // 绝对坐标
  y: Number,          // 绝对坐标
  width: Number,      // 字符宽度
  height: Number      // 字符高度
}]

参数详解：

function huozi(textSequence, layoutOptions = {
  // 指定字体，支持任何合法的 CSS font-family 值（包括使用 @font-face 导入的），默认为黑体/无衬线字体
  fontFamily: 'sans-serif',
  // 排版网格宽度（即一个em多宽，与 textSequence 中的 fontSize 不同）
  gridSize: 26,
  // 每行字数
  column: 25,
  // 行数
  row: Infinity,
  // 字距（仅 CJK 文字）
  xInterval: 0,
  // 行距
  yInterval: 12,
  // 字符间距（仅西文文字）
  letterSpacing: 0,
  // 开启行内标点压缩
  inlineCompression: true,
  // 强制纵横对齐
  forceGridAlignment: true,
  // 西文优先
  westernCharacterFirst: false,
  // 若纵横对齐导致无空格间隔，则强制在两边加入至少 1/4em 宽空格
  forceSpaceBetweenCJKAndWestern: false,
  // 是否进行左全角引号的位置修正
  fixLeftQuote: true
})

参与项目

欢迎任何 Issue 和 Pull Request！

许可

本程序根据使用目的采用双授权的方式，你可以根据如下条款选择适合你的许可协议：

• 对于全部的使用目的，均可选择 GNU Affero General Public License 3.0。
• 对于非商业目的的使用，可选择 Apache License 2.0。此处非商业目的的定义和区分方法与 Creative Commons BY-NC 4.0 International 中的相关条目一致。
• 特别地，当用户将本程序与 AVG.js，或更具体地，avg-core 库同时使用时，无论用于商业或非商业，均可选择 Apache License 2.0。关于 AVG.js 的详情，请访问：https://github.com/avgjs/avg-core
• 特别地，当用户将本程序与 pixi-richtext 库同时使用时，无论用于商业或非商业，均可选择 Apache License 2.0。