Как узнать длину текста в пикселях js

Обновлено: 06.07.2024

Часто, это действительно очень сильно хочется и требуется заказчиком.

Но проблема в том, что вся точная информация о шрифте доступна только в момент рендеринга на конкретное устройство. Поэтому:
1) обходиться только возможностями форматирования конкретного формата и посылать заказчика с его хотелками (вменяемые заказчики обычно с таким подходом согласны и готовы умерить свои требования).
2) Давать возможность пользователю ручного до-форматирования документа перед печатью (Excel для это замечательно подходит). Есть как свои плюсы, так и минусы.
3) Продолжать мучатся с подсчетом ширины символов, но отдавая себе отчет, что подсчет в большинстве случае все равно может быть только крайне приблизительный. Кроме того, что лично меня пугает, не известно, в каком кол-ве случаев мы результирующий документ "улучшим", а в каком, сделаем систему полностью не работоспособной. Всегда есть риск наткнутся на какую-то не типовую/не документированную конфигурацию, когда наш код просто свалится или будет работать совершенно не корректно /достаточно на интерфейс MS Windows посмотреть, когда при некоторых настройках масштабирования интерфейс становится совершенно не читаемым/.

Blazkowicz
В Excel как-то не всё так просто

Вообще-то, уже много десятков лет, существует ТИПОГРАФСКАЯ единица измерения point. От которой считаются и размеры в документе и, удивительно ))), размеры шрифтов.

Т.ч. в point'ах, теоретически ))), проблем быть не должно. Но вот дальше, проблема корректной реализации и конкретной подстановки шрифтов. Никто не гарантирует, что Times New Roman на экране и на принтере будет один и тот же. Точнее, ранее гарантировалось прямо обратное, что они для _нормальной_/'профессиональной техники должны быть разные )))

И вобщем сама по себе постановка для измерения длины получается весьма условной.

mayton
И вобщем сама по себе постановка для измерения длины получается весьма условной.

Да нет там никакой условности.

Если шрифт и устройство рендеринга совпадает - задача решается точно
Если формат файла предназначен для обмена "картинкой" или типографский (pdf,bmp,jpg и т.д.) - задача решается точно
Но поскольку Excel текстовый файл и не очень понятно, насколько шрифты (и устройство рендеринга, ОС) в момент генерации и в момент просмотра будет совпадать - задача решается лишь приближенно, на конечном устройстве вывода ручное форматирование (например пагинация) может "уехать"

В свое время верстали > 500 страниц справочника в MS Word'е (), коллеги-издатели-дизайнеры-верстальщики глядя на нас крутили пальцем у виска ))), т.к. в Word'е ряд типографских задач нормально не решается (пагинация), Word делает автоматически (и может "уезжать") в нормальных полиграфических продуктах (Adobe PageMaker) делалось полуавтомат/вручную и прибивалось "гвоздями". Но мы люди ленивые, нам верстать было влом, мы макрос на это дело написали, а "бюджет" на верстальщиков пополам с дизайнером поделили )))

Можно ли определить длину пикселя строки в jQuery/JavaScript?

Оберните текст в span и используйте jquery width()

Не забывайте: размещение и стилизация div / span имеют значение, потому что может быть использовано обтекание. Это только возвращает ширину содержащего элемента, но не ширину текста. Использование оболочки <span> работает лучше всего, потому что <div> автоматически устанавливается на 100% ширины браузера. Я думаю, что элемент должен быть добавлен или уже находится в DOM, чтобы получить width . Я бы добавил пробел: nowrap к элементу span, иначе, если текст обернут, потому что контейнер слишком маленький, вы получите неправильный результат Если вы пытаетесь сопоставить какой-либо другой элемент, не забудьте также добавить css (при необходимости) для font-size, font-family, font-weight, межбуквенного интервала и преобразования текста. только мои два цента, вы не можете получить ширину строки, если строка не добавлена в document / html. когда вы получаете пиксель ширины, вы фактически получаете контейнер, который обвивает строку. используя span , он оборачивается вокруг строки вместо элемента block с тегом div . HTML-теги могут влиять на ширину строки, пробелы между буквами и стиль, даже если мы используем одно и то же семейство шрифтов.

