用于印刷海报的 HTML 和 CSS
[英]HTML & CSS for printed posters
问题描述
Introduction
介绍
HTML5 tools such as deck.js or reveal.js seem great for presentations, including scientific presentations where good-looking mathematics can easily be added with MathJax.诸如deck.js或reveal.js 之类的HTML5 工具似乎非常适合演示文稿，包括可以使用MathJax 轻松添加美观数学的科学演示文稿。
Closely related to scientific presentations are printed posters ( examples ), and I am wondering if it would be possible to use HTML & CSS to produce them.与科学演示密切相关的是印刷海报（ 示例），我想知道是否可以使用 HTML 和 CSS 来制作它们。 This seems to me to be a good idea because:在我看来，这是个好主意，因为：
- Images, tables, mathematics etc can all be easily included图像、表格、数学等都可以轻松包含在内
- Typical grid-based layouts are commonly in both posters and HTML/CSS典型的基于网格的布局通常出现在海报和 HTML/CSS 中
- The content would be well-separated from the presentation, making re-use easier (eg between presentations and posters)内容将与演示文稿分开，使重用更容易（例如在演示文稿和海报之间）
- A copy of the poster could be shared on the web with little modification海报的副本可以在网络上共享，只需稍作修改
The problem is that most CSS frameworks (eg Bootstrap ) allow for fixed-width layouts but assume that the page will scroll down as far as necessary to fit all the content.问题是大多数 CSS 框架（例如Bootstrap ）允许固定宽度的布局，但假设页面将尽可能向下滚动以适应所有内容。 On the other hand, for a poster the layout needs to behave similarly in the horizontal and vertical directions, with a grid which fills the exact dimensions of the paper.另一方面，对于海报，布局需要在水平和垂直方向上表现相似，网格填充纸张的确切尺寸。
Questions问题
- Are there any CSS frameworks that allow easy layout of content on a fixed-width & fixed-height 2D grid?是否有任何 CSS 框架允许在固定宽度和固定高度的 2D 网格上轻松布局内容？
- Are any special techniques needed to get from the HTML page to, say, an A1 size PDF?从 HTML 页面获取到 A1 大小的 PDF 是否需要任何特殊技术？
Edit:编辑：
I know about LaTeX and have used it to make presentations and reports.我了解 LaTeX 并用它来制作演示文稿和报告。 It's possible to use it for posters too, but my experience has been that it very quickly requires a lot more tweaking and knowledge if you need to alter the most basic poster layouts.也可以将它用于海报，但我的经验是，如果您需要更改最基本的海报布局，它很快就需要更多的调整和知识。
2 个解决方案
解决方案1
1 2017-11-15 21:31:15
It is surprisingly straightforward to roll out your own CSS/HTML template for a printer poster.为打印机海报推出自己的 CSS/HTML 模板非常简单。 It is much easier than LaTeX with its weird defaults and obtuse treatment of graphics, layout, and color.它比 LaTeX 更容易，因为它具有奇怪的默认值以及对图形、布局和颜色的钝处理。 And it is much neater than PowerPoint as it provides a lot more consistency and "reuse/programmability" in the creation of the layout.它比 PowerPoint 简洁得多，因为它在创建布局时提供了更多的一致性和“重用/可编程性”。
First of all, you need to set the size of your paper:首先，您需要设置纸张的大小：
body {
width: 48in;
height: 36in;
}
Then you need some generic layout:然后你需要一些通用的布局：
<body>
<div class="poster">
<h1 class="poster-title">...</h1>
<h2 class="poster-authors">...</h2>
<h3 class="poster-affiliations">...</h3>
<hr class="fancy-line">
<div class="container">
<div class="row">
<!-- A bunch of Bootstrap columns (but here it would be a good place to
use CCS Grids too) -->
</div>
</div>
</div>
</body>
And if you like the defaults of a CSS library like Bootstrap, you can use it for most of the components (I particularly like the panels).如果你喜欢像 Bootstrap 这样的 CSS 库的默认设置，你可以将它用于大多数组件（我特别喜欢面板）。
You can also use some newer flexbox styling for a neater layout您还可以使用一些较新的 flexbox 样式来实现更整洁的布局
I have template based on those ideas that I would be happy to share (and a somewhat longer description of the tools I used) 我有基于我很乐意分享的想法的模板（以及对我使用的工具的较长描述）
And here is an example of a poster built with it 这是一个用它制作的海报的例子
It is not a ready to use CSS framework, but importantly, it is just 20ish lines of custom CSS you can put on top of any CSS framework.它不是一个随时可用的 CSS 框架，但重要的是，它只是 20 行左右的自定义 CSS，您可以放在任何 CSS 框架之上。
解决方案2
0 2013-04-29 13:39:44
Why don't you try LaTeX .你为什么不试试LaTeX 。 Its not html or css, but its code based and you can create the kind of example posters you shared and some really awesome presentations.它不是 html 或 css，而是基于代码的，您可以创建您共享的那种示例海报和一些非常棒的演示文稿。
All you have to do is download LaTeXilla (Linux).您所要做的就是下载LaTeXilla (Linux)。
There are plenty of LaTeX poster templates available.有很多可用的 LaTeX 海报模板。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.