At research conference like the APS Meetings, Gordon Research Conferences, or many others, one of the common way of sharing and presenting your research work is with a printer poster during a poster presentation session. You get to discuss research in a one-on-one setting with whomever passes by your booth while using the poster as visual aid.
Most posters seem to be made in PowerPoint or \(\LaTeX\), both of which feel rather clumsy (PowerPoint with its lack of any form of powerful theming or sizing functionality and LaTeX with its unnecessarily obtuse treatment of layout, graphics, and color (and poor defaults)).
CSS felt like an amusing alternative and it turned out to be surprisingly easy to use. One of the main features I used was the new flexbox layout model, which drastically simplifies the creation of properly aligned and sized “panels” of content. I should have also used the new CSS grid system to simplify my work even further, but Bootstrap 3 was good enough for that. A great resource on how amazingly easy it is to use flexbox and CSS grids can be found here (by Evangelina Ferreira).
First of all one needs to set the size of the page, as we do not want to fit the viewport, rather we want to print to fixed size:
body {
width: 48in;
height: 36in;
}
Some generic structure has to be picked for the main components. I ended up with this:
<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>
Finally, for the content of the columns of the poster I mainly used Bootstrap panels (they seemed like a good enough default, but you can always do something fancier).
However, now it is important to consider proper “justification” of the content
in horizontal and vertical direction, so that the columns of panels do not have
ugly uneven heights. The horizontal justification is a trivially done with
test-align: justify, but for the stretching and justification of the panels
in the columns I included the following new class:
<div class="row">
<div class="col-xs-3 vjustify">
<div class="panel panel-primary">Panel Content</div>
<!-- more panels -->
</div>
<!-- more columns -->
</div>
.vjustify {
display: flex;
flex-direction: column;
justify-content: space-between;
height:100%;
}
.vjustify > * {
flex-grow: 1;
}
I have used a bunch more flex styles for some of the other elements, but this is the gist of the layout.
The last thing one might be interested in is having floating images with text flowing around them. This is easy enough with:
img.float-right {
width: 50%;
float: right;
margin: 5pt;
}
If you want to embed the resulting poster in a webpage (as seen below) you can
use the CSS transform:scale (given that otherwise we will have everything
rendered unreasonably big for a laptop screen). With some javascript you can
make it responsive as well. Or you can use the HTML5 embed tag for a pdf
version of the poster.
<div style="width:6in;height:4.5in;">
<iframe src="poster.html"
style="width:48in;height:36in;transform:scale(0.125);transform-origin: 0 0;"
allowfullscreen="true" frameborder="0"></iframe>
</div>
<embed src="poster.pdf" width="800px" height="1200px"/>
You can get a my template (css and html files) from here
P.S. You can use MathJax for LaTeX math expressions.
P.P.S. If you are using Bootstrap, you will have to delete its print media overwrites so that you do not get different styles when printing.
P.P.P.S. You need a modern browser to render this page.
P.P.P.P.S. If X-Frame-Options is set on your hosting server it can interfere
with embedding the page.