Можно ли задать размер заголовка в соответствии с длиной заголовка?

Question

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

http://www.newsdesigner.com/blog/images/feb05/best/hc6.php

И на этом вы можете видеть различные размеры для каждого заголовка в соответствии с размером статьи.

http://www.snd.org/snd28/worldsbest/Aripaev_files/Aripaev08.jpg

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

Для простоты предположим, что заголовок расположен над текстовым блоком фиксированной ширины (400px) с одним столбцом.

Answer 1

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

Высота заголовка против высоты одного символа

Для каждого заголовка вы можете проверить высоту заголовка в сравнении с высотой заголовка, если у него была только первая буква (создавая копию заголовка, обрезая его текст и проверяя его высоту вне экрана). Например:

"Это очень длинный заголовок" может иметь высоту 125px, тогда как "T" может быть только 42px. Затем вы можете установить цикл, который уменьшает размер шрифта на 1 пиксель до тех пор, пока высота заголовка не станет равной 42px или меньше.

Заменить пробелы и уменьшить

Другим методом было бы заменить все пробелы неразрывными пробелами, а затем сжать до тех пор, пока ширина заголовка не станет равной или меньшей ширины его родительского элемента.

Answer 2

Это, конечно, можно сделать, но трудно сделать хорошо. Основной алогрит для этого - сначала определить, насколько большой может быть ваша строка. Затем создайте строку в определенном размере и посмотрите, достаточно ли она близка к вашей цели. Если нет, воссоздайте строку в новом размере / стиле и повторите.

Вот ссылка, которая покажет вам, как измерить размер строки в JavaScript: http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/

Answer 3

В качестве отправной точки предположим, что у вас есть класс "long", который предоставляет альтернативное оформление для заголовков, длина которых превышает значение переменной "threshold". Затем вы можете установить этот класс для длинных заголовков, используя

$(':header').each(function () {
    $(this).toggleClass('long',$(this).text().length > threshold);
})