Как преобразовать пиксели в печатные дюймы в JavaScript?
Я хочу изменить размер шрифта стиля элемента 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.info(document.getElementById('test').clientWidth);
Я экспериментально определил на одном компьютере, что он использует примерно 90 точек на дюйм в качестве коэффициента преобразования, потому что приведенный выше код регистрирует примерно 675 точек, по крайней мере, в Firefox 3.
Это число может не совпадать при разных конфигурациях браузера, принтера, экрана и т. д.
Итак, как мне узнать, какой DPI использует браузер? Как я могу вызвать, чтобы вернуть «90» в мою систему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 9
I've determined experimentally on one machine that it uses approximately 90 DPI as a conversion factor, because the above code logs approximately 675, at least under Firefox 3.
1) Is this the same on every machine/browser?
Точно нет. Каждая комбинация разрешения экрана / принтера / настроек печати будет немного отличаться. На самом деле есть способ узнать, какой будет размер печати, если вы не используете em вместо пикселей.
ems зависят от метрик шрифта, к которым у AFAIK javascript нет доступа.
Интернет не является подходящим средством для печатных материалов.
Возможно, но в браузере где-то есть этот номер ... так что было бы удобно использовать его, не запуская PDF-клиент, просто для того, чтобы распечатать что-то столь же простое, как «знак с большим текстом».
- Нет
- Ты не
На самом деле это еще больше усложняется настройками разрешения экрана.
Удачи.
И все же у браузера есть номер, который он использует. Где это прячется?
У БРАУЗЕРА это есть? Нет, он есть в диспетчере окон. Браузер может иметь или не иметь к нему доступ, и даже если он есть, он не обязательно подвергается скриптингу.
Если вы создаете контент, который должен выглядеть определенным образом, вы можете изучить формат, предназначенный для печати, например PDF. HTML / CSS предназначен для адаптации к различным конфигурациям экрана, разрешения, глубины цвета и т. д. Это не означает, что поле должно быть ровно 7,5 дюймов в ширину.
Если CSS не предназначен для печати, "@media print" не должно быть частью спецификации.
Как ясно из других ответов, печать из Интернета - дело непростое. Это непредсказуемо, и, к сожалению, не все браузеры и конфигурации реагируют одинаково.
Однако я бы указал вам в этом направлении:
Вы можете прикрепить к своему документу CSS, специально предназначенный для печати, например
<link rel = "stylesheet" type = "text/css" href = "print.css" media = "print" />
Таким образом, вы можете отформатировать печатный вывод своей страницы в отдельной таблице стилей и сохранить обычную таблицу стилей для отображения на экране. Я делал это раньше с приличными результатами - хотя потребовалось немало настроек, чтобы печатный документ получился таким, каким вы хотите.
Интересная статья на тему печати из сети:
A List Apart - собираюсь распечатать
Некоторая информация от W3C о профиле печати CSS:
Проблема в том, что человек, отправивший этот вопрос, хочет динамически изменять размер шрифта, чтобы при изменении ширины шрифт изменялся вместе с ним. Это действительно заставляет меня задуматься, что установка размера шрифта на 100% будет делать с этой шириной, хотя ...
Ты пробовала
@media print { #test { width: 7in; }}
Да, это правильно делает сам SPAN таким большим, но текст не масштабируется автоматически, чтобы заполнить его. И для масштабирования текста, AFAICT, мне нужен DPI, который браузер использует для печати.
Я думаю, это то, что ты хочешь. Но я согласен с другими постерами, 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>
Мне придется это проверить, но разве это не предполагает, что разрешение экрана и разрешение печати равны?
Не уверен в этом. Я тестировал это в Firefox 3, и, помимо того, что он работал в области просмотра браузера, если вы выполняете Файл -> Предварительный просмотр, он также работает. Но на самом деле я не пробовал его распечатать. Так что мне будет любопытно посмотреть, что вы узнаете.
Я не совсем уверен, что вы думаете об этом, но это не решает проблему.
IE 7: последняя буква упала с тележки. FF 3: размер отпечатка около 5 дюймов. Chrome: немного ближе, чем другие
Он попросил способ изменить размер элемента span с текстом на заданную ширину в дюймах. Это именно то, что делает мой пример, по крайней мере, в FF3 в Windows XP. Конечно, это взлом, но он работает. Или я что-то упускаю?
И я просто распечатал страницу с примером и измерил ее - он действительно распечатывает текст «тест» до 7 дюймов после того, как вы щелкнете по ссылке «изменить размер текста».
Подвести итоги:
Это не та проблема, которую вы можете решить с помощью HTML. Помимо CSS2 свойства печати, для браузеров не существует определенного или ожидаемого способа печати.
Во-первых, Пиксель (в CSS) не обязательно того же размера, что и пиксель (на вашем экране)., поэтому тот факт, что определенное значение работает для вас, не означает, что оно будет транслироваться в другие настройки.
Во-вторых, пользователи могут изменять размер текста, используя такие функции, как масштабирование страницы и т. д.
В-третьих, поскольку не существует определенного способа размещения веб-страниц для печати, каждый браузер делает это по-своему. Просто распечатайте предварительный просмотр чего-нибудь в firefox против IE и увидите разницу.
В-четвертых, при печати используется целый ряд других переменных, таких как DPI принтера, размер бумаги. Кроме того, большинство драйверов принтеров поддерживают пользовательское масштабирование выходных данных установить в диалоговом окне печати, которые браузер никогда не видит.
Наконец, скорее всего, поскольку печать не является целью HTML, «механизм печати» веб-браузера (во всех браузерах, которые я видел) отключен от остальной его части. Ваш javascript не может «разговаривать» с механизмом печати или наоборот, поэтому «число точек на дюйм, которое браузер использует для предварительного просмотра печати» никоим образом не отображается.
Я бы порекомендовал PDF-файл.
Это объединенный ответ того, что я узнал из сообщений Ориона Эдвардса (особенно ссылка на webkit.org) и Билла.
Кажется, что ответ на самом деле всегда 96 точек на дюйм, хотя вы можете запустить следующий (по общему признанию небрежный) код, и я хотел бы услышать, если вы получите другой ответ:
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, но все же это будет «работать правильно» для того, чего хочет пользователь, даже тогда.
Спасибо за подтверждение. Как помогает EMS? JavaScript сообщает clientWidth в пикселях ... есть ли какое-то свойство, которое он будет сообщать в ems?