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

Question

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

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

Ближайшим, с которым я смог справиться, является использование JavaScript для различных размеров шрифта до тех пор, пока clientWidth не станет достаточно маленьким. Это работает достаточно хорошо для экранных носителей, но когда вы переключаетесь на печатный носитель, есть ли какая-либо гарантия того, что 90 DPI, я, кажется, попал в мою систему (то есть, я поместил поля по 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. Я думаю, вам лучше всего будет использовать Javascript:

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

Вот sample code to detect the size of the div.

Answer 3

CSS-свойство размера шрифта принимает length units, которые включают в себя абсолютные измерения в дюймах или сантиметрах:

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

• в (дюймах; 1in = 2.54)
• см (см; 1 см = 10 мм)
• мм (миллиметров)
• пт (точки; 1PT = 1/72in)
• шт (пики; 1шт = 12pt)

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

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