js server text width Download - js server text width Download do código -fonte

js server text width

Baixar fonte

1.0.0

Baixar

JS-SERVER-TEXT-WIDTH

Este módulo fornece uma função para calcular a largura do texto em pixels. No navegador, você tem essa capacidade pronta para uso (com tela ou elemento oculto), mas não no NodeJS. É útil para renderização do lado do servidor quando você precisa aparar o texto em algum tamanho fixo ou desenhar algo em torno do texto.

Instalação

 npm install server-text-width

ou

 yarn add server-text-width

Características

Sem dependências
funciona no nó e no navegador da mesma maneira
Suporta caracteres Unicode (não apenas latim ou ASCII)
Suporta várias fontes (suas próprias fontes também)
suporta vários tamanhos de fonte
suporta peso da fonte
Definições TypeScript incluídas
minimiza o tamanho dos dados da tabela

Como funciona?

A idéia original foi emprestada de https://github.com/adambisek/string-pixel-width

Open Special Tool mappingTool.html incluído nesse pacote
Nessa ferramenta, escolha o nome, tamanho e peso da fonte. Selecione também o intervalo de caracteres Unicode.
A ferramenta gera sua tabela com larguras para cada caractere.
Coloque uma tabela em sua fonte como constante e inicialize o módulo com ela.
Agora você tem função que pode medir a largura do texto.

Passo a passo

Open mappingTool.html no seu navegador. Você pode baixá-lo em github https://raw.githubusercontent.com/evgenus/js-sherver-text-width/main/mappingtool.html

MappingTool

Selecione a fonte que você deseja medir, tamanho da fonte, peso da fonte e alcance de caracteres. Todas as páginas Unicode já estão aqui. Você pode selecionar com base em localidade (ou locais) que você usa. Você também pode experimentar o texto usando a entrada na parte superior. Todos os caracteres que não são cobertos com faixas de unicode selecionadas serão destacadas com o vermelho.

Na parte inferior, a ferramenta gerará os dados da tabela, que você precisa alimentar no módulo. Cada largura do caractere é representada com 2 símbolos na codificação da base 64. Um para o número inteiro e outro para a parte fracionária (em caracteres renderizados pela fonte têm largura fracionária em pixels). Isso é muito mais compacto do que armazenar dados no JSON.

No seu código, crie uma variável constante com esse valor.

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

Nota: Se você precisar de várias fontes, tamanhos, peso ou faixas, basta mesclar esse dicionário manualmente. A ferramenta é limitada para produzir apenas um conjunto no momento da simplicidade.

Em seguida, basta importar e inicializar o módulo

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

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

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