js server text width

JS服务器 - 文本宽度

该模块提供了计算像素中文本宽度的函数。在浏览器中，您可以从开箱即用（带画布或隐藏元素），而在nodejs中没有该功能。当您需要将文本修剪成固定尺寸或在文本周围绘制内容时，它对于服务器端渲染很有用。

安装

 npm install server-text-width

或者

 yarn add server-text-width

特征

• 没有依赖性
• 以节点和浏览器相同的方式工作
• 支持Unicode字符（不仅是拉丁语或ASCII）
• 支持多个字体（也是您自己的字体）
• 支持多个字体尺寸
• 支持字体重量
• 包括打字稿定义
• 最小化表数据的大小

它如何工作？

原始想法是从https://github.com/adambisek/string-pixel-width借用的

1. 打开该软件包中包含的特殊工具mappingTool.html
2. 在该工具中，选择字体名称，大小和重量。还选择一系列Unicode字符。
3. 该工具为每个字符的宽度生成您的表。
4. 将表作为常量放入源中，并使用它初始化模块。
5. 现在，您拥有可以测量文本宽度的功能。

步步

在您的浏览器中打开mappingTool.html 。您可以从github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/maptool.html下载它

选择要测量的字体，字体大小，字体重量和字符范围。所有Unicode页面都已在这里。您可以根据所使用的语言环境（或地区）选择。您还可以使用顶部的输入尝试文本。所有未覆盖的非选定Unicode范围的字符都将以红色突出显示。

在最底部，工具将生成您的表数据，您需要将其输入模块。每个字符宽度在基本64编码中用2个符号表示。一个用于整数，另一个用于分数部分（字体呈现字符具有像素的分数宽度）。这比将数据存储在JSON中要紧凑得多。

在您的代码中，创建一个具有该值的常数变量。

 const TEXT_WIDTH_LOOKUP_TABLE = {
    "Times|32px|bold|0" : "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA" ,
    "Times|32px|bold|400" : "VVVVaqS9W5RzMdMdQAdkdkbRY5ZdYIY5XGVVVVS9WRVVfRUKZdZdY5WEeMY5Y5Y5TiXGVVYIbXXGY5X9e9e9Y5e9UKW5fdXGQAQAPsN7QAOMYRNTSXSXRzRRU7RzQARzRzOMPsQAXuQARbRMZzZzSuYMPiOiYORMOMOMRMN7OiMdI5IsKqXgXgRMRzSXQARzoATzYbTMgOVOXGQAjIYxfoXMrgf9Q5M3Y9WAY5QAaGTXaGTXruiRaXSunkZ1oATzXGOMKzAAAAAAAAAAAAAAY5SbVKQ7TiRzS9N7S9N7XGSdfRYRUKNTY5RzY5TEXMSbagUKY5RzdgVVjqbAXVREXGOMVVPuXGXGXiXiXGQAbxTgX9RMX9SGX9RMcKSCcKSCMdfRYRXmTAX1R9Y5SbY5SbXgSCeMVzI5XGQAXGQAgAXGVVOMVAOMVAOMfRYRUKNTQ5OqZdSXZdSXY5QAY5QAY5QAW5OiYIQAYIQAYIQAX9RMUXOie9YMUXOiXGQAXGQA" ,
    "Times|32px|bold|591" : "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALoAAKqAAAAKqAAAAKGAAaAaAaAaAaAaAaAaAQ3OsLuO3QZJiKKQIQ7J7OoORN7QXREKbKGPTQOPxOoSEQdPdO1WCQkaAaAaAaAaATGTgT3IKOu"
} ;

注意：如果您需要多个字体，大小，重量或范围，则只需手动合并该字典。该工具仅限于当时生产一组，以简单起见。

然后只是导入并初始化模块

 import { init } from 'server-text-width' ;

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

const width = getTextWidth ( 'Measure my text' ) ;

就是这样。享受服务器端文本渲染。如果您喜欢的话，请将我的存储库出演:)

未来的工作

PR非常欢迎

• 添加文本变体（斜体）
• 将Web字体支持添加到工具