利用CSS来实现在线打印！

如果你提到印刷用CSS在网上,很多人工作 打印样式表 是想到使用。 我们都是用来创建一个样式表时要求web文档打印出来。 这些样式表确保打印版本是清晰的,我们不会引起用户打印出巨大的图像。 然而,CSS也被用于格式书,目录和小册子,内容可能从未被设计为一个web页面。

在本文中,我们将看看CSS模块创建了用于web浏览器,但处理印刷和分页的媒体。 我将解释如何选择器,属性和值,他们介绍工作。 我完成了一个工作示例,您可以使用作为一个起始点为自己的实验。 对于这个例子,我们将需要一个支持这一专业的用户代理CSS。 我将使用的王子,这是一个商业产品。 然而,王子有一个免费的版本,可用于非商业用途,使其很好的工具来尝试这些例子。

为什么打印HTML和CSS有意义吗

这看起来可能有点奇怪,内容不是特别的web应该保持HTML和CSS格式化。 这看起来就没那么怪当你意识到流行的电子书阅读器格式如EPUB和手机域名是HTML和CSS。 此外,即使整个手稿或目录不是在网站上发表,其中一些可能会。 HTML成为一个方便的格式标准化,更容易处理比拥有一切在Word文档或传统的桌面发布包。

CSS的网页之间的差异和CSS打印

和概念转变,最大的区别是,打印文件是指一个页面一个固定大小的模型。 而在网络上我们不断提醒我们不知道视窗的大小,在打印每个页面都有一个固定大小的关系,我们所做的一切。 由于这种固定的页面大小,我们必须考虑我们的文档页面的集合,分页的媒体,而非连续介质,是一个web页面。

分页的媒体介绍的概念,在网络上没有任何意义。 例如,您需要能够生成页码,把章标题的利润率,打破内容适当,以便数据并不成为与他们分离的标题。 您可能需要创建交叉引用和脚注,从您的文档索引和表的内容。 你可以将文档导入一个桌面出版包和手动创建所有的这一切,然而,工作就需要重做你下次更新副本。 的,这就是CSS规范被设计用于创建分页的媒体。

因为分页的规范设计媒体,我们不会考虑浏览器支持本文——它不会很多的意义。 稍后,我们将看一个用户代理设计将HTML和CSS变成一个PDF使用这些规范。

规范

CSS的你已经知道将有用的格式打印。 专为打印,我们有“ CSS分页媒体模块 ”和“ CSS生成内容分页媒体模块 ”规范。 让我们来看看这是如何工作的。

@PAGE规则

的 @page 规则允许您指定一个页框的各个方面。 例如,您需要指定页面的尺寸。 下面的规则指定一个默认页面大小为5.5 - 8.5英寸。 如果你想打印一本书,也许是由按需印刷服务,然后发现大小您可以使用是很重要的。

@page { size: 5.5in 8.5in; }

除了指定的大小和长度值,也可以使用纸张大小关键字,如“A4”或“法律”。

@page { size: A4; }

你也可以使用一个关键字指定页面的方向——“肖像”或“景观”。

@page { size: A4 landscape; }

理解页面模型

在进一步讨论之前,我们应该理解页面分页模型媒体是如何工作的,因为它的行为有点不同屏幕上的东西是如何工作的。

页面模型定义了一个区域,然后16周围 保证金盒子 。 您可以控制页面的大小之间的区域和边缘的大小页面的边缘区和页面本身。 表的规范解释很好这些箱子的大小。

( 看到大版本 )

页面上的页面区域空间将您的页面内容流。 当它跑出房间,就会创建另一个页面。 保证金框仅用于CSS-generated内容。

左和右页面传播

页面模型的另一个方面是,它定义了伪类选择器的左和右页的文档。 如果你看看你手头的任何印刷书籍,您可能会看到利润的规模和利润率的在左边和右边页面内容是不同的。

我们可以使用这些选择器来定义不同的幅度大小对我们的页面。

@page :left { margin-left: 3cm; } @page :right { margin-left: 4cm; }

另外两个伪类选择器定义。 的 :首先 选择目标文档的第一页。

@page :first { }

