如何在A4纸尺寸页面中创建HTML页面？ [英] How to make a HTML Page in A4 paper size page(s)?

问题描述

是否可以使HTML页面的行为，例如，像MS Word中的A4大小的页面？

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

基本上，我想能够显示浏览器中的HTML页面，以及以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页面只包含文本（没有图片等），并且不会有 < br> 标签。

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页面打印时，它将作为A4大小的纸张页出现。

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

推荐答案

过去，在2005年11月，AlistApart.com发表了一篇关于他们如何使用HTML和CSS 。请参阅： http://alistapart.com/article/boom

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有一个分页媒体的概念滚动条）。样式表可以设置页面的大小及其边距。页面模板可以给定名称，元素可以陈述他们想要在其上打印哪个命名页面。此外，源文档中的元素可能会强制分页。这是我们使用的样式表的一个片段：

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;
}

拥有美国的发布商，我们获得了以英寸为单位的页面大小。我们作为欧洲人，继续进行公制测量。 CSS接受两者。

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;
}

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

Also, we used CSS2 to declare named pages:

div.titlepage {
  page: blank;
}

也就是说，标题页打印在名称为空白。CSS2描述了命名页的概念，但是当页眉和页脚可用时，它们的值才变得明显。

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.

无论如何...

需要不同尺寸的课程：

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

在你的情况下，诀窍是首先创建打印CSS。大多数现代浏览器（> 2005）支持缩放，并且已经能够显示基于打印CSS的网站。

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.

现在，您需要使网页显示看起来有点不同，并适应整个设计，以适应大多数浏览器（包括旧的，2005年之前的版本）。为此，您必须创建一个Web CSS文件或覆盖打印CSS的某些部分。在为网页显示创建CSS时，请记住浏览器可以有任何大小（请考虑：移动到大屏幕电视）。含义：对于web 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）

绊倒另一个，最近的 SmashingMagazine的文章，它也潜入设计使用HTML和CSS打印...只是为了您可以使用yet-another-tutorial。

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.

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