JavaScriptでピクセルを印刷されたインチに変換するにはどうすればよいですか？

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

  •  03-07-2019
  •  | 
  •  

質問

紙に印刷するときに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を記録するため、約90 DPIを変換係数として使用することを1台のマシンで実験的に決定しました。

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

では、ブラウザが使用しているDPIを見つけるにはどうすればよいですか？ ＆quot; 90＆quot;を取り戻すために何を呼び出すことができますか？私のシステムで？

役に立ちましたか？

解決

これはあなたが望むことをしていると思います。しかし、私は他のポスターに同意します。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）は必ずしもピクセルと同じサイズではありません（オン画面）、したがって、特定の値があなたのために働くという事実は、それが他の設定に変換されることを意味しません。

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

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

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

最後に、印刷はHTMLの目標ではないため、Webブラウザーの「印刷エンジン」は（とにかく見たすべてのブラウザーで）残りの部分から切断されます。 JavaScriptがプリントエンジンと「通信」したり、その逆を行うことはできないため、「ブラウザが印刷プレビューに使用しているDPI番号」いかなる方法でも公開されません。

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

  

1つについて実験的に決定しました   約90台使用するマシン   変換係数としてのDPI   上記のコードは約675を記録します。   少なくともFirefox 3の下で。

     

1）これはすべてで同じですか   マシン/ブラウザ？

間違いなく。すべての画面解像度/プリンター/印刷設定のコンボは少し異なります。ピクセルの代わりにemを使用しない限り、印刷サイズがどうなるかを知る方法が実際にあります。

  1. いいえ
  2. しない

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

がんばって。

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

他の回答で明らかになったように、ウェブからの印刷は難しい仕事です。予測不可能であり、悲しいことに、すべてのブラウザと設定が同じように反応するわけではありません。

ただし、次の方向を指します：

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

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

その方法で、ページの印刷出力を別のスタイルシートでフォーマットし、通常のスタイルシートを画面に表示するために保持できます。私はこれをまともな結果で以前に実行しましたが、印刷されたドキュメントが希望どおりに出力されるようにするにはかなりの調整が必要でした。

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

リストは別にして-印刷する

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

W3C-CSS印刷プロファイル

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

試しましたか

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

これは、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の紙に何かを印刷するなど、プログラマーが考えていた以上のことをしたいのはユーザー次第です。 ＆quot; work right＆quot;その場合でもユーザーが望むもののために。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top