Визуализированные данные ширины пикселя для каждого символа в шрифте браузера

Question

У меня есть столбец таблицы, который должен быть ограничен определенной шириной, скажем, 100 пикселей. Иногда текст в этом столбце шире, чем этот, и не содержит пробелов. Например:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

Я хотел бы рассчитать ширину текста на стороне сервера и добавить многоточие после правильного количества символов. Проблема в том, что у меня нет данных об отображаемом размере текста.

Например, предполагая, что браузер был Firefox 3, а шрифт был 12px Arial. Какова будет ширина буквы «а», ширина буквы «б» и т. Д .?

У вас есть данные, показывающие ширину пикселя каждого символа? Или программа для его генерации?

Я думаю, что умный одноразовый сценарий javascript мог бы добиться цели. Но я не хочу тратить время на то, чтобы заново изобретать колесо, если это уже сделал кто-то другой. Я, конечно, не первый, кто сталкивается с этой проблемой.

Answer 1

Нет ничего, что вы можете сделать на стороне сервера, чтобы рассчитать это. Все, с чем вам нужно работать, это строка идентификации браузера, которая может точно или не точно сказать вам операционную систему и браузер пользователя. Вы также можете «запросить» (с помощью тега шрифта или CSS) определенный шрифт, который будет использоваться для отображения текста, но нет гарантии, что у пользователя установлен этот шрифт. Кроме того, пользователь мог иметь другую настройку DPI на уровне операционной системы, или мог сделать текст больше или меньше с помощью функции масштабирования браузера, или мог бы использовать свою собственную таблицу стилей в целом.

Answer 2

Вы могли бы поместить текст в невидимый промежуток и прочитать его, который охватывает ширину, но в основном это выглядит, как будто кто-то пытается саботировать ваш сайт, и поэтому я бы рекомендовал запрещать посты со словами длиннее определенной длины, например, 30 символов без пробелы (позволяя ссылкам быть длиннее! -)

- но простой подход - поместить элемент блока внутри ячейки таблицы:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

Это эффективно прекратит загромождение стола! O]

Answer 3

Это практически невозможно сделать на стороне сервера. В дополнение к проблеме людей, у которых установлены разные шрифты, у вас также есть кернинг (буква «f» будет занимать различное количество места в зависимости от того, что рядом с ним) и параметры рендеринга шрифтов (включен ли cleartype? », Крупные шрифты «?).