☰

How to make a HTML Page in A4 paper size page(s)? Ask Question

tag-icon • tag-icon html css printing
How to make a HTML Page in A4 paper size page(s)? Ask Question

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word?

Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions of an A4 size page.

For the sake of simplicity, I'm assuming that the HTML page will only contain text (no images etc.) and there will be no <br> tags for example.

Also, when the HTML page is printed, it would come out as A4-sized paper pages.

ベストアンサー1

Ages ago, in November 2005, AlistApart.com published an article on how they published a book using nothing but HTML and CSS. See: http://alistapart.com/article/boom

Here's an excerpt of that article:

CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages and their margins. Page templates can be given names and elements can state which named page they want to be printed on. Also, elements in the source document can force page breaks. Here is a snippet from the style sheet we used:

@page {
    size: 7in 9.25in;
    margin: 27mm 16mm 27mm 16mm;
}

Having a US-based publisher, we were given the page size in inches. We, being Europeans, continued with metric measurements. CSS accepts both.

After setting the up the page size and margin, we needed to make sure there are page breaks in the right places. The following excerpt shows how page breaks are generated after chapters and appendices:

div.chapter, div.appendix {
    page-break-after: always;
}

Also, we used CSS2 to declare named pages:

div.titlepage {
    page: blank;
}

That is, the title page is to be printed on pages with the name “blank.” CSS2 described the concept of named pages, but their value only becomes apparent when headers and footers are available.

Anyway…

Since you want to print A4, you'll need different dimensions of course:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

The article dives into things like setting page-breaks, etc. so you might want to read that completely.

In your case, the trick is to create the print CSS first. Most modern browsers (>2005) support zooming and will already be able to display a website based on the print CSS.

Now, you'll want to make the web display look a bit different and adapt the whole design to fit most browsers too (including the old, pre 2005 ones). For that, you'll have to create a web CSS file or override some parts of your print CSS. When creating CSS for web display, remember that a browser can have ANY size (think: “mobile” up to “big-screen TVs”). Meaning: for the web CSS your page-width and image-width is best set using a variable width (%) to support as many display devices and web-browsing clients as possible.

EDIT (26-02-2015)

Today, I happened to stumble upon another, more recent article at SmashingMagazine which also dives into designing for print with HTML and CSS… just in case you could use yet-another-tutorial.

EDIT (30-10-2018)

有効な CSS3 ではないという指摘を受けましたがsize、これは確かに正しいです。私は、記事で引用されたコードを繰り返しただけです。そのコードは (前述のとおり) 古き良き CSS2 でした (記事とこの回答が最初に公開された年を見ると納得できます)。とにかく、コピー アンド ペーストしやすいように、有効な CSS3 コードを以下に示します。

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

本当にピクセルが必要だと思う場合 (実際にはピクセルの使用は避けるべきです)、印刷に適切な DPI を選択するように注意する必要があります。

  • 72 dpi (ウェブ) = 595 x 842 ピクセル
  • 300 dpi（印刷）= 2480 X 3508 ピクセル
  • 600 dpi（高品質印刷）= 4960 X 7016 ピクセル

ただし、面倒なことは避けて、サイズ指定にはcm(センチメートル) またはmm(ミリメートル) を使用することをお勧めします。そうすれば、使用するクライアントに応じて発生する可能性のあるレンダリングの不具合を回避できます。

おすすめ記事