Как найти самый большой размер шрифта, который не нарушит текст?

Question

Я пытаюсь использовать CSS (под @media print) и JavaScript для печати одностраничного документа с заданным фрагментом текста, сделанным как можно большего размера, но при этом вписывающимся в заданную ширину.Длина текста заранее неизвестна, поэтому просто использовать шрифт фиксированной ширины не вариант.

Другими словами, я ищу правильное изменение размера, чтобы, например, "IIIII" выводилось шрифтом гораздо большего размера, чем "WWWWW", потому что "I" намного тоньше, чем "W" в шрифте переменной ширины.

Самое близкое, что я смог сделать с этим, - это использовать JavaScript для тестирования различных размеров шрифта, пока clientWidth достаточно мал. Это достаточно хорошо работает для экранных носителей, но при переключении на печатные носители, есть ли какая-либо гарантия, что 90 точек на дюйм, которые я, по-видимому, получаю в своей системе (т. Е. Я устанавливаю поля равными 0,5 с обеих сторон, а для текста, измененного так, чтобы он соответствовал только этому размеру, я получаю около 675 для clientWidth) будет ли то же самое где-нибудь еще?Как браузер решает, какой DPI использовать при преобразовании из измерений в пикселях?Есть ли какой-нибудь способ, которым я могу получить доступ к этой информации с помощью JavaScript?

Мне бы очень понравилось, если бы это была просто функция CSS3 (font-size:max-for-width(7.5in)) но если это и так, то я не смог его найти.

Answer 1

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

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

Answer 2

Свойство CSS font-size принимает единицы измерения длины которые включают абсолютные измерения в дюймах или сантиметрах:

Единицы измерения абсолютной длины сильно зависят от выходного носителя и поэтому менее полезны, чем относительные единицы измерения.Следующие абсолютные единицы доступны:

• в (дюймах;1 дюйм = 2,54 см)
• см (сантиметры;1 см = 10 мм)
• мм (миллиметры)
• pt (точки;1pt=1/72 дюйма)
• пк (picas;1шт = 12pt)

Поскольку вы еще не знаете, сколько символов состоит в вашем тексте, возможно, вам потребуется использовать комбинацию javascript и CSS, чтобы правильно динамически задать свойство font-size.Например, возьмите длину строки в символах и разделите 8,5 (при условии, что вы ожидаете бумагу формата US letter) на количество символов, и это даст вам размер в дюймах, на который нужно установить размер шрифта для этого фрагмента текста.Протестировал размер шрифта с абсолютными измерениями в Firefox, Safari и IE6, так что он должен быть довольно портативным.Надеюсь, это поможет.

Редактировать:Обратите внимание, что вам также может потребоваться поиграть с настройками, такими как свойство letter-spacing, и поэкспериментировать с тем, какой шрифт вы используете, поскольку параметр размера шрифта на самом деле не зависит от ширины букв, которая будет отличаться в зависимости от расстояния между буквами и шрифта, пропорционального длине.О, и использование моноширинного шрифта помогает ;)

Answer 3

Я не знаю способа сделать это в CSS.Я думаю, что вам лучше всего было бы использовать Javascript:

1. Поместите текст в div
2. Получите размеры div
3. При необходимости уменьшите размер текста
4. Возвращайтесь к шагу 2, пока текст не станет достаточно маленьким

Вот некоторые из них пример кода для определения размера div.