如何在 A4 纸张大小的页面中制作 HTML 页面？

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

提问by Zabba

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

是否可以使 HTML 页面的行为类似于 MS Word 中的 A4 大小页面？

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.

本质上，我希望能够在浏览器中显示 HTML 页面，并以 A4 尺寸页面的尺寸概述内容。

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.

为简单起见，我假设 HTML 页面将仅包含文本（无图像等）并且不会有<br>例如标签。

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

此外，当打印 HTML 页面时，它会以 A4 大小的纸页形式出现。

采纳答案by e-sushi

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

很久以前，在 2005 年 11 月，AlistApart.com 发表了一篇关于他们如何仅使用 HTML 和 CSS 出版一本书的文章。请参阅：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.

CSS2 有一个分页媒体的概念（想想纸页），而不是连续媒体（想想滚动条）。样式表可以设置页面的大小及其边距。可以给页面模板命名，元素可以说明它们想要打印在哪个命名页面上。此外，源文档中的元素可以强制分页。这是我们使用的样式表中的一个片段：

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

有一家美国出版商，我们得到了以英寸为单位的页面大小。作为欧洲人，我们继续使用公制测量。CSS 接受两者。

设置页面大小和边距后，我们需要确保在正确的位置有分页符。以下摘录显示了如何在章节和附录之后生成分页符：

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

此外，我们使用 CSS2 来声明命名页面：

div.titlepage {
  page: blank;
}

也就是说，标题页将打印在名称为“空白”的页面上。CSS2 描述了命名页面的概念，但它们的价值只有在页眉和页脚可用时才会显现出来。

Anyway…

反正…

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

由于您要打印 A4，因此您当然需要不同的尺寸：

@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.

在您的情况下，诀窍是首先创建打印 CSS。大多数现代浏览器（> 2005）支持缩放，并且已经能够显示基于打印 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.

现在，您需要让 Web 显示看起来有点不同，并调整整个设计以适应大多数浏览器（包括 2005 年之前的旧浏览器）。为此，您必须创建一个 Web CSS 文件或覆盖打印 CSS 的某些部分。在为 Web 显示创建 CSS 时，请记住浏览器可以有任何大小（想想：“移动”到“大屏幕电视”）。含义：对于 Web CSS，最好使用可变宽度 (%) 设置页面宽度和图像宽度，以支持尽可能多的显示设备和 Web 浏览客户端。

EDIT (26-02-2015)

编辑 (26-02-2015)

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

今天，我偶然在 SmashingMagazine 上偶然发现了另一篇最近的文章，该文章也深入探讨了使用 HTML 和 CSS 进行打印设计……以防万一你可以使用另一个教程。

EDIT (30-10-2018)

编辑 (30-10-2018)

It has been brought to my attention in that sizeis not valid CSS3, which is indeed correct — I merely repeated the code quoted in the article which (as noted) was good old CSS2 (which makes sense when you look at the year the article and this answer were first published). Anyway, here's the valid CSS3 code for your copy-and-paste convenience:

我注意到它size不是有效的 CSS3，这确实是正确的——我只是重复了文章中引用的代码（如前所述）是很好的旧 CSS2（当你查看文章的年份和此答案首次发布）。无论如何，这是为了方便您复制和粘贴的有效 CSS3 代码：

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

In case you think you really need pixels (you should actually avoid using pixels), you will have to take care of choosing the correct DPI for printing:

如果您认为您确实需要像素（您实际上应该避免使用像素），则必须注意选择正确的 DPI 进行打印：

• 72 dpi (web) = 595 X 842 pixels
• 300 dpi (print) = 2480 X 3508 pixels
• 600 dpi (high quality print) = 4960 X 7016 pixels

• 72 dpi (web) = 595 X 842 像素
• 300 dpi（打印）= 2480 X 3508 像素
• 600 dpi（高质量打印）= 4960 X 7016 像素

Yet, I would avoid the hassle and simply use cm(centimeters) or mm(millimeters) for sizing as that avoids rendering glitches that can arise depending on which client you use.

然而，我会避免麻烦并简单地使用cm（厘米）或mm（毫米）来调整大小，因为这可以避免根据您使用的客户端而可能出现的渲染故障。

回答by Tim McNamara

