Как измерить ширину текста в JavaScript

Часто в веб-разработке возникает необходимость точно узнать, сколько пикселей займет строка текста при заданном шрифте. Например, сделать красивую обрезку длинных заголовков с многоточием, выравнивание графических элементов в canvas или валидация ввода в реальном времени. Самый лучший способ для этого - использовать метод measureText() объект Canvas. Он возвращает размер с точной шириной текста в пикселях, а главное, без необходимости добавления элементов в DOM и без влияния на верстку.

Метод measureText() возвращает объект TextMetrics, который в современных браузерах содержит не только width, но и дополнительные метрики. Также в функции используется хитрый трюк со свойством функции (getTextWidth.canvas), чтобы при каждом вызове не создавать новый элемент <canvas>. Это ускоряет работу в 5-10 раз при массовых измерениях.Параметры функции: text - текст для измерения, font - CSS-значение шрифта, обязательно в формате CSS Font, например, "16px Arial". На выходе получаем значение ширины текста в пикселях с плавающей точкой. Результат обеспечивает субпиксельную точность, поэтому результат может быть дробным, к примеру, 84.175. Если нужна целочисленная ширина, например, для offsetWidth, используйте Math.ceil(). Функция не требует зависимостей и работает во всех современных браузерах, включая IE11. Использовать функцию можно как-то так.И вот реальный пример.Важно, что рендеринг шрифтов отличается в зависимость от системы: Windows/macOS/Linux и даже между браузерами. Для обеспечения кроссплатформенной совместимости обязательно тестируйте на целевых устройствах.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.