All Projects → Icemic → huozi.js

Icemic / huozi.js

Licence: Apache-2.0 License
A simple typography engine for CJK languages, especially designed for game rich-text. 用于游戏富文本的中日韩文字排印引擎。

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to huozi.js

Qiji Font
齊伋體 - typeface from Ming Dynasty woodblock printed books
Stars: ✭ 536 (+297.04%)
Mutual labels:  typography, chinese
Chinese Hershey Font
Convert Chinese Characters to Single-Line Fonts using Computer Vision
Stars: ✭ 70 (-48.15%)
Mutual labels:  typography, chinese
Osfcc
一个收集可用于中文字体排印的开源字体集合。
Stars: ✭ 314 (+132.59%)
Mutual labels:  typography, chinese
Tehreer-Android
Standalone text engine for Android aimed to be free from platform limitations
Stars: ✭ 61 (-54.81%)
Mutual labels:  typography, text-layout
Compressed-Punctuation-Sans
包含基础标点挤压效果的中文标点符号字体
Stars: ✭ 49 (-63.7%)
Mutual labels:  typography, chinese
alreq
Documenting gaps and requirements for support of Arabic and Persian on the Web and in eBooks.
Stars: ✭ 51 (-62.22%)
Mutual labels:  typography, text-layout
Rrpl
Describing Chinese Characters with Recursive Radical Packing Language (RRPL)
Stars: ✭ 649 (+380.74%)
Mutual labels:  typography, chinese
ark-pixel-font
Open source Pan-CJK pixel font / 开源的泛中日韩像素字体
Stars: ✭ 1,767 (+1208.89%)
Mutual labels:  cjk, chinese
pinyin data
🐼 Easy to use and portable pronunciation data for Hanzi characters.
Stars: ✭ 13 (-90.37%)
Mutual labels:  cjk, chinese
Tategaki
Translate Telegra.ph to vertical writing.
Stars: ✭ 80 (-40.74%)
Mutual labels:  typography, cjk
Tehreer-Cocoa
Standalone text engine for iOS
Stars: ✭ 31 (-77.04%)
Mutual labels:  typography, text-layout
AndroidZdog
Porting Zdog(Round, flat, designer-friendly pseudo-3D engine for canvas) to Android with kotlin
Stars: ✭ 22 (-83.7%)
Mutual labels:  canvas
SubmiBot
Plugin do Eclipse para automatização do processo de submissão de tarefas na disciplina de LP2 - Computação@UFCG
Stars: ✭ 16 (-88.15%)
Mutual labels:  canvas
canvas-merge-video-in-vue
canvas+vue 实现视频碎片合并 比较粗陋,欢迎fork 升级++
Stars: ✭ 21 (-84.44%)
Mutual labels:  canvas
snake-game-p5
The Snake Game made with p5.js 🐍🎮.
Stars: ✭ 18 (-86.67%)
Mutual labels:  canvas
vueShop
🙂collections
Stars: ✭ 72 (-46.67%)
Mutual labels:  canvas
lottery-rotate
适配移动端rem布局的canvas大转盘抽奖插件
Stars: ✭ 15 (-88.89%)
Mutual labels:  canvas
OpenGNT
Open Greek New Testament Project; NA28 / NA27 Equivalent Text & Resources
Stars: ✭ 55 (-59.26%)
Mutual labels:  chinese
NightSky
A way to avoid paying 50 bucks by using some js to generate an image of the night sky at specific time and location. 🌑
Stars: ✭ 49 (-63.7%)
Mutual labels:  canvas
canvas-cast
Cast any <canvas> element to an LED Matrix over WebSockets with an Arduino/ESP8266.
Stars: ✭ 39 (-71.11%)
Mutual labels:  canvas

huó

一个简单的中日韩文字排印引擎,为游戏富文本特别设计。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!

许可

Copyright 2017-present Icemic Jia

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].