Контексты, используемые для HTML-холстов, имеют встроенный метод проверки размера шрифта. Этот метод возвращает объект TextMetrics , который имеет свойство width, которое содержит ширину текста.

Или, как предложили некоторые из других пользователей, вы можете обернуть его в элемент span :

Первое решение (canvas) - проверено, работает (возвращается в пикселях)
Второе решение (DOM) - проверено, работает (возвращается в пикселях)

Обратите внимание, что из-за различий в реализации два могут возвращать несколько разные значения.

Тест производительности: 26788 вызовов усреднены более 100 итераций. Протестировано в конце 2014 года mac mini, 1,4 ГГц i5

Safari, версия 10.1.1 (12603.2.4):

Первое решение: 33,92 миллисекунды для 26788 вызовов
Второе решение: 67,94 миллисекунды для 26788 вызовов.

Google Chrome, версия 60.0.3112.90:

Первое решение: 99.1963 миллисекунды для 26788 вызовов
Второе решение: 307.4605 миллисекунд для 26788 вызовов

По какой-то причине это не работает в Chrome 54 или Firefox 48. e.innerWidth продолжает показываться как неопределенное. Вы должны добавить это в DOM для ширины или высоты, которая будет рассчитана. document.body.appendChild (е) @DonnyV. Спасибо за информацию, она мне очень помогла! Я исправил пример DOM, за который ваша помощь была высоко оценена. вам не хватает пробела после px при настройке fontSize / face на холсте @Dwelle Устройство оставлено на усмотрение пользователя для определения. Идея Canvas замечательная (особенно если она у вас есть)! его чистый подход js, его лучше, чем span, и не требует jquery @xakepp35 xakepp35 И это в 2-3 раза быстрее, чем подход DOM. @Xenon Ксенон ты. Мне нужно нарисовать простые диалоги, кнопки, полосы прокрутки .. Можете ли вы посоветовать мне небольшой, простой и легкий ящик для графического интерфейса для js canvas? или я должен свернуть свой собственный? @xakepp35 xakepp35 Честно говоря, я никогда особо не занимался программированием Canvas, поэтому я не знаю, какие библиотеки доступны.

Я не верю, что вы можете сделать только строку, но если вы поместите строку внутри <span> с правильными атрибутами (размер, шрифт-вес и т.д.); вы должны затем использовать jQuery для получения ширины диапазона.

Если вас беспокоит перенос, убедитесь, что строка содержит неразрывные пробелы:   вместо обычного пространства. @TopherFangio Или лучше использовать css white-space: nowrap .

Поместите его в абсолютно позиционированный div, а затем используйте clientWidth, чтобы получить отображаемую ширину тега. Вы даже можете установить видимость на "скрытый", чтобы скрыть div:

Я получил благоприятные тесты для предложенного 3-го метода, который использует собственный javascript vs HTML Canvas

Google был довольно конкурентным для вариантов 1 и 3, 2 бомбили.

FireFox 48:
Метод 1 занял 938,895 миллисекунды.
Метод 2 занял 1536,355 миллисекунд.
Метод 3 взял 135.91499999999996 миллисекунд.

Край 11 Метод 1 занял 4895,262839793865 миллисекунд.
Метод 2 занял 6746.622271896686 миллисекунд.
Метод 3 занял 1020.0315412885484 миллисекунды.

Google Chrome: 52
Метод 1 занял 336.4399999999998 миллисекунд.
Метод 2 занял 2271,71 миллисекунды.
Метод 3 занял 333,30499999999984 миллисекунд.

Допустим, у меня есть строка "Hello". Эта строка, очевидно, имеет длину в пять символов, но какова ее длина в пикселях? Есть ли простой способ определить эту длину в JavaScript? Я думал о решении, где дополнительный div должен был бы отображаться пользователю, но этот способ кажется хакерским и сложным.

