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

Question

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

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

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

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

Answer 1

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

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

• дюйм (дюймы; 1 дюйм = 2,54 см)
• см (см; 1 см = 10 мм)
• мм (миллиметры)
• pt (баллы; 1pt = 1 / 72in)
• шт (picas; 1шт = 12pt)

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

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

Answer 2

Вот некоторый код, который я в конечном итоге использовал, на случай, если кто-то может счесть его полезным. Все, что вам нужно сделать, это сделать внешний 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 3

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

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

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