8

介绍

诸如deck.js或reveal.js 之类的HTML5 工具似乎非常适合演示，包括可以使用MathJax 轻松添加美观数学的科学演示。

与科学演示密切相关的是印刷海报（示例），我想知道是否可以使用 HTML 和 CSS 来制作它们。这在我看来是个好主意，因为：

  • 图像、表格、数学等都可以轻松包含在内
  • 典型的基于网格的布局通常在海报和 HTML/CSS 中
  • 内容将与演示文稿分开，使重复使用更容易（例如在演示文稿和海报之间）
  • 只需稍作修改，即可在网络上分享海报的副本

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

问题

  1. 是否有任何 CSS 框架允许在固定宽度和固定高度的 2D 网格上轻松布局内容？
  2. 从 HTML 页面到 A1 大小的 PDF 是否需要任何特殊技术？

编辑：

我知道 LaTeX 并用它来做演示和报告。也可以将它用于海报，但我的经验是，如果您需要更改最基本的海报布局，它很快需要更多的调整和知识。

4

2 回答 2

1

为打印机海报推出自己的 CSS/HTML 模板非常简单。它比 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>

如果你喜欢像 Bootstrap 这样的 CSS 库的默认设置，你可以将它用于大多数组件（我特别喜欢面板）。

您还可以使用一些更新的 flexbox 样式来获得更整洁的布局

我有基于我很乐意分享的想法的模板（以及对我使用的工具的稍长描述）

这是一个用它制作的海报的例子

它不是一个随时可用的 CSS 框架，但重要的是，它只是 20 行自定义 CSS，您可以放在任何 CSS 框架之上。

于 2017-11-15T21:31:15.320 回答
0

你为什么不试试LaTeX。它不是 html 或 css，而是基于代码的，您可以创建您共享的示例海报和一些非常棒的演示文稿。

您所要做的就是下载LaTeXilla (Linux)。

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

于 2013-04-29T13:39:44.983 回答