Как конвертировать пиксели в напечатанные дюймы в JavaScript? - PullRequest
Новая
       16

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

4 голосов
/ 01 октября 2008

Я хочу изменить размер шрифта стиля элемента SPAN до тех пор, пока текст SPAN не будет иметь ширину 7,5 дюйма при печати на бумаге, но JavaScript сообщает только о свойстве клиента 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 DPI в качестве коэффициента преобразования, потому что приведенный выше код регистрирует приблизительно 675, по крайней мере, в Firefox 3.

Этот номер не обязательно одинаков для разных конфигураций браузера, принтера, экрана и т. Д.

Итак, как мне узнать, какой DPI использует браузер? Как я могу позвонить, чтобы вернуть «90» в моей системе?

Ответы [ 9 ]

6 голосов
/ 01 октября 2008

Подведем итог:

Это не проблема, которую вы можете решить с помощью HTML. Помимо CSS2-свойств печати , не существует определенного или ожидаемого способа печати вещей в браузерах.

Во-первых, Пиксель (в CSS) не обязательно совпадает с размером пикселя (на вашем экране) , поэтому тот факт, что определенное значение работает для вас, не означает, что он будет переводиться в другие настройки.

Во-вторых, пользователи могут изменять размер текста, используя такие функции, как масштабирование страницы и т. Д.

В-третьих, поскольку не существует определенного способа размещения веб-страниц в целях печати, каждый браузер делает это по-своему. Просто напечатайте предварительный просмотр чего-нибудь в Firefox против IE и посмотрите разницу.

В-четвертых, печать включает в себя множество других переменных, таких как DPI принтера, размер бумаги. Кроме того, большинство драйверов принтера поддерживают масштабирование пользователя для вывода , установленного в диалоговом окне печати , которое браузер никогда не видит.

Наконец, скорее всего, поскольку печать не является целью HTML, «механизм печати» веб-браузера (во всех браузерах, которые я видел в любом случае) отключен от остального. Ваш javascript не может «общаться» с механизмом печати или наоборот, поэтому «число точек на дюйм, которое браузер использует для предварительного просмотра», никак не раскрывается.

Я бы порекомендовал файл PDF.

3 голосов
/ 01 октября 2008

Я определил экспериментально на одном машина, которая использует примерно 90 DPI как коэффициент пересчета, потому что вышеуказанный код записывает примерно 675, по крайней мере, под Firefox 3.

1) Это то же самое на каждом машина / браузер?

Определенно НЕТ. Каждая комбинация разрешения экрана / принтера / настроек печати будет немного отличаться. Есть действительно способ узнать, какой будет размер печати, если вы не используете em вместо пикселей.

2 голосов
/ 01 октября 2008
  1. Нет
  2. Вы не

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

Удачи.

1 голос
/ 01 октября 2008

Я думаю, это делает то, что вы хотите. Но я согласен с другими авторами, 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>
1 голос
/ 01 октября 2008

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

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

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

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

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

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

Отдельный список - Идет печать

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

W3C - Профиль печати CSS

1 голос
/ 01 октября 2008

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

0 голосов
/ 02 октября 2008

Это объединенный ответ того, что я узнал из постов Ориона Эдвардса (особенно ссылки на 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, но все же, это "работать правильно" для того, что пользователь хочет даже тогда.

0 голосов
/ 01 октября 2008

Вы пробовали 

@media print { #test { width: 7in; }}
0 голосов
/ 01 октября 2008

Если вы генерируете контент, который должен выглядеть определенным образом, вы можете посмотреть формат, предназначенный для печати, например, PDF. HTML / CSS предназначен для адаптации к различным конфигурациям размера экрана, разрешения, глубины цвета и т. Д. Он не предназначен для того, чтобы говорить, что поле должно иметь ширину ровно 7,5 дюймов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...