It would be fairly easy to force the web browser to display the page with the same pixel dimensions as A4. However, there may be a few quirks when things are rendered.

强制 Web 浏览器以与 A4 相同的像素尺寸显示页面是相当容易的。但是，在渲染事物时可能会有一些怪癖。

Assuming your monitors display 72 dpi, you could add something like this:

假设您的显示器显示 72 dpi，您可以添加如下内容：

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

回答by zurfyx

A4 size is 210x297mm

A4尺寸为210x297mm

So you can set the HTML page to fit those sizes with CSS:

因此，您可以使用 CSS 设置 HTML 页面以适应这些尺寸：

html,body{
    height:297mm;
    width:210mm;
}

回答by Pir Abdul

Create section with each page, and use the below code to adjust margins, height and width.

为每个页面创建部分，并使用以下代码调整边距、高度和宽度。

If you are printing A4 size.

如果您打印 A4 尺寸。

Then user

然后用户

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

then create a div with all your content in it.

然后创建一个包含所有内容的 div。

<div class="Section1"> 
    type your content here... 
</div>

or

或者

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

回答by Will Dean

I've used HTML to generate reports which print-out correctly at real sizes on real paper.

我已经使用 HTML 生成报告，这些报告可以在真实纸张上以真实尺寸正确打印出来。

If you carefully use mm as your units in the CSS file you should be OK, at least for single pages. People can screw you up by changing the print zoom in their browser, though.

如果您在 CSS 文件中小心地使用 mm 作为单位，您应该没问题，至少对于单个页面。不过，人们可以通过更改浏览器中的打印缩放来搞砸你。

I seem to remember everything I was doing was single page, so I didn't have to worry about pagination - that might be much harder.

我似乎记得我所做的一切都是单页的，所以我不必担心分页 - 这可能会困难得多。

回答by Cas Knook

I saw this solution after searching at google, search for "A4 CSS page template" (codepen.io). It shows an A4 (A3,A5, also portrait) sized area in the browser, using the <page> tag. Inside this tag the content is shown, but absolute position is still with respect to browser area.

我在谷歌搜索后看到了这个解决方案，搜索“A4 CSS页面模板”（codepen.io）。它使用 <page> 标签在浏览器中显示一个 A4（A3、A5，也是纵向）大小的区域。在这个标签内显示了内容，但绝对位置仍然是相对于浏览器区域的。

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

This works for me without any other css/js-library to be included. Works for current browsers (IE, FF, Chrome).

这对我有用，无需包含任何其他 css/js-library。适用于当前浏览器（IE、FF、Chrome）。

回答by Jacob

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

In your normal style.css:

在您的正常情况下style.css：

table.tableclassname {
  width: 400px;
}

In your print.css:

在您的print.css：

table.tableclassname {
  width: 16 cm;
}

回答by Wojciech Bednarski

Looking for similar problem I found this - http://www.indigorose.com/forums/archive/index.php/t-13334.html

寻找类似的问题我发现了这个 - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 is a document format, as a screen image that's going to depend on the image resolution, for example an A4 document resized to:

A4 是一种文档格式，作为将取决于图像分辨率的屏幕图像，例如 A4 文档调整为：

• 72 dpi (web) = 595 X 842 pixels
• 300 dpi (print) = 2480 X 3508 pixels (This is "A4" as I know it, i.e. "210mm X 297mm @ 300 dpi")
• 600 dpi (print) = 4960 X 7016 pixels

• 72 dpi (web) = 595 X 842 像素
• 300 dpi（打印）= 2480 X 3508 像素（这是我所知的“A4”，即“210mm X 297mm @ 300 dpi”）
• 600 dpi（打印）= 4960 X 7016 像素

回答by Quintin Humphreys

PPI and DPI make absolutely no difference to how a document will print off a browser. the printer takes no information on screen dot pitch or the DPI of the images etc. if you are printing images they would print at a size similar in proportion to how they are displayed on screen. the print processor of the browser would increase the DPI of the images from something rather low like 72dpi to whatever DPI the rest of the document is. say the image displays as half a page wide, then its about 4" wide physically. the pixel width of the image would be approx 300px to display correctly in the browser. by the time it prints at a nominal 300DPI, the processor has added pixels and the image will grow to around 1200px which at 300 DPI is 4".

