彭彭自用包：abler-text-width (文本渲染宽度测算工具)

此模块提供了一个以像素为单位计算文本宽度的功能。

基于 js-server-text-width 改造。js-server-text-width 的核心思想是预先建立字符宽度映射表，应用开发人员可根据应用需求选择合适的代码页和字体样式来建立一系列宽度映射项加入映射表，并将映射表作为常量保存，js-server-text-width根据映射表计算给定文本的渲染宽度。js-server-text-width提供了一个映射工具来创建映射表。

映射表

对于给定的一套字体参数（名称+字号+字重）和选定的每一个代码页，需要为代码页中的每个字符创建宽度映射，数据量可能会比较庞大，js-server-text-width使用了两个base64字符来表示字符的宽度，如此大大减少了映射项的尺寸。然而，尽管如此，当应用系统涉及到诸如CJK之类的代码页时，数据量还是太大，abler-text-width 对此进行了优化，改写算法，尽可能减少映射表的尺寸。

映射工具

原来的映射工具为了简单起见，使用起来相对比较麻烦，abler-text-width 更新后的映射工具 pp-font-width-mapping-tool.html 随软件包发布，做了以下优化：

• 增强了示例文本渲染后的检视特性

  • 每个字符的颜色区分是否被所选的代码页集合所覆盖，绿色：已覆盖，红色：未覆盖
  • 每个字符的底部衬线的颜色区分当前字体（名称+字号+字重）的宽度映射表是否已覆盖该字符，绿色：已覆盖，红色：未覆盖
  • 鼠标停留在每个字符上时，悬浮显示的信息增加了该字符所属的代码页

  当输入的示例文本、字体参数（名称+字号+字重）以及代码页选择列表有任何变化时，将及时重新渲染示例文本

• 代码页选择框上方增加了**[Sort by label]**单选框，可选择是否按显示标签的字母顺序排序，默认是按代码点排序的

• 增加了**[Auto Select Pages]**按钮，可根据输入的示例文本自动选择代码页

• 增加了一个显示当前已选代码页的列表，每个列表项末尾显示了示例文本中属于该代码页字符，如：

  0000 Basic Latin Font Appearance Example 123.0 +-*/!@#$%^&()
  4E00 CJK Unified Ideographs 简体繁體中文及其符号
  3000 CJK Symbols and Punctuation 、【】『』、。《》
  FF01 Halfwidth and Fullwidth Forms （～｀！＠＃￥％＾＆＋－＝｜，？）
  0080 Latin-1 Supplement ×
  2000 General Punctuation ——“”

• 支持批量生成映射表，字体尺寸输入框允许输入多个或多组尺寸，用空给分隔，如

  8,2,32 36,4,48 64

  表示尺寸从8到32，增量为2，从36到48，增量为4，最后还有个单独的64，即批量生成 8,10,12,...,32,36,...,48,64每个字号的的映射表

• 字重输入框允许输入多个在字重，用空格分隔，如：

  normal bold 900

  表示将同时为每个字重生成映射表

• 取消了原来的在任何生成参数变化时自动生成映射表特性，增加了按钮 [Generate] 由用户手动开始生成，为了避免长时间假死现象，对于每一种字体参数（名称+字号+字重），所选的各个代码页的映射生成后，即更新生成的映射表文本框，同时重新渲染示例文本

安装

npm i abler-text-width -s 

使用

1. 生成映射表

   在浏览器中打开 pp-font-width-mapping-tool.html ，输入需要的字体名称、字号列表、字重列表，选择需要的代码页，如果不好确定代码页，可通过输入示例文本后自动选择，点击 [Generate] 按钮生成映射表（JSON文本）

2. 应用代码中导入/定义映射表

   可以将生成的映射表保存到JSON文件，在应用代码中加载该文件，也可直接将生成的映射表粘贴到应用代码中定义为常量，如：

   const TEXT_WIDTH_LOOKUP_TABLE = {
       "FranklinGothic-DemiCond|8|normal|0": {"c":128,"w":"FlFlEOFlFlFlFlFlFlCXCXCXCXCXFlFlFlFlFlFlFlFlFlFlFlFlFlFlFlFlFlFlCXCgDeFHEsHHG9CDCqCqDoF7B7DdB7DaEsEsEsEsEsEsEsEsEsEsB7B7F7F7F7D3IQFoFBFWGFEZEQF8GMCWDKFFEHH0GgGhE4GhFOEnElF+FaIIFKE1E9CqDVCqF7DlCXEaFHEAFHEiCxFHE7CICIEXCIHgE7FFFHFHDDDsC+E7EMGUEDEOD7CqCJCqF7CX"},
       "FranklinGothic-DemiCond|8|normal|80": {"c":128,"tc":2,"w":"AAFlAgCXAhCgAiEsAkEzAlEsAmCJAnD6AoDoApHrAqDaArEcAsF7AtAAAuHrAvDlAwDQAxF7AyDMA0CdA1FCA2EAA3B7A4BxA5DFA6DwA7EcA8H4A9ICA+H4A/D3BAFoBGHgBHFWBIEZBMCWBQGFBRGgBSGhBXF7BYGhBZF+BdE1BeE4BfExBgEaBmHLBnEABoEiBsCIBwE3BxE7ByFFB3F7B4FFB5E7B9EOB+FHB/EOCAAA"},
       "FranklinGothic-DemiCond|8|normal|2000": {"c":112,"w":"EAIAEAIACqCABVEsB7BmBAAAAAAAAAAADdDdFDEUIoDlEtEAIAIAEACCIAIAEAC/DRDRDhC2B7D2GgB7CXCXAAAAAAAAAABLKgK1CCDXGECCEVGEC0CwCwGuEQDYDlGXEuDuHVCmBqDDDDHWGMGAEXEXD9D9EXCOGXEXF0F0GXEXE9FCGQGQC0JJGQC0CaBxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"},
       ......
   }    

   如果需要多个字体的映射表，可重复生成后合并到一起

3. 初始化

   const {TextWidthMeasure} = require('abler-text-width');
   const textWidthMeasure = new TextWidthMeasure(TEXT_WIDTH_LOOKUP_TABLE);
   //也可在需要时重新设置新的映射表
   textWidthMeasure.setMap(TEXT_WIDTH_LOOKUP_TABLE2);

4. 功能：测算文本渲染宽度

   const fontName = 'Arial', fontSize = 16, fontWeight = "Bold";
   const exampleText = 'Font Appearance Example 123.0 +-*/!@#$%^&() 简体、繁體中文及其符号（～｀！＠＃￥％＾＆×——＋－＝【】『』、｜，。《》“”？）';
   let width = textWidthMeasure.getTextWidth(exampleText, {fontName, fontSize, fontWeight})
   consloe.log('width:', width);

5. 功能：估算字体尺寸（自适应宽度）

   function estimateTextSize(text, areaWidth, fontName) {
       let size = textWidthMeasure.estimateTextFontSize(text, 32, {areaWidth, fontName})
       return size.toFixed(2);
   }