rachel zhang

A big thank you to Jeff Smith for having reviewed and edited this article.

非常感谢Jeff Smith审阅并编辑了本文。

关于分页媒体CSS的回顾 (A Recap on CSS for Paged Media)

Do you remember when CSS did not yet exist? Probably not, but let me tell you… when CSS arrived, it introduced a completely new way of thinking about web layouts. In fact, we haven’t stopped experimenting with layouts since! There’s always an emerging layout trend that’s pushing new ideas and the very boundaries of CSS.

您还记得CSS不存在的时候吗？ 可能不是 ，但是让我告诉您……CSS到来时，它引入了一种全新的Web布局思考方式。 实际上，从那以后我们就没有停止过尝试布局！ 总有一种新兴的布局趋势推动着新的想法和CSS的界限。

Last week we spoke with Rachel Andrew, a CSS Working Group Invited Expert, and Founder of Edge of my Seat. Rachel is passionate about CSS, and that passion has clearly made her stand out as a master of her craft, especially when working with paged media. She has even worked with us to produce our own book layouts here at SitePoint — all with CSS! CSS for paged media is such a niche topic, and this is exactly the reason that we were blown away when Rachel decided to join us for a Q&A to answer your questions. Let’s dig in!

上周，我们与CSS工作组特邀专家 ， Edge of my Seat创始人Rachel Andrew进行了交谈。 雷切尔(Rachel) 对 CSS 充满热情 ，这种热情显然使她脱颖而出，成为精通Craft.io的大师，尤其是在使用分页媒体工作时。 她甚至与我们一起在SitePoint上制作了自己的书籍版式-全部使用CSS！ 分页媒体CSS就是一个小众话题，这正是Rachel决定加入我们进行问答以回答您的问题时被我们吓了一跳的原因。 让我们开始吧！

您对雷切尔的提问 (Your Questions for Rachel)

问：我想知道在打印页面和网页中进行页面布局时的主要区别是什么？ 对于不适用于网页的打印有哪些注意事项？ (Q: I would be interested in knowing what the main differences are when approaching page layout within a print page and web page? What considerations are there for the print that don’t apply to a web page?)

Rachel: In some ways, working with a fixed size page in paged media is a lot easier, as you are outputting to a known format.

Rachel：在某些方面，由于要输出为已知格式，因此在分页媒体中处理固定大小的页面要容易得多。

The main difference is that with paged media you have a page model, which has margin boxes which you can then insert stuff into with generated content. The example provided in the Prince docs is a good one because most of the learning curve in moving from the web to print is understanding that model.

主要区别在于，使用分页媒体时，您具有页面模型，该模型具有页边距框，然后您可以将其与生成的内容一起插入。 Prince文档中提供的示例是一个很好的例子，因为从网络到打印的大部分学习过程都是了解该模型。

问：CSS中用于印刷媒体的哪些课程或技术可以很容易地转移回网页设计中？ (Q: What lessons or techniques from CSS for print media can be readily transferred back to the design of web pages?)

Rachel: The CSS Working Group are working on a rewrite of the CSS Generated Content module. This is where you can use the content property to insert stuff into your document from CSS.

Rachel： CSS工作组正在重写CSS Generated Content模块 。 在这里，您可以使用content属性从CSS将内容插入文档中。

In print, we heavily rely on Generated Content – it’s how you insert content into headers and footers, such as creating page numbers, dynamically adding the chapter title, and so on. That note on the CSS WG blog says:

在印刷品中，我们严重依赖“ 生成的内容” ，这是将内容插入页眉和页脚的方式，例如创建页码，动态添加章节标题等。 CSS WG博客上的注释说：

“For those who want to toy with implementations, most CSS->PDF renderers already support a significant subset.”

“对于那些想通过实现玩弄的人来说，大多数CSS-> PDF渲染器已经支持了很大一部分。”

It may be that we will start to have more access to the things from the generated content for paged media specifications available in a web context — assuming browsers support it, of course.

也许我们将开始从生成的内容中获取更多内容，以获取Web上下文中可用的分页媒体规范-当然，假设浏览器支持它。

问：多年来，为实现打印CSS进行了几次尝试，例如Hakon关于打印页面媒体的提议 ，该提议落在了优先工作的前面。 您能否解释一下当前CSS改进页面介质上的打印质量和/或扩展的方法？ (Q: There have been several attempts over the years to implement CSS for print, such as Hakon’s proposal for paged media for print, which fell to the wayside in favor of higher priority work. Could you explain a little about the current approach to CSS for print improvements and/or expansions on paged media?)

Rachel: I think there are a bunch of interesting ideas out there, much of the problem is that to actually use this stuff you need a specific UA, which puts people off.

Rachel：我认为那里有很多有趣的想法，很多问题是，要真正使用这些东西，您需要一个特定的UA ，这会让人们感到厌烦 。

I was recently playing around with the ideas in Hakon’s CSS Figures specification, having a look at what was possible with things we have or might have in future.

最近，我正在研究HakonCSS Figures规范中的想法，并研究了我们将来可能拥有或可能拥有的东西 。

The paged media specifications itself defines the canvas we are working on. The other useful functionality is in the current generated content for paged media specifications. Where that goes in the future probably depends on demand. My feeling is that there would be more demand if authors knew what was possible in these dedicated User Agents. They’d be keen to see it in browsers too!

分页的媒体规范本身定义了我们正在处理的画布。 其他有用的功能是在用于分页媒体规范的当前生成的内容中。 未来的发展可能取决于需求。 我的感觉是， 如果作者知道这些专用用户代理中的功能，将会有更多的需求。 他们也渴望在浏览器中看到它！

