js server text width Download - js server text width Quellcode Download

js server text width

Schriftarten herunterladen

1.0.0

Herunterladen

JS-Server-Text-Breite

Dieses Modul bietet eine Funktion zur Berechnung der Textbreite in Pixeln. Im Browser haben Sie diese Fähigkeit nicht in der Box (mit Leinwand oder mit verstecktem Element), nicht in NodeJs. Es ist nützlich für die Server -Side -Rendering, wenn Sie Text auf eine feste Größe abschneiden oder etwas um den Text zeichnen müssen.

Installation

 npm install server-text-width

oder

 yarn add server-text-width

Merkmale

Keine Abhängigkeiten
Funktioniert im Knoten und im Browser gleichermaßen
Unterstützt Unicode -Zeichen (nicht nur Latein oder ASCII)
Unterstützt mehrere Schriftarten (auch Ihre eigenen Schriftarten)
Unterstützt mehrere Schriftgrößen
Unterstützt das Gewicht der Schrift
Typscript -Definitionen enthalten
Minimiert die Größe der Tabellendaten

Wie funktioniert es?

Die ursprüngliche Idee wurde von https://github.com/adambisek/string-pixel-width ausgeliehen

Öffnen Sie Special Tool mappingTool.html in diesem Paket enthalten
In diesem Tool wählen Sie Schriftname, Größe und Gewicht. Wählen Sie auch den Bereich der Unicode -Zeichen aus.
Das Tool generiert Ihre Tabelle mit Breiten für jeden Zeichen.
Legen Sie eine Tabelle als konstant in Ihre Quelle und initialisieren Sie das Modul damit.
Jetzt haben Sie eine Funktion, die die Textbreite messen kann.

Schritt für Schritt

Öffnen Sie mappingTool.html in Ihrem Browser. Sie können es von github https://raw.githubuSercontent.com/evgenus/js-Server-text-width/main/maptingtool.html herunterladen

MAPPINGOOL

Wählen Sie eine Schriftart aus, die Sie mit Schriftgröße, Schriftgewicht und Zeichenbereich messen möchten. Alle Unicode -Seiten sind bereits da. Sie können basierend auf Gebietsschema (oder Orten) auswählen, die Sie verwenden. Sie können auch mit dem Text mit der Eingabe oben experimentieren. Alle Zeichen, die nicht mit ausgewählten Unicode -Bereichen bedeckt sind, werden rot hervorgehoben.

Ganz unten generiert das Tool Ihre Tabellendaten, die Sie in das Modul einfügen müssen. Jede Zeichenbreite wird mit 2 Symbolen in der Basis 64 -Codierung dargestellt. Eine für Ganzzahl und eine für einen fraktionalen Teil (in Schriftart -Render -Zeichen haben eine fraktionale Breite in Pixeln). Das ist viel kompakter als das Speichern von Daten in JSON.

Erstellen Sie in Ihrem Code eine konstante Variable mit diesem Wert.

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

Hinweis: Wenn Sie mehrere Schriftarten, Größen, Gewicht oder Bereiche benötigen, verschmelzen Sie dieses Wörterbuch einfach manuell. Das Tool ist darauf beschränkt, nur einen Satz für den Einfachheit halber zu erzeugen.

Importieren und initialisieren Sie dann einfach das Modul

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

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

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