javascript - JavaScriptでピクセルを印刷されたインチにどのように変換しますか?

Question

紙に印刷したときに SPAN のテキストが 7.5 インチ幅になるまで、SPAN 要素のスタイルのフォントのサイズを変更したいのですが、JavaScript は SPAN の clientWidth プロパティをピクセル単位でしか報告しません。

<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);

上記のコードは、少なくとも Firefox 3 では約 675 をログに記録するため、1 台のマシンで変換係数として約 90 DPI を使用することを実験的に判断しました。

この数は、ブラウザー、プリンター、画面などの構成が異なると必ずしも同じではありません。

では、ブラウザが使用している DPI を見つけるにはどうすればよいでしょうか。システムで「90」を取得するには、何を呼び出すことができますか?

score 6 · Accepted Answer

要約する：

これは、HTML を使用して解決できる問題ではありません。CSS2 の印刷プロパティを除けば、ブラウザーが印刷するための定義済みの方法や予想される方法はありません。

まず、ピクセル (CSS 内) は必ずしもピクセル (画面上) と同じサイズではないため、特定の値が機能するという事実は、それが他の設定に変換されることを意味しません。

次に、ユーザーはページズームなどの機能を使用してテキストサイズを変更できます。

第 3 に、印刷目的で Web ページをレイアウトする方法が定義されていないため、ブラウザーごとに方法が異なります。Firefox と IE でプレビューを印刷して、違いを確認してください。

第 4 に、印刷には、プリンターの DPI や用紙サイズなど、さまざまな変数が含まれます。さらに、ほとんどのプリンタドライバは、ブラウザには表示されない印刷ダイアログで設定された出力のユーザースケーリングをサポートしています。

最後に、おそらく印刷は HTML の目的ではないため、Web ブラウザーの「印刷エンジン」は (私が見たすべてのブラウザーで) 残りの部分から切り離されています。JavaScriptが印刷エンジンと「対話」する方法、またはその逆の方法がないため、「ブラウザーが印刷プレビューに使用しているDPI番号」はまったく公開されません。

PDFファイルをお勧めします。

score 3 · Accepted Answer

上記のコードは、少なくとも Firefox 3 では約 675 をログに記録するため、1 台のマシンで変換係数として約 90 DPI を使用することを実験的に判断しました。

1) これはすべてのマシン/ブラウザで同じですか?

絶対にありません。すべての画面解像度/プリンター/印刷設定の組み合わせは少し異なります。ピクセルの代わりにemを使用していない限り、印刷サイズがどうなるかを知る方法は本当にあります.

score 2 · Accepted Answer

いいえ
あなたはそうしない

これは実際には、画面の解像度設定によってもさらに複雑になります。

幸運を。

score 2 · Accepted Answer

これはあなたが望むことだと思います。しかし、私は他のポスターに同意します.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>

score 1 · Accepted Answer

1

ウェブは印刷物に適した媒体ではありません。

于 2008-10-01T19:08:39.710 に答える

score 1 · Accepted Answer

他の回答で明らかになったように、Web からの印刷はトリッキーなビジネスです。これは予測不可能であり、悲しいことに、すべてのブラウザーと構成が同じように反応するわけではありません。

ただし、この方向を示します。

次のように、印刷専用の CSS をドキュメントに添付できます。

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

そうすれば、ページの印刷出力を別のスタイルシートでフォーマットし、通常のスタイルシートを画面に表示するために保持できます。私は以前にこれを実行して、まともな結果を得たことがあります。

Web からの印刷に関する興味深い記事:

別のリスト - 印刷に行く

CSS 印刷プロファイルに関する W3C からの情報:

W3C - CSS 印刷プロファイル

score 0 · Accepted Answer

特定の外観を意図したコンテンツを生成している場合は、PDFなどの印刷を目的とした形式を検討することをお勧めします。HTML / CSSは、画面サイズ、解像度、色深度などのさまざまな構成に適応できるようになっています。ボックスの幅を正確に7.5インチにする必要があると言っているわけではありません。

score 0 · Accepted Answer

0

やってみました

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

于 2008-10-01T19:35:01.207 に答える

score 0 · Accepted Answer

これは、Orion Edwards (特に webkit.org へのリンク) と Bill の投稿から学んだことをまとめた回答です。

答えは実際には常に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 を使用するためです。

そうでない場合でも、上記のコードを使用すると、必要な答えを見つけることができます。次に、JavaScript で DPI を使用して、Bill が行ったように clientWidth を制限し、インチを使用する CSS と組み合わせて、ユーザーが Orion Edwards が言及したようなファンキーなスケーリングを行わない限り、何かを正しく印刷することができます。少なくとも、その時点以降はユーザー次第で、プログラマーが考えていた以上のことをしたいと思うかもしれません。たとえば、プログラマーが 8.5x11 に収まるように設計したものを 11x17 の紙に印刷するなどです。その場合でも、ユーザーが望むものに対して「正しく動作」します。

javascript - JavaScriptでピクセルを印刷されたインチにどのように変換しますか?

9 に答える 9

Related

Reference