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字體支持添加到工具