Asked 29/4, 2013 at 11:45 Answered 15/11, 2017 at 21:31

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.

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. 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
The content would be well-separated from the presentation, making re-use easier (e.g. 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 (e.g. Bootstrap) allow for fixed-width layouts but assume that the page will scroll down as far as necessary to fit all the content. 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?
Are any special techniques needed to get from the HTML page to, say, an A1 size PDF?

Edit:

I know about LaTeX and have used it to make presentations and reports. 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.

Logistic answered 29/4, 2013 at 11:45 Comment(0)

It is surprisingly straightforward to roll out your own CSS/HTML template for a printer poster. It is much easier than LaTeX with its weird defaults and obtuse treatment of graphics, layout, and color. And it is much neater than PowerPoint as it provides a lot more consistency and "reuse/programmability" in the creation of the layout.

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

You can also use some newer flexbox styling for a neater layout

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.

Egression answered 15/11, 2017 at 21:31 Comment(0)

Why don't you try 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.

All you have to do is download LaTeXilla (Linux).

There are plenty of LaTeX poster templates available.

Tiertza answered 29/4, 2013 at 13:39 Comment(3)

Thanks for your answer. I have used LaTeX for presentations, and I tried using it for a poster in the past but found it difficult to make anything more complicated than the standard ugly layout. Anyway, my question was about HTML and I'd like to know if that is possible. – Logistic 29/4, 2013 at 14:0

But if you can suggest a good-looking flexible class/template I'd be happy to try LaTeX again? fancytikzposter seems to have appeared since last time I was looking and looks good – Logistic 29/4, 2013 at 14:2

Here is the one i used for my project presentation last week. I really liked it. – Tiertza 29/4, 2013 at 14:7

Introduction

Questions

Edit:

Recommended topics

Hot tags