В более широкой картине я пытаюсь определить, сколько пробелов потребуется, чтобы заполнить эту длину строки. Как вы, вероятно, можете сказать из вышеизложенного, я думаю, что лучшим вариантом было бы просто измерить длину строки и одного символа пробела с точки зрения пользователя и вычислить, сколько пробелов должно заменить текст, основываясь на этом. Кстати, это будет отображаться во входном тексте HTML.

2 ответа

В настоящее время я работаю с SVG. Мне нужно знать длину строки в пикселях, чтобы сделать некоторое выравнивание. Как я могу сделать, чтобы получить длину строки в пикселях ? Обновление: благодаря nrabinowitz. Основываясь на его помощи, теперь я могу получить длину динамически добавленного текста.

Как я могу получить длину строки (учитывая шрифт, размер и т. д.) в пикселях? Я видел рекомендации попробовать System.Drawing.Graphics.* но это пространство имен Assembly /, похоже, недоступно мне в silverlight. Я надеюсь центрировать текстовое поле под изображением, но текст предоставляется.

Я не думаю, что это хороший и простой способ сделать это, за исключением вычисления длины контейнера. Ширина зависит от размера шрифта, шрифта, интервала между буквами, она будет отличаться в зависимости от браузера и т. Д.

Вы можете определить количество пикселей в контейнере строки. Вы можете сделать это, создав скрытый элемент в DOM, установив внутренний HTML в строку, а затем запросив ширину.

Похожие вопросы:

Можно ли как-то получить длину текстовой метки в QML в пикселях? например, если Label < id: label1 text: 123 >Как получить длину в пикселях для 123?

Если известен шрифт, например Times New Roman, и размер, например 12 pt, то как можно вычислить длину строки, например Hello world, в пикселях, может быть, только приблизительно? Мне это нужно для.

Мой пример кода: <script> function Sum() < var a = Hello World; var a_length =a.length ; alert(a_length); ></script> Текущая длина:: 11 . Но я хочу подсчитать длину строки, которая будет.

Как вычислить длину (в пикселях) строки в JavaScript?

Возможный Дубликат : PHP Точная Ширина Шрифта Например, у меня есть шрифт Arial (размер 22px) text: my name is lola и как получить эту длину текста в пикселях? (PHP языков)

Я хочу знать точную длину строки в пикселях, то есть Hello World. Это не должно быть длиной моего контейнера. Кто-Нибудь Поможет.

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

Боюсь, что никак. Хотя есть одна мысль (так, черновой набросок), правда только под IE:

1. Создаете таблицу фиксированной ширины (например, 500px).
2. Первую строку таблицы оставляете пустой
3. Во вторую строку таблицы помещаете рисунок шириной 500px.
4. Начинаете добавлять символы в первую строку, используя innerText (символы надо добавлять группами по 1-2-3, чередуя с пробелами).
5. При каждом добавлении символа проверяете, не изменились ли координаты рисунка относительно верхнего левого угла страницы (IE позволяет)
6. Если изменились (то есть был перенос строки, следовательно, позиция рисунка по Y тоже изменилась, т.к. он находится во второй строке), то, собственно, мы примерно определили, сколько символов текущего шрифта приходится на 500px.
7. А дальше — дело техники (вернее, математики).

Вот такой топорный вариант

А зачем это надо. Вообще такими вещами лучше не заниматься. Ведь, вроде как, HTML изначально позиционировался как язык логической разметки. Поэтому как минимум неидеологично заниматься где-то на в скрипте пересчётом пикселов (за исключением создания каких-либо летающих/ползающих слоёв). И вообще, насколько я знаю, узнать ширину сроки в пикселах в общем случае невозможно (вполне вероятно, что существуют какие-то частные случаи, когда это может стать возможным).

Здравствуйте Flamer, Вы писали:

F>Здравствуйте Борис Тюмнев, Вы писали:

БТ>>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