问：关于如何设置要打印的页面，您有一些基本建议吗？ (Q: Do you have some basic recommendations on how to set up a page to be printed?)

Rachel: To have full control of print output you do need to print via a UA that fully supports these specifications. The control you have when printing directly from a browser is very limited.

Rachel：要完全控制打印输出，您确实需要通过完全支持这些规格的UA进行打印。 直接从浏览器进行打印时所具有的控制非常有限。

The good news is that working with a dedicated print user agent isn’t any harder than writing CSS for the web once you have figured out the different page model that you are dealing with. While I’ve been mostly working with books, it’s also possible to use the Prince UA via an API (directly, as you can install Prince on your server, or via a third party service https://docraptor.com/). So if you had to format invoice PDFs, for example, or a report, you could do this from live data, really just as you would a web page.

好消息是，一旦您确定了要处理的其他页面模型，使用专用的打印用户代理就比编写用于WebCSS难。 在我主要从事书籍工作的同时，也可以通过API使用Prince UA(直接，因为您可以在服务器上安装Prince或通过第三方服务https://docraptor.com/ )。 因此，例如，如果您必须格式化发票PDF或报表，则可以像使用网页一样从实时数据中进行格式化。

问：已经完成了与SitePoint一样多的书籍，您觉得仍然缺少“ CSS for print”或用于印刷的工具吗？ (Q: Having done as many books for SitePoint as you now have, where do you feel that either ‘CSS for print’, or the tools for it, are still lacking?)

Rachel: Every time I do something specific I come up with something new. For example, in SitePoint books we have a lot of code, and I wanted to insert a code wrapping character when it breaks. I ended up writing some gnarly JavaScript to deal with that. Thankfully Prince will run JavaScript so you can do stuff to your document using scripting when you hit the limits of what the UA can do.

雷切尔(Rachel)：每次我做一些特定的事情时，我都会提出一些新的东西。 例如，在SitePoint书籍中，我们有很多代码，我想在代码中断时插入一个换行符。 我最终写了一些粗糙JavaScript来解决这个问题。 幸运的是，Prince将运行JavaScript，因此当您达到UA可以做的极限时，您可以使用脚本对文档进行处理。

问：听起来像Prince这样的用户代理正在帮助保持CSS用于打印的想法。 如果打印样式消失，这将是一种真正的耻辱。 @rachelandrew —您对这个领域可能引起什么兴趣有任何想法吗？ (Q: It sounds like user agents like Prince are helping to keep alive the idea of CSS for print. It seems like it would be a real shame if print styles faded away. @rachelandrew — Do you have any thoughts on what might revive interest in this area?)

Rachel: If we want browsers to support this stuff better, then it really is up to us as a community to request that support. This is true for anything we want to see support for. Make some noise about it!

Rachel：如果我们希望浏览器更好地支持这些东西，那么作为一个社区，我们真的需要请求这种支持。 对于我们希望获得支持的任何事情都是如此。 发出一些声音！

You can make noise in a couple of ways. You can directly ask browsers for support, and also you can just write about it. Show that there is web community interest and use cases for support, so that when these topics come up and the question is asked “Do web developers care about this?” the answer is clearly yes. And if it’s being written about, that can be easily demonstrated with a quick web search.

您可以通过两种方式发出声音。 您可以直接向浏览器寻求支持，也可以直接写些支持。 证明有Web社区的兴趣和支持的用例，以便当出现这些主题并提出问题时：“ Web开发人员会关心吗？” 答案显然是肯定的。 如果正在撰写，可以通过快速的网络搜索轻松证明。

问：您是否知道成本更低的可行替代方案？ (Q: Do you know of viable alternatives that are less costly?)

Rachel: All the specialist tools have a price tag. You can use the Prince technology via an API at DocRaptor which may work out better depending on your use case.

瑞秋：所有专业工具都有价格标签。 您可以通过DocRaptor上的API使用Prince技术，根据您的用例，效果可能会更好。

In terms of output to other formats, you really need other tools for those. It turns out that it is far easier to get HTML & CSS into EPUB or Mobi (Kindle) format as these formats are essentially HTML and CSS anyway.

在输出到其他格式方面，您确实需要其他工具。 事实证明，将HTML和CSS转换为EPUB或Mobi(Kindle)格式要容易得多，因为这些格式本质上都是HTML和CSS。

To get to EPUB I use Pandoc and then tidy up in Sigil. I then turn an EPUB into a Mobi with the Kindlegen tool.

要使用EPUB，我先使用Pandoc ，然后在Sigil中整理一下。 然后，我使用Kindlegen工具将EPUB转换为Mobi。

It’s mostly a command line stack, so you can pretty much automate all this stuff and just spit out a bunch of versions of a book from your document. If it is just something simple, that might be all you need to do, otherwise you can use them as a starting point to tweak.

它主要是一个命令行堆栈，因此您几乎可以使所有这些工作自动化，并且只需从文档中吐出一堆书的版本即可。 如果这只是简单的事情，那可能就是您所要做的，否则，您可以将它们用作调整的起点。

想要更多？ (Want more?)

Head on over to our Q&A to see the conversation in its entirety! Rachel may have left the conversation, but it doesn’t have to mean the chat is over. Go on in and continue the discussion with our vibrant community members!

前往我们的问答 ，查看整个对话！ 雷切尔可能已退出对话，但这并不一定意味着聊天已经结束。 继续并与我们充满活力的社区成员继续讨论！

翻译自: https://www.sitepoint.com/translating-css-paged-media-rachel-andrew/

rachel zhang