

htmlページをブラウザ標準の印刷機能で印刷する場合、縦向きのA4用紙に入る横幅は最大何ピクセルになるでしょうか？

css

[code]

    * {
      box-sizing: border-box;
    }
    .test1 {
      width: 1366px;
      border: 10px solid red;
    }
    .test2 {
      width: 1280px;
      border: 10px solid green;
    }
    .test3 {
      width: 1024px;
      border: 10px solid blue;
    }
    
[/code]

html

[code]

    <body>
      <div class="test1">test1 1366px</div>
      <div class="test2">test2 1280px</div>
      <div class="test3">test3 1024px</div>
    </body>
    
[/code]

上記のようなページでプレビューを試したところ、Chrome と IE11、Edge では  
1366px → 用紙からはみ出る  
1280px → 用紙からはみ出る  
1024px → 用紙内に収まる  
という結果になりました。  
FireFoxでのみ、すべてのサイズが用紙内に収まりました。

1024px程度の幅でページを作成すれば、すべてのブラウザの標準の印刷機能でA4縦の幅に収まると考えてよいのでしょうか？  
それとも、これらのサイズは端末の環境（ディスプレイなど）に依存するものなのでしょうか？  
A4用紙に該当するピクセル数を算出する方法がありましたら教えてください。


CC BY-SA 4.0
2018-07-08T13:16:29.350
45426
2019-12-13T20:01:24.177
2018-07-08T14:00:26.387
3925
3925
question
html css html5 印刷
A4用紙に印刷可能なピクセル数は？


単位`px`はCSS 2.1で定義が変更されています。

[CSS 2.0](https://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#length-
units)までは相対長さ単位

> Relative units are:  
>  - **px** : pixels, relative to the viewing device

