js server text width Download - js server text width исходный код скачать

js server text width

Загрузка шрифта

1.0.0

Скачать

JS-Server-Text-Text-Width

Этот модуль обеспечивает функцию для расчета ширины текста в пикселях. В браузере у вас есть такая возможность из коробки (с холстом или со скрытым элементом), но не в Nodejs. Это полезно для рендеринга на стороне сервера, когда вам нужно обрезать текст до некоторого фиксированного размера или нарисовать что -то вокруг текста.

Проставание

 npm install server-text-width

или

 yarn add server-text-width

Функции

Нет зависимостей
работает в узле и в браузере так же
поддерживает символы Unicode (не только латинский или ASCII)
Поддерживает несколько шрифтов (также ваши собственные шрифты)
поддерживает несколько размеров шрифтов
поддерживает вес шрифта
Типовые определения включены
минимизирует размер данных таблицы

Как это работает?

Оригинальная идея была заимствована с https://github.com/adambisek/string-pixel-width

Откройте специальные инструменты mappingTool.html , включенная в этот пакет
В этом инструменте выберите имя шрифта, размер и вес. Также выберите диапазон символов Unicode.
Инструмент генерирует вам таблицу шириной для каждого символа.
Поместите таблицу в свой источник как постоянный и инициализируйте с ним модуль.
Теперь у вас есть функция, которая может измерить ширину текста.

Шаг за шагом

Open mappingTool.html в вашем браузере. Вы можете скачать его с github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html

картирование

Выберите шрифт, который вы хотите измерить, размер шрифта, вес шрифта и диапазон символов. Все страницы Unicode уже здесь. Вы можете выбрать на основе локали (или локалов), которые вы используете. Вы также можете экспериментировать с текстом, используя ввод сверху. Все символы, которые не покрыты выбранными диапазонами Unicode, будут выделены красным.

В самомниме инструмент будет генерировать данные о таблице, которые необходимо подавать в модуль. Каждая ширина символа представлена двумя символами в кодировании основания 64. Один для целого числа и один для фракционной части (в шрифте, символизируемые символы, имеет дробную ширину в пикселях). Это гораздо более компактно, чем хранение данных в JSON.

В вашем коде создайте постоянную переменную с этим значением.

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

Примечание. Если вам нужно несколько шрифтов, размеров, веса или диапазонов, просто объедините этот словарь вручную. Инструмент ограничен для создания только одного набора в то время для простоты.

Затем просто импортируйте и инициализируйте модуль

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

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

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