PPI 和 DPI 对文档在浏览器上的打印方式完全没有区别。打印机不获取有关屏幕点距或图像 DPI 等的信息。如果您正在打印图像，它们的打印尺寸与它们在屏幕上的显示方式相似。浏览器的打印处理器会将图像的 DPI 从相当低的 72dpi 增加到文档其余部分的任何 DPI。假设图像显示为半页宽，然后它的物理宽度约为 4"。图像的像素宽度约为 300 像素才能在浏览器中正确显示。当它以标称 300DPI 打印时，处理器已经添加了像素并且图像将增长到 1200 像素左右，在 300 DPI 下为 4"。

when it comes to vector or non pixel based elements like text, the printer chooses its own DPI from the driver which doesnt relate to screen dot pitch or browser width etc. if the browser is 3000px wide, the print processor will wrap text as appropriate.

当涉及基于矢量或非像素的元素（如文本）时，打印机从驱动程序中选择自己的 DPI，这与屏幕点距或浏览器宽度等无关。如果浏览器的宽度为 3000 像素，则打印处理器将适当地换行文本。

heres what makes it hard about creating print displays: each browser and printer will interpret text sizes (pt, em, px) and spacing in its own way. depending on what printer, browser and maybe even OS you use, you will get a different amount of lines and characters per page. so even if you test on your computer using your browser and printer and figure out that you can display the text in a box at 640x900px and its perfect on print, the next guy who tries to print will possibly get it printing differently. there really is no way to force each printer and browser to get it identical each time.

这是创建打印显示变得困难的原因：每个浏览器和打印机都会以自己的方式解释文本大小（pt、em、px）和间距。根据您使用的打印机、浏览器甚至操作系统的不同，每页的行数和字符数会有所不同。因此，即使您使用浏览器和打印机在计算机上进行测试并发现您可以在 640x900 像素的框中显示文本并且它在打印时非常完美，但下一个尝试打印的人可能会以不同的方式打印。真的没有办法强制每台打印机和浏览器每次都让它相同。

forget pixels and moreso forget DPI, the only thing you could use pixels for is setting a table width that simulates the width of a printable area on your printer. in that case i found that 640px wide is close.

忘记像素，更忘记 DPI，您唯一可以使用像素的方法是设置一个表格宽度来模拟打印机上可打印区域的宽度。在那种情况下，我发现 640px 宽很接近。

回答by Yves Lange

I know that this subject is quite old but I want to share my experience about that topic. Actually, I was searching a module that can help me with my daily reports. I'm writting some documentations and some reports in HTML + CSS (instead of Word, Latex, OO, ...). The objectif would be to print them on A4 paper to share it with friends, ... Instead of searching, I decided to have a small funny coding session to implement a simple lib that can handle "pages", page number, summary, header, footer, .... Finally, I did it in ~~2h and I know that's not the best tool ever but it's almost ok for my purpose. You can take a look at this project on my repo and don't hesitate to share your ideas. It's maybe not what you are searching for at 100% but I think that this module can help you.

我知道这个主题已经很老了，但我想分享我对这个主题的经验。实际上，我正在搜索一个可以帮助我处理日常报告的模块。我正在用 HTML + CSS（而不是 Word、Latex、OO 等）编写一些文档和一些报告。目标是将它们打印在 A4 纸上与朋友分享，...而不是搜索，我决定进行一个小型有趣的编码会话来实现一个可以处理“页面”、页码、摘要、标题的简单库，页脚，.... 最后，我在 ~~2 小时内完成了，我知道这不是有史以来最好的工具，但它几乎可以满足我的目的。你可以在我的 repo 上查看这个项目，并毫不犹豫地分享你的想法。这可能不是您 100% 搜索的内容，但我认为该模块可以帮助您。

Basically I create a page of body "width: 200mm;" and container of height: 290mm (smaller than A4). Then I used page-break-after: always; so the "print" option of the browser know when to split pages.

基本上我创建了一个正文页面“宽度：200mm;” 容器高度：290mm（小于A4）。然后我使用 page-break-after: always; 因此浏览器的“打印”选项知道何时拆分页面。

repo: https://github.com/kursion/jsprint

回购：https: //github.com/kursion/jsprint