js server text width

JS-Server-Text-width

Este módulo proporciona una función para calcular el ancho de texto en píxeles. En el navegador tiene esa capacidad fuera de la caja (con lienzo o con elemento oculto) pero no en NodeJS. Es útil para la representación del lado del servidor cuando necesita recortar texto a algún tamaño fijo o dibujar algo alrededor del texto.

Instalación

 npm install server-text-width

o

 yarn add server-text-width

Características

• Sin dependencias
• funciona en nodo y en el navegador de la misma manera
• admite caracteres unicode (no solo latín o ascii)
• Admite múltiples fuentes (también sus propias fuentes)
• admite múltiples tamaños de fuente
• Admite el peso de la fuente
• Definiciones mecanografiadas incluidas
• minimiza el tamaño de los datos de la tabla

¿Cómo funciona?

La idea original fue tomada de https://github.com/adambisek/string-pixel-width

1. Abra la herramienta especial mappingTool.html incluida en ese paquete
2. En esa herramienta, elija el nombre, el tamaño y el peso de la fuente. También seleccione el rango de caracteres Unicode.
3. La herramienta genera su tabla con anchos para cada personaje.
4. Coloque una tabla en su fuente como constante e inicialice el módulo con ella.
5. Ahora tiene una función que puede medir el ancho del texto.

Paso a paso

Abra mappingTool.html en su navegador. Puede descargarlo de Github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html

Seleccione la fuente que desea medir, tamaño de fuente, peso de fuente y rango de caracteres. Todas las páginas de Unicode ya están aquí. Puede seleccionar en base a la configuración regional (o locales) que use. También puede experimentar con texto usando la entrada en la parte superior. Todos los personajes que no están cubiertos con rangos unicode seleccionados se resaltarán con rojo.

En la parte inferior, la herramienta generará los datos de su tabla, que necesita alimentar al módulo. Cada ancho de carácter se representa con 2 símbolos en la codificación de la base 64. Uno para entero y otro para parte fraccional (en los caracteres renderizados de fuentes tienen un ancho fraccional en píxeles). Eso es mucho más compacto que almacenar datos en JSON.

En su código, cree una variable constante con ese valor.

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

Nota: Si necesita múltiples fuentes, tamaños, peso o rangos, simplemente fusione ese diccionario manualmente. La herramienta está limitada para producir solo un conjunto en el momento de simplicidad.

Luego solo importe e inicialice el módulo

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

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

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

Eso es todo. Disfrute de la representación de texto del lado del servidor. Estrella mi repositorio si te gusta :)

Trabajo futuro

Los PR son muy bienvenidos

• Agregar variantes de texto (cursiva)
• Agregar soporte de fuentes web a la herramienta