的 :空白 伪类选择器目标“故意留空的任何页面。 “添加这个文本,我们可以使用生成的目标上方边缘框的内容。

@page :blank { @top-center { content: "This page is intentionally left blank." } }

生成的内容和分页的媒体

在最后一个示例中,我们使用CSS-generated内容向上方边缘添加文本框。 你会发现,生成创建我们的书内容至关重要。 这是唯一的方法可以添加到我们的保证金盒子。 例如,如果我们想要将这本书的标题添加到左下边缘盒右页,我们将使用生成的内容。

@page:right{ @bottom-left { margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: "My book"; font-size: 9pt; color: #333; } }

分页符

还“分页媒体”的一部分规范是如何控制分页符的信息。 如已述,一旦页面内容填充区域,它将移动到一个新的页面。 如果一个标题刚刚被写入页面,你可能最终与一个标题的页面完成,相关内容在下一页开始。 在印刷书籍,你会尽量避免这种情况。 其他地方你可能希望避免休息之间的中间表和图及其说明。

一本书的新篇章 H1 标题是常见的。 迫使这个标题的开始页面,设置 page-break-before 来 总是 。

h1 { page-break-before: always; }

为了避免一个标题后直接减免,使用 page-break-after 。

h1, h2, h3, h4, h5 { page-break-after: avoid; }

为了避免破坏数据和表,使用 page-break-inside 财产。

table, figure { page-break-inside: avoid; }

计数器

书都是关于编号的东西——页面,章节,甚至数据。 我们可以通过CSS添加这些数字,拯救我们脱离不得不重编号的一切,因为我们决定说,添加一个新的图壮志未酬身先死一个章。 我们这样做是使用 CSS计数器 。

最明显的地方开始页码。 CSS给了我们一个预定义的页计数器,它始于1和增量与每一个新页面。 在你的样式表中,您将使用此计数器作为生成内容的价值,把页计数器在你的一个盒子。 在下面的示例中,我们添加页码右页面的右下角,左页的左下角。

@page:right{ @bottom-right { content: counter(page); } } @page:left{ @bottom-left { content: counter(page); } }

我们还创建了一个计数器 页面 。 此计数器将永远是你的文档的总页数。 如果你想输出”120年第3页,“你可以。

@page:left{ @bottom-left { content: "Page " counter(page) " of " counter(pages); } }

您可以创建自己的柜台和增量和重置您需要。 要创建一个计数器,使用 counter-reset 财产,增量 counter-increment 。 下面的CSS规则将创建一个柜台章命名 chapternum 并与每个增量 H1 ——在这本书中一个章节的开始。 然后,我们使用该计数器的值生成内容添加章节号和前一段章的实际题目。

body { counter-reset: chapternum; } h1.chapter:before { counter-increment: chapternum; content: counter(chapternum) ". "; }

我们可以做相同的数据在书中。 数字数据的一种常见方法是使用 chapternum.figurenum 。 所以,“图3 - 2”将在第三章第二图。 在 H1 ,我们可以重置 figurenum 为了使每一章开始从1。

body { counter-reset: chapternum figurenum; } h1 { counter-reset: figurenum; } h1.title:before { counter-increment: chapternum; content: counter(chapternum) ". "; } figcaption:before { counter-increment: figurenum; content: counter(chapternum) "-" counter(figurenum) ". "; }

设置字符串

再看一个印刷书籍。 当你翻阅一章,你会看到这一章的标题是印在左边或者右边页面。 这听起来可能有点奇怪,“生成内容分页媒体”规范让我们使用CSS实现这一目标。

我们使用一个属性命名 绳子 在选择我们想要的内容。 章的标题,这将是 H1 。 的价值 绳子 是你想给这个内容,然后呢 内容() 。 然后您可以输出,这是使用生成的内容 字符串() 。

h1 { string-set: doctitle content(); } @page :right { @top-right { content: string(doctitle); margin: 30pt 0 10pt 0; font-size: 8pt; } }

当你生成分页的媒体,每次一个 H1 发生时,写入的内容 doctitle 然后在右上的保证金框中输出的右页,只有当另一个变化 H1 发生。

脚注

脚注的一部分” CSS生成内容分页媒体模块 ”规范。 脚注的工作方式是,您将添加的文本脚注内联,裹在HTML标记(可能是一个跨度),与一个类来将其识别为一个脚注。 当页面生成的内容,删除“脚注元素”,变成一个脚注。

在CSS中,使用脚注的价值 浮动 为你的脚注类属性来创建一个规则。

.fn { float: footnote; }

在你的文档中,使用这个类来包装任何脚注文本。

FootnotesFootnotes and notes placed in the footer of a document to reference the text. The footnote will be removed from the flow when the page is created.span> are useful in books and printed documents.p>

脚注有一个预定义的计数器,以同样的方式表现为页计数器。 通常,您会希望通过1每次递增计数器 FN 类和重置它发生在每一章的开始。

.fn { counter-increment: footnote; } h1 { counter-reset: footnote; }

脚注的各个部分可以有针对性的CSS伪元素。 的 footnote-call 是数字的锚文本,显示有一个脚注。 这使用脚注计数器的值作为生成的内容。

.fn::footnote-call { content: counter(footnote); font-size: 9pt; vertical-align: super; line-height: none; }

的 脚注标记 是前面的数字标记放置在脚注文本文档的页脚。 这些行为以类似的方式有序列表的数据生成CSS。

.fn::footnote-marker { font-weight: bold; }

脚注本身被放置在页边,在一个特殊区域页面的命名 @footnotes 。 你将目标和风格,面积如下。

@page { @footnotes { border-top: 1pt solid black; } }

交叉引用

在继续工作之前我们学到的一切的例子,让我们看看交叉引用。 在网络上,我们通过添加链接交叉引用的东西。 在书中或其他印刷文档,您通常会参考引用的页码的地方被发现。 因为页码可能会改变根据这本书是印刷的格式和版本之间用CSS这样为我们省去了经历和改变所有的数字。

我们使用另一个新属性, target-counter 添加这些数字。 首先创建链接在你的文档中,给他们一个 href ,这是在文档中元素的ID,您想要的目标。 同时,添加一个类来识别它们交叉引用,而不是外部链接,我使用 xref 。

Chapter 1a>

链接之后,再次使用生成的内容输出 (x)页 ,在那里 X 是书中的位置的数量,可以找到ID。

a.xref:after { content: " (page " target-counter(attr(href, url), page) ")"; }

我们会看这种技术在实践中当我们创建一个工作示例的目录。

把它放在一起:一个例子的书

我们看了很多不同的属性在隔离。 他们更有意义,一旦你把它们使用通过构建一本书。

实际使用这个CSS创建一本书,你需要一个支持它的用户代理。 目前,很少有事情实现这个规范;是最容易的一个 王子 。 一个独立的商业许可王子是昂贵的,但是,您可以使用王子为非商业项目免费。 这意味着,如果你只是想尝试这些技术,你可以。 另外,如果你有非商业使用这种技术,你可以用王子那些书格式。

我已经提取通道古登堡计划从我最喜欢的一本书, 我们的猫 由哈里森堰 。 我选择这本书是因为我喜欢猫,因为它有图片和脚注,我可以使用它来证明格式。

你可以找到我的文件使用,再加上一个生成的PDF,结束了 GitHub上 。 如果你想尝试CSS和构建这本书你自己,那么你将需要下载并安装 王子 。 王子是一个命令行工具在Mac上,虽然有一个Windows的GUI,我将使用命令行,因为它真的是非常简单的。

使用一个终端窗口,切换到你的书的目录或从GitHub的位置你下载我的文件。

cd /Users/username/smashing-css-books

现在,运行王子:

prince -s pdf-styles.css book.html builds/book.pdf

这将创建一个PDF中 构建 文件夹命名 book.pdf 。 现在,如果你进行任何更改CSS和HTML,您可以运行看看王子是不同的。

HTML文档

我的整个编译“书”在一个HTML文档。 编译文件王子是可能的,但我发现它更简单的只是处理一个大文档。 之前的章节,从一开始 H1 ,我有一个div,包含封面图像,然后对书的目录。

目录链接id章节的 H1 标题。