Как преобразовать пиксели в печатные дюймы в JavaScript?
-
03-07-2019 - |
Вопрос
Я хочу изменить размер шрифта стиля элемента SPAN до тех пор, пока текст SPAN не станет шириной 7,5 дюймов при распечатке на бумаге, но JavaScript сообщает свойство clientWidth SPAN только в пикселях.
<span id="test">123456</span>
А потом:
#test {
font-size:1.2in; /* adjust this for yourself until printout measures 7.5in wide */
}
А потом:
console.log(document.getElementById('test').clientWidth);
Экспериментально на одной машине я определил, что она использует примерно 90 точек на дюйм в качестве коэффициента преобразования, поскольку приведенный выше код регистрирует примерно 675, по крайней мере, в Firefox 3.
Это число не обязательно будет одинаковым в разных браузерах, принтерах, экранах и т. д.конфигурации.
Итак, как мне узнать DPI, который использует браузер?Что я могу позвонить, чтобы вернуть «90» в мою систему?
Решение
Я думаю, это делает то, что вы хотите.Но я согласен с другими авторами, HTML не совсем подходит для подобных вещей.В любом случае, надеюсь, вы найдете это полезным.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {width: 7in; border: solid 1px red;}
#span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;}
</style>
<script language="javascript" type="text/javascript">
function resizeText() {
var container = document.getElementById("container");
var span = document.getElementById("span");
var containerWidth = container.clientWidth;
var spanWidth = span.clientWidth;
var nAttempts = 900;
var i=1;
var font_size = 12;
while ( spanWidth < containerWidth && i < nAttempts ) {
span.style.fontSize = font_size+"px";
spanWidth = span.clientWidth;
font_size++;
i++;
}
}
</script>
</head>
<body>
<div id="container">
<span id="span">test</span>
</div>
<a href="javascript:resizeText();">resize text</a>
</body>
</html>
Другие советы
Обобщить:
Это не проблема, которую можно решить с помощью HTML.Отдельно от Свойства печати CSS2, не существует определенного или ожидаемого способа вывода данных в браузерах.
Во-первых, Пиксель (в CSS) не обязательно имеет тот же размер, что и пиксель (на вашем экране)., поэтому тот факт, что определенное значение подходит вам, не означает, что оно будет применимо и к другим настройкам.
Во-вторых, пользователи могут изменять размер текста, используя такие функции, как масштабирование страницы и т. д.
В-третьих, поскольку не существует определенного способа компоновки веб-страниц для печати, каждый браузер делает это по-своему.Просто распечатайте предварительный просмотр чего-нибудь в Firefox или IE и увидите разницу.
В-четвертых, печать включает в себя множество других переменных, таких как разрешение принтера и размер бумаги.Кроме того, большинство драйверов принтера поддерживают пользовательское масштабирование вывода. установить в диалоге печати который браузер никогда не видит.
Наконец, скорее всего, поскольку печать не является целью HTML, «механизм печати» веб-браузера (во всех браузерах, которые я видел) отключен от остальной части.Ваш javascript не может «общаться» с механизмом печати или наоборот, поэтому «номер DPI, который браузер использует для предварительного просмотра печати», никоим образом не отображается.
Я бы порекомендовал PDF-файл.
Я определил экспериментально на одной машине, что он использует приблизительно 90 DPI в качестве коэффициента преобразования, потому что приведенный выше код регистрирует примерно 675, по крайней мере, под Firefox 3.
1) Это то же самое на каждой машине/браузере?
Точно нет.Каждая комбинация разрешения экрана/принтера/печати будет немного отличаться.Действительно, можно узнать, каким будет размер печати, если вы не используете em вместо пикселей.
- Нет
- Вы не
На самом деле это еще больше усложняется настройками разрешения экрана.
Удачи.
Интернет не является хорошей средой для печатных материалов.
Как ясно из других ответов, печать из Интернета — непростое дело.Это непредсказуемо, и, к сожалению, не все браузеры и конфигурации реагируют одинаково.
Однако я бы указал вам в этом направлении:
Вы можете прикрепить к своему документу CSS, специально предназначенный для печати, вот так.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Таким образом, вы можете отформатировать печатный вывод вашей страницы в отдельной таблице стилей и сохранить обычную таблицу стилей для отображения на экране.Я делал это раньше и получал приличные результаты, хотя потребовалось немало настроек, чтобы печатный документ выглядел так, как вы хотите.
Интересная статья на тему печати из сети:
Список врозь — собираюсь распечатать
Некоторая информация от W3C о профиле печати CSS:
Если вы создаете контент, который должен выглядеть определенным образом, возможно, вам захочется изучить формат, предназначенный для печати, например PDF.HTML/CSS предназначен для адаптации к различным конфигурациям размера экрана, разрешения, глубины цвета и т. д.Это не значит, что коробка должна иметь ширину ровно 7,5 дюймов.
Попытался ли ты
@media print { #test { width: 7in; }}
Это объединенный ответ того, что я узнал из сообщений Ориона Эдвардса (особенно ссылки на webkit.org) и Билла.
Кажется, что ответ на самом деле всегда 96 DPI, хотя вы можете запустить следующий (по общему признанию, неряшливый) код, и мне бы хотелось услышать, если вы получите другой ответ:
var bob = document.body.appendChild(document.createElement('div'));
bob.innerHTML = "<div id='jake' style='width:1in'>j</div>";
alert(document.getElementById('jake').clientWidth);
Как говорится в статье на webkit.org, это число довольно стандартное и не зависит от вашего принтера или платформы, поскольку они используют другой DPI.
Даже если это не так, используя приведенный выше код, вы можете найти нужный вам ответ.Затем вы можете использовать DPI в своем JavaScript, ограничивая clientWidth, как это сделал Билл, в сочетании с CSS, который использует дюймы, чтобы что-то печаталось правильно, пока пользователь не выполняет какое-либо странное масштабирование, как упомянул Орион Эдвардс - или по крайней мере, после этого момента все зависит от пользователя, который может захотеть сделать что-то сверх того, что задумал программист, например, распечатать на бумаге 11x17 что-то, что программист спроектировал так, чтобы оно вписывалось в 8,5x11, но тем не менее, это будет «работайте правильно» даже в этом случае для того, что хочет пользователь.