js server text widthダウンロード-JS js server text widthソースコードダウンロード

js server text width

フォントのダウンロード

1.0.0

ダウンロード

JS-Server-Text-Width

このモジュールは、ピクセルでテキスト幅を計算するための関数を提供します。ブラウザでは、その機能が箱から出て（キャンバスまたは非表示の要素を使用）、nodejsではありません。テキストを固定サイズにトリミングする必要がある場合、またはテキストの周りに何かを描く必要がある場合、サーバーサイドのレンダリングに役立ちます。

Instalation

 npm install server-text-width

または

 yarn add server-text-width

特徴

依存関係はありません
ノードとブラウザで同じように動作します
Unicode文字をサポートします（ラテン語やASCIIだけでなく）
複数のフォントをサポートします（独自のフォントも同様に）
複数のフォントサイズをサポートします
フォントの重量をサポートします
タイプスクリプトの定義が含まれています
テーブルデータのサイズを最小化します

どのように機能しますか？

オリジナルのアイデアは、https：//github.com/adambisek/string-pixel-widthから借りました

そのパッケージに含まれている特別なツールmappingTool.htmlを開きます
そのツールで、フォント名、サイズ、重量を選択します。また、Unicode文字の範囲を選択します。
このツールは、各文字の幅でテーブルを生成します。
テーブルをソースに一定のように入れて、モジュールを初期化します。
これで、テキストの幅を測定できる関数ができました。

段階的に

あなたのブラウザでmappingTool.htmlを開きます。 github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.htmlからダウンロードできます

MappingTool

測定するフォント、フォントサイズ、フォント重量、文字の範囲を選択します。すべてのUnicodeページはすでにここにあります。使用するロケール（またはロケール）に基づいて選択できます。また、上部の入力を使用してテキストを実験することもできます。選択されたユニコード範囲で覆われていないすべての文字は、赤で強調表示されます。

最下部に、ツールがテーブルデータを生成し、モジュールにフィードする必要があります。各文字幅は、ベース64エンコーディングの2つのシンボルで表されます。 1つは整数用で、もう1つは分数部分用です（フォントレンダリングされた文字では、ピクセルで分数幅があります）。これは、JSONにデータを保存するよりもはるかにコンパクトです。

コードでは、その値で一定の変数を作成します。

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

注：複数のフォント、サイズ、重量、または範囲が必要な場合は、その辞書を手動でマージするだけです。このツールは、簡単にするために、当時1つのセットのみを生成するために制限されています。

次に、モジュールをインポートして初期化するだけです

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

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

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