如何在 A4 纸张大小的页面中制作 HTML 页面? [英] How to make a HTML Page in A4 paper size page(s)?

问题描述

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

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

为了简单起见，我假设 HTML 页面将只包含文本(没有图像等)并且没有 <br> 标签.

此外，当 HTML 页面被打印出来时，它会以 A4 大小的纸页出现.

解决方案

很久以前，在 2005 年 11 月，AlistApart.com 发表了一篇关于他们如何仅使用 HTML 和 CSS 出版一本书的文章.请参阅:http://alistapart.com/article/boom

这是那篇文章的摘录:

<块引用>

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

@page {尺寸:7 英寸 9.25 英寸；边距:27mm 16mm 27mm 16mm；}

<块引用>

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

<块引用>

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

div.chapter, div.appendix {分页后:总是；}

<块引用>

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

div.titlepage {页:空白；}

<块引用>

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

无论如何……

既然要打印 A4，当然需要不同的尺寸:

@page {尺寸:21cm 29.7cm；边距:30mm 45mm 30mm 45mm；/* 根据需要更改边距.*/}

这篇文章深入探讨了设置分页符等内容，因此您可能需要完整阅读.

就您而言，诀窍是先创建打印 CSS.大多数现代浏览器(> 2005)都支持缩放，并且已经能够显示基于打印 CSS 的网站.

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

编辑 (26-02-2015)

今天，我偶然发现了另一个更新的SmashingMagazine 上的文章，其中还深入探讨了使用 HTML 和 CSS 进行印刷设计……以防万一您可以使用另一个教程.

编辑 (30-10-2018)

我注意到 size 不是有效的 CSS3，这确实是正确的——我只是重复了文章中引用的代码(如前所述)是很好的旧 CSS2(当您查看文章和此答案首次发表的年份时，这是有道理的).无论如何，这里是为您方便复制和粘贴的有效 CSS3 代码:

@media print {身体{宽度:21cm；高度:29.7cm；边距:30mm 45mm 30mm 45mm；/* 根据需要更改边距.*/}}

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

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

然而，我会避免麻烦并简单地使用 cm(厘米)或 mm(毫米)来调整大小，因为这样可以避免渲染故障，具体取决于哪个客户端你用.

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.

解决方案

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)

It has been brought to my attention in that size is 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:

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

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

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.

这篇关于如何在 A4 纸张大小的页面中制作 HTML 页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！