F>Боюсь, что никак. Хотя есть одна мысль (так, черновой набросок), правда только под IE:

F>1. Создаете таблицу фиксированной ширины (например, 500px).
F>2. Первую строку таблицы оставляете пустой
F>3. Во вторую строку таблицы помещаете рисунок шириной 500px.
F>4. Начинаете добавлять символы в первую строку, используя innerText (символы надо добавлять группами по 1-2-3, чередуя с пробелами).
F>5. При каждом добавлении символа проверяете, не изменились ли координаты рисунка относительно верхнего левого угла страницы (IE позволяет)
F>6. Если изменились (то есть был перенос строки, следовательно, позиция рисунка по Y тоже изменилась, т.к. он находится во второй строке), то, собственно, мы примерно определили, сколько символов текущего шрифта приходится на 500px.
F>7. А дальше — дело техники (вернее, математики).

F>Вот такой топорный вариант

Спасибо огромное за идею

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Здравствуйте Flamer, Вы писали:

F>>Вот такой топорный вариант

БТ>Спасибо огромное за идею

Дык, есть такие кнопы с цифирями

Здравствуйте Flamer, Вы писали:

F>Здравствуйте Борис Тюмнев, Вы писали:

БТ>>Здравствуйте Flamer, Вы писали:

F>[покоцано]

F>>>Вот такой топорный вариант

БТ>>Спасибо огромное за идею

F>Дык, есть такие кнопы с цифирями

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Здравствуйте Flamer, Вы писали:

F>>Здравствуйте Борис Тюмнев, Вы писали:

БТ>>>Здравствуйте Flamer, Вы писали:

F>>[покоцано]

F>>>>Вот такой топорный вариант

БТ>>>Спасибо огромное за идею

F>>Дык, есть такие кнопы с цифирями

БТ>Не понял

Видите Справа от темы топика иконки с цифирками — "1", "х", "2", "3". Нажав на такую кнопку в понравившемся ответе, можно отблагодарить его автора оценкой.

Есть свойство у HTMElement: offsetWidth — ширина элемента и всего его содержимого в пикселах.
Реализовано уже в IE 4.

Здравствуйте, Protek, Вы писали:

P>Есть свойство у HTMElement: offsetWidth — ширина элемента и всего его содержимого в пикселах.
P>Реализовано уже в IE 4.

Вы бы не спешили с выводами, ок? про offsetWidth я в курсе. А теперь представьте, что у нас есть строка, которая переносится на другую строку из-за малой ширины документа. А надо определить именно ширину всей исходной строки. Боюсь, offsetWidth тут не помощник.

Так что имхо зря вы подняли тему трехлетней давности

Здравствуйте, Борис Тюмнев, Вы писали:

БТ>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

<html><body>
<div style="width:500px; border-style:solid; overflow:hidden;">
<span style="white-space: nowrap; background-color:yellow;">very very ver very very very very ver very very very very ver very very very very ver very very very very ver very very very very ver very very very very ver very very long string</span>
</div>
<button onclick="alert(test.offsetWidth)">offsetWidth?</button>
</body></html>

Здравствуйте, Flamer, Вы писали:

F>Здравствуйте, Protek, Вы писали:

P>>Есть свойство у HTMElement: offsetWidth — ширина элемента и всего его содержимого в пикселах.
P>>Реализовано уже в IE 4.

F>Вы бы не спешили с выводами, ок? про offsetWidth я в курсе. А теперь представьте, что у нас есть строка, которая переносится на другую строку из-за малой ширины документа. А надо определить именно ширину всей исходной строки. Боюсь, offsetWidth тут не помощник.

F>Так что имхо зря вы подняли тему трехлетней давности
Хм. А если так ?

Может быть в этом случае поможет?

F>Вы бы не спешили с выводами, ок? про offsetWidth я в курсе. А теперь представьте, что у нас есть строка, которая переносится на другую строку из-за малой ширины документа. А надо определить именно ширину всей исходной строки. Боюсь, offsetWidth тут не помощник.

Читайте также: