HTML和CSS用于打印海报

Question

HTML和CSS用于打印海报

htmlcssposter

8

介绍

HTML5工具，例如deck.js或reveal.js，对于演示文稿非常有用，包括科学演示文稿，可以轻松使用MathJax添加漂亮的数学公式。

与科学演示文稿密切相关的是印刷海报（例子），我想知道是否可能使用HTML和CSS来制作它们。这对我来说似乎是一个好主意，因为：

图像、表格、数学等都可以轻松地包含在内
典型的基于网格的布局通常在海报和HTML/CSS中都很常见
内容将与演示文稿分离得很好，使得重新使用更容易（例如，在演示文稿和海报之间）
可以分享一份海报，几乎不需要修改就可以在网络上共享

问题在于大多数CSS框架（例如Bootstrap）允许使用固定宽度布局，但假设页面会向下滚动以适应所有内容。另一方面，对于海报，布局需要在水平和垂直方向上表现出相似的行为，使用填满纸张精确尺寸的网格。

问题

是否有任何CSS框架可以轻松布置固定宽度和高度的二维网格上的内容？
需要哪些特殊技术才能从HTML页面获得A1大小的PDF文件？

编辑：

我知道LaTeX并已用它制作演示文稿和报告。它也可以用于制作海报，但我的经验是，如果您需要更改最基本的海报布局，则需要进行更多的调整和了解。

- ricklupton

2个回答

0

为什么不试试LaTeX呢？虽然它不是HTML或CSS，但它基于代码，可以创建你分享的那种示例海报和一些真正棒的演示文稿。

你只需要下载LaTeXilla（Linux）就行了。

有很多可用的LaTeX海报模板。

- Jayaram

谢谢您的回答。我曾经用LaTeX制作过演讲文稿，尝试过用它来制作海报，但发现除了标准丑陋的布局之外，很难制作更复杂的东西。不管怎样，我的问题是关于HTML的，我想知道是否有可能使用它来制作海报。 - ricklupton

但如果您能建议一个外观漂亮、灵活的类/模板，我很乐意再次尝试LaTeX？自上次我寻找以来，看起来出现了fancytikzposter，看起来不错。 - ricklupton

这是我上周用于项目展示的模板，我非常喜欢它。链接 - Jayaram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Krastanov · Accepted Answer

很惊奇地，制作自己的CSS/HTML打印海报模板非常简单。它比LaTeX更容易，因为LaTeX有着奇怪的默认设置和晦涩难懂的图形处理、布局和颜色处理。而且它比PowerPoint更整洁，因为它在布局的创建中提供了更多的一致性和“可重用性/可编程性”。

首先，您需要设置纸张的大小：

body {
width: 48in;
height: 36in;
}

然后您需要一些通用的布局：

。

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

如果你喜欢CSS库（如Bootstrap）的默认设置，可以将其用于大多数组件（我特别喜欢面板）。您还可以使用一些新的flexbox样式来实现更整洁的布局。我有一个基于这些想法的模板，很乐意分享（以及我所使用工具的更长描述）。这是一个使用它构建的海报示例。它不是一个可直接使用的CSS框架，但重要的是，它只是20多行自定义CSS，您可以将其放在任何CSS框架之上。