[CSS 2.1](https://www.w3.org/TR/CSS2/syndata.html#length-units)からは絶対長さ単位

> The absolute units consist of the physical units (in, cm, mm, pt, pc) and
> the px unit:  
>  - **px** : pixel units — 1px is equal to 0.75pt.

とは言え、CSS 2.1以降でも

> The _reference pixel_ is the visual angle of one pixel on a device with a
> pixel density of 96dpi and a distance from the reader of an arm's length.

と`px`は物理的な長さではなく視野角を基準とした長さでもあると定められています。つまり、目からの距離で長さも異なります。また各ブラウザーは歴史的経緯もあり仕様通りというわけでもないと思います。そのためCSS
2.1にも

> For lower-resolution devices, and devices with unusual viewing distances, it
> is recommended instead that the anchor unit be the pixel unit. For such
> devices it is recommended that the pixel unit refer to the whole number of
> device pixels that best approximates the reference pixel.

とモニタのような低解像度デバイスには`px`を使用し、プリンターのような高解像度デバイスには他の絶対長さ単位を使用することを推奨しています。

というわけで、印刷を考慮するのであれば、`px`でなく、`in`、`cm`、`mm`、`pt`、`pc`などの単位を使用してください。CSSでは[メディアタイプを指定](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_types)することで`screen`と`print`と分けて指定することができます。


CC BY-SA 4.0
2018-07-08T21:42:55.640
45433
2018-07-08T21:42:55.640
4236
45426
answer


`px`は視野角を基準として決められていますが、プリンターの場合は標準の`1px = 1/96th of 1in`が適用されます([W3C
CSS3](https://drafts.csswg.org/css-
values-3/#lengths))。A4の横幅が`8.27`インチなので、`8.27 x 96 = 794px`です。

それでは1024px程度の幅でページを作成すれば、ブラウザの印刷機能の方でA4縦の幅に収まるかというと、FireFox、IE11、Edgeでは「縮小して全体を印刷する」がデフォルトとなっているため、またChromeの方は「縮小して全体を印刷する」という設定はないのですが自動的にその程度までは「縮小して全体を印刷する」仕様になっているためです。なお、linux版のChromeは勝手に「縮小して全体を印刷する」機能はなく1024pxの幅でもはみ出して印刷されます。

また、IE11、Edge が「縮小して全体を印刷する」にしても1280pxでは用紙からはみ出るようになるのは、規格とかに関係するものではなくて
IE11、Edge の仕様だと思います。

印刷に関して`px`を使用することに関しては、W3Cの['CSS: em, px, pt, cm,
in…'というページ](https://www.w3.org/Style/Examples/007/units.en.html)で以下のようになっていて、推奨はされていませんが使うなとはなっていません。Webの開発の場合、画面がメインで印刷はそれほど重視されません。画面レイアウトでは`px`を使う必要があるので、印刷でも使いたいというのが普通です。そういう要望に沿うため、`px`を
CSS 2.0までは相対長さ単位であったものを、`1px = 1/96
inch`に決めたわけです。歴史が浅いためブラウザーの対応が十分でないので注意して使う必要があるので推奨はされていないですが、最近のブラウザーを使うという前提であれば印刷に`px`を使っても問題はないと思われます。

[![画像の説明をここに入力](https://i.stack.imgur.com/YG2Wm.png)](https://i.stack.imgur.com/YG2Wm.png)


CC BY-SA 4.0
2018-07-09T02:27:25.287
45437
2018-07-09T22:32:41.280
2018-07-09T22:32:41.280
15171
15171
45426
answer


> 1024px程度の幅でページを作成すれば、すべてのブラウザの標準の印刷機能でA4縦の幅に収まると考えてよいのでしょうか？  
>  それとも、これらのサイズは端末の環境（ディスプレイなど）に依存するものなのでしょうか？

プリンタの印刷可能領域もありますし、ブラウザが拡縮する仕様の影響もあると推測します。

各メーカーのプリンタドライバとブラウザの仕様に詳しい方がいれば分かるかも知れませんが、この点についてはハッキリ分かりません。  
現実解として970px幅にコンテンツを収めている帳票デザインを見たことはあります。

> A4用紙に該当するピクセル数を算出する方法がありましたら教えてください。

CSS で A4幅 210mm を指定すると、794px にマッピングされます。

<https://codepen.io/DriftwoodJP/pen/pZvJOv>

[code]

    * {
      box-sizing: border-box;
    }
    
    // .test1 {
    //   width: 1366px;
    //   border: 10px solid red;
    // }
    // .test2 {
    //   width: 1280px;
    //   border: 10px solid green;
    // }
    // .test3 {
    //   width: 1024px;
    //   border: 10px solid blue;
    // }
    @page {
      size: A4;
      margin: 0;
    }
    
    @media print {
      html,
      body {
        width: 210mm;
        height: 297mm;
      }
    }
    
    .mm {
      width: 210mm;
      border: 10px solid gray;
    }
    
    .pixel {
      width: 794px;
      border: 10px solid gray;
    }
[/code]

[code]

    <div class='test1'>
      test1 1366px
    </div>
    <div class='test2'>
      test2 1280px
    </div>
    <div class='test3'>
      test3 1024px
    </div>
    <div class='mm'>
      mm 210mm
    </div>
    <div class='pixel'>
      Pixel 794px
    </div>
[/code]

物理的な長さがどのようにピクセル換算されるかについては、下記が参考になりました。

  * [length - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Length)
  * [The Lengths of CSS | CSS-Tricks](https://css-tricks.com/the-lengths-of-css/)

また、用紙サイズについては下記のサイトを参考にしています(96PPI)。

  * [A Paper Sizes - A0, A1, A2, A3, A4, A5, A6, A7, A8, A9, A10](https://www.papersizes.org/a-paper-sizes.htm)

**A4(794px * 1123px) で考えるとレイアウトしやすい** のではないでしょうか。

私自身は幅可変の文章や表くらいしか扱ったことが無いので、このトピックの充実が楽しみです。


CC BY-SA 4.0
2018-07-11T08:33:27.823
45507
2019-12-13T20:01:24.177
2019-12-13T20:01:24.177
32986
7457
45426
answer