Как найти самый большой размер шрифта, который не сломает данный текст?
Я пытаюсь использовать 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)), но если это так, я не смог ее найти.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я не знаю, как это сделать в CSS. Думаю, лучше всего использовать Javascript:
- Поместите текст в div
- Получить размеры div
- При необходимости сделайте текст меньше
- Вернитесь к шагу 2, пока текст не станет достаточно мелким
Вот какой-то пример кода для определения размера div.
Свойство CSS font-size принимает единицы длины, которые включают абсолютные измерения в дюймах или сантиметрах:
Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:
- in (inches; 1in=2.54cm)
- cm (centimeters; 1cm=10mm)
- mm (millimeters)
- pt (points; 1pt=1/72in)
- pc (picas; 1pc=12pt)
Поскольку вы еще не знаете, сколько символов в вашем тексте, вам может потребоваться комбинация javascript и CSS для правильной динамической установки свойства font-size. Например, возьмите длину строки в символах и разделите 8,5 (при условии, что вы ожидаете бумагу формата Letter) на количество символов, и это даст вам размер в дюймах, чтобы установить размер шрифта для этого фрагмента текст. Протестировал размер шрифта с абсолютными измерениями в Firefox, Safari и IE6, поэтому он должен быть довольно портативным. Надеюсь, это поможет.
РЕДАКТИРОВАТЬ: обратите внимание, что вам также может потребоваться поиграть с такими настройками, как свойство letter-spacing, и поэкспериментировать с тем, какой шрифт вы используете, поскольку настройка font-size на самом деле не является шириной букв, которая будет отличаться на основе межбуквенного интервала и шрифта, пропорционального длине. Да, и использование моноширинного шрифта помогает;)
Вот код, который я в итоге использовал, на случай, если кто-то сочтет это полезным. Все, что вам нужно сделать, это установить размер внешнего 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
}
Как я уже сказал, это отлично работает на экране. Однако, если вы хотите уместить это в определенные печатные размеры, я не думаю, что это возможно, если вы не скажете мне, как найти DPI (потому что нет гарантии, что количество пикселей будет равняться тому же количеству дюймов).