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

Я хочу изменить размер шрифта стиля SPAN до тех пор, пока текст SPAN не будет иметь ширину 7,5 дюймов при печати на бумаге, но JavaScript только сообщает свойство clientWidth SPAN в пикселях.Как вы конвертируете пиксели в печатные дюймы в JavaScript?

<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, как коэффициент преобразования, потому что приведенный выше код log примерно 675, по крайней мере, под Firefox 3.

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

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

источник

2008-10-01 Kev

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

источник

2008-10-01 19:42:28 Bill

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

1) Является ли это то же самое на каждом машине/браузере?

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

источник

2008-10-01 19:07:06

Спасибо за подтверждение. Как em помогают? JavaScript сообщает clientWidth в пикселях ... есть ли какое-то свойство, которое он будет сообщать в ems? – Kev 2008-10-01 19:10:27

ems зависят от метрик шрифта, к которому у AFAIK javascript нет доступа. – 2008-10-01 19:42:41

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

источник

2008-10-01 19:08:39 Kolten

Возможно, но браузер имеет этот номер где-то ... поэтому было бы удобно использовать его без необходимости запускать клиент PDF, чтобы распечатать что-то простое, как «знак с большим текстом». – Kev 2008-10-01 19:12:51

Нет
Вы не делаете

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

Удачи.

источник

2008-10-01 19:08:43 NotMe

И все же браузер имеет номер, который он использует. Где он скрывает это? – Kev 2008-10-01 19:20:55

У БРАУЗЕРА есть? Нет, у Window Manager есть это. Браузер может иметь или не иметь доступ к нему, и даже если он это делает, он не обязательно подвергается сценариям. – Powerlord 2008-10-01 19:34:58

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

источник

2008-10-01 19:11:32 pkaeding

Если CSS не предназначен для печати, «@media print» не должен быть частью спецификации. – Kev 2008-10-01 19:14:33

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

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

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

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

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

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

A List Apart - Going To Print

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

W3C - CSS Print Profile

источник

2008-10-01 19:33:47 neonski

Проблема в том, что человек, представивший этот вопрос, хочет динамически изменять размер шрифта, чтобы при изменении ширины шрифт менялся вместе с ним. Это заставляет меня задаться вопросом, какие настройки размера шрифта 100% будут делать с этой шириной, хотя ... – Powerlord 2008-10-01 19:36:24

вы пробовали

@media print { #test { width: 7in; }}

источник

2008-10-01 19:35:01 JacquesB

Да, что правильно делает SPAN сам такой большой, но текст не масштабируется автоматически, чтобы заполнить его. И чтобы масштабировать текст, AFAICT, мне нужен DPI, который браузер использует для печати. – Kev 2008-10-01 19:42:50

Резюмируя:

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

Во-первых, A pixel (in CSS) is not neccessarily the same size as a pixel (on your screen), поэтому факт, что определенное значение работает для вас, не означает, что он перейдет на другие настройки.

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

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

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

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

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

источник

2008-10-01 19:57:27

Это объединенный ответ того, что я узнал из должностей Ориона Эдвардса (особенно ссылки на 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, например Bill, в сочетании с CSS, который использует дюймы, чтобы иметь что-то, что распечатывается правильно, если пользователь не делает никакого фанкового масштабирования, как упоминал Орион Эдвардс, - или по крайней мере, после этого момента, это зависит от пользователя, который может захотеть сделать что-то сверх того, что имел в виду программист, например, распечатать на бумаге 11x17 что-то, что программист разработал, чтобы вписаться в 8.5x11, но все же он будет «работать правильно» для того, чего хочет пользователь.

источник

2008-10-01 20:37:52 Kev

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

ответ

Смежные вопросы