Как преобразовать пиксели в печатные дюймы в JavaScript?

StackOverflow https://stackoverflow.com/questions/159183

  •  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 вместо пикселей.

  1. Нет
  2. Вы не

На самом деле это еще больше усложняется настройками разрешения экрана.

Удачи.

Интернет не является хорошей средой для печатных материалов.

Как ясно из других ответов, печать из Интернета — непростое дело.Это непредсказуемо, и, к сожалению, не все браузеры и конфигурации реагируют одинаково.

Однако я бы указал вам в этом направлении:

Вы можете прикрепить к своему документу CSS, специально предназначенный для печати, вот так.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Таким образом, вы можете отформатировать печатный вывод вашей страницы в отдельной таблице стилей и сохранить обычную таблицу стилей для отображения на экране.Я делал это раньше и получал приличные результаты, хотя потребовалось немало настроек, чтобы печатный документ выглядел так, как вы хотите.

Интересная статья на тему печати из сети:

Список врозь — собираюсь распечатать

Некоторая информация от W3C о профиле печати CSS:

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, но тем не менее, это будет «работайте правильно» даже в этом случае для того, что хочет пользователь.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top