Téléchargement js server text width - Téléchargement du code source js server text width Téléchargement

js server text width

Téléchargement de polices

1.0.0

Télécharger

JS-Server-Text-Width

Ce module offre une fonction pour calculer la largeur du texte dans les pixels. Dans le navigateur, vous avez cette capacité hors de la boîte (avec toile ou avec un élément caché) mais pas dans Nodejs. Il est utile pour le rendu côté serveur lorsque vous devez couper le texte à une taille fixe ou pour dessiner quelque chose autour du texte.

Installer

 npm install server-text-width

ou

 yarn add server-text-width

Caractéristiques

Aucune dépendance
Fonctionne dans le nœud et dans le navigateur de la même manière
prend en charge les caractères Unicode (pas seulement latin ou ASCII)
Prend en charge plusieurs polices (vos propres polices)
prend en charge plusieurs tailles de police
prend en charge le poids de la police
Définitions de dactylographie incluses
minimise la taille des données de table

Comment ça marche?

L'idée originale a été empruntée à https://github.com/adambisek/string-pixel-width

Ouvrez l'outil spécial mappingTool.html inclus dans ce package
Dans cet outil, choisissez le nom, la taille et le poids de la police. Sélectionnez également la gamme des caractères Unicode.
L'outil génère votre table avec des largeurs pour chaque caractère.
Mettez une table dans votre source comme constante et initialisez le module avec.
Vous avez maintenant une fonction qui peut mesurer la largeur du texte.

Pas à pas

Open mappingTool.html dans votre navigateur. Vous pouvez le télécharger à partir de github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html

mappingtool

Sélectionnez la police que vous souhaitez mesurer, la taille de la police, le poids de la police et la gamme de caractères. Toutes les pages Unicode sont déjà là. Vous pouvez sélectionner en fonction des paramètres régionaux (ou des localités) que vous utilisez. Vous pouvez également expérimenter le texte en utilisant la saisie en haut. Tous les caractères qui ne sont pas couverts avec des gammes Unicode sélectionnés seront mis en évidence avec du rouge.

Tout en bas, l'outil vous générera des données de table, que vous devez vous alimenter dans le module. Chaque largeur de caractère est représentée avec 2 symboles dans le codage de la base 64. Un pour entier et un pour une partie fractionnaire (dans les caractères rendues de police a une largeur fractionnaire dans les pixels). C'est beaucoup plus compact que le stockage de données dans JSON.

Dans votre code, créez une variable constante avec cette valeur.

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

Remarque: Si vous avez besoin de plusieurs polices, tailles, poids ou gammes, fusionnez simplement ce dictionnaire manuellement. L'outil est limité pour produire un seul ensemble à l'époque pour la simplicité.

Ensuite, importez et initialisez le module

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

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

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