Poster
poster.css lays out one page of a fixed size, printed whole:
a conference poster. It is not print.css, which cuts a normal
document into paper pages, and it is not slides.css, which
follows the viewport. Here the page has one size, decided by the author,
and everything is placed inside it.
The stylesheet asks for no JavaScript. A poster read
on a screen before it is printed can be given the accessibility
controls, which are the one thing here that needs any
(below).
The default canvas is A0 portrait, 841 by 1189 millimetres. It is not a list of formats to pick from: the export being vector PDF, a poster laid out at A0 is printed at A1, A2 or A3 from the print dialog alone, with nothing to change in the page.
Loading order
After wexa.css, and after layout.css if the card
and panel utilities are wanted — the file builds on both, and after
menu.css if the accessibility controls are wanted, the
buttons of the bar being sized by it. Before a theme and before the
page's own stylesheet, which have the last word.
<link rel="stylesheet" href="wexa_statics/css/wexa.css">
<link rel="stylesheet" href="wexa_statics/css/layout.css">
<link rel="stylesheet" href="wexa_statics/css/menu.css">
<link rel="stylesheet" href="wexa_statics/css/extras/poster.css">
<link rel="stylesheet" href="your_theme.css">
<link rel="stylesheet" href="your_poster_page.css">
A theme is loaded as a plain <link>: what is printed
is decided before printing, and the poster on the wall does not change.
A poster that is also read on a screen — checked before printing, put
online beside the paper one — is loaded through
wexa.loader.js instead, and then the theme is one of the
three things its reader can change.
What it looks like
The stylesheet does not add to a page: it replaces it. The canvas is the body itself, so a poster is a document of its own — this page cannot be its own example, and shows one instead: poster-demo.html.
Open it, then print it: what you see is what comes out, at the size
@page is given.
HTML structure
The canvas is the body itself. Its three bands are the page's own
header, main and footer; nothing
else is required.
<body class="poster-canvas">
<header> … title, authors, logos … </header>
<main class="grid-panel poster-columns">
<div class="grid-item">
<section class="card">
<h2 class="card-header">A title</h2>
…
</section>
</div>
<div class="grid-item"> … </div>
</main>
<footer> … references, funding … </footer>
</body>What the file provides
| Class | On | What it does |
|---|---|---|
poster-canvas |
body |
The page itself: one fixed-size ground, its three bands stacked and centred in it, the leftover height split above the first and below the last. Required. |
poster-columns |
main, with grid-panel |
Columns of equal height: each one reaches the full height of the row, and its own slack falls between its cards, so every column starts on one horizon and ends on another. |
poster-ribbon |
A heading | A title band with no card under it — a heading that groups several
cards. Same look as card-header. |
poster-note |
aside |
A footnote line under a block. Undoes the floated side-note
wexa.css makes of every aside. |
poster-table-note |
p |
The line of units or conventions under a table, smaller again. |
Cards come from layout.css unchanged —
card, card-header, card-body,
card-footer — resized here for a full-width print column.
Figures and their captions are plain figure and
figcaption, restyled inside the canvas.
Variables
Every measurement the file draws with is declared once and read by the
rules. A poster is tuned by redefining these in its own stylesheet, never
by overriding a rule of poster.css.
| Variable | Default | What it sets |
|---|---|---|
--poster-width | 841mm | Width of the page. Set both for any other format, landscape included. |
--poster-height | 1189mm | Height of the page. |
--poster-padding | 8mm 22mm 5mm | Margins of the canvas: top, inline, bottom. |
--poster-header-gap | 10mm | Between the header and main. |
--poster-footer-gap | 10mm | Between main and the footer. Apart from the one above: a header of title, authors and logos does not call for the same air under it as a footer of references calls for above it. |
--poster-card-gap | 10mm | Between two cards, and under a ribbon. |
--poster-card-padding | 7mm | Ground of a card. Feeds --card-padding, which layout.css uses for the card's padding and for the bleed of its title band, so one number keeps the two in step. |
--poster-card-header-gap | 5mm | Under a title band. Without it a table or a figure sits flush against it, neither carrying a margin of its own. |
--poster-figure-gap | 3mm | Above and below a figure. |
--poster-caption-gap | 1.5mm | Between a block and the caption or note under it. |
--poster-border-radius | 5mm | Corners. Feeds --border-radius and --card-border-radius, both stated in px elsewhere and invisible at this size. |
| Variable | Default | What it sizes |
|---|---|---|
--poster-title-scale | 1.18 | A card title and a ribbon. |
--poster-caption-scale | 0.78 | A figure caption. |
--poster-note-scale | 0.74 | A poster-note. |
--poster-table-note-scale | 0.65 | A poster-table-note. |
The file also restates four variables of Whakerexa itself, as
print.css does for the same reason — the framework's own
defaults are read against a screen or an A4 page:
--font-size (28pt), the two
--typography-spacing-*, and --size-divisor,
pinned to 1 so headings scale from the type alone and not
from the width of a viewport.
A poster in another format sets its own --font-size: the
canvas changes size, the type does not follow it on its own.
Tuning a poster
/* your_poster_page.css */
:root {
--poster-width: 594mm; /* A1 portrait */
--poster-height: 841mm;
--font-size: 20pt;
--poster-header-gap: 14mm;
--poster-card-gap: 14mm;
}Accessibility controls
A poster is drawn for a wall, at one size, in one set of colors. Read on a screen instead, it is read by someone who may need another theme, the contrast mode, or the dark mode — and a poster that cannot be changed leaves them with nothing.
poster.js builds the bar the presentations use, out of
sight, and the a key brings it in and out. Nothing of the
poster moves when it appears: the bar is fixed to the window, above the
page. It is a nav.nav-wexa, which print.css
hides, so a page that loads print.css does not print it.
<script>
window.bootPage = function (wexa) {
const poster = new wexa.Poster();
poster.init();
};
</script>
<script src="wexa_statics/js/wexa.loader.js"
data-base="wexa_statics/"
data-extras="js/extras/poster.js"></script>The three buttons are carried unless they are turned off, one by one. A poster whose colors are the ones its author chose, and are not to be traded for another theme, says so:
const poster = new wexa.Poster({theme: false, contrast: true, color: true});| Asked for | The button | What it changes |
|---|---|---|
theme | Theme | The next theme of those the page declared. |
contrast | Contrast | The contrast mode, on and off. |
color | Mode | The light mode and the dark mode. |
show(), hide() and toggle() do
from the page what the key does; destroy() gives the key
back to the browser. A page that already carries a bar under the name
accessibility-controls keeps its own: nothing is built over
it.
Printing
The file carries an @page rule of the canvas's size, with no
margin. Chromium honours it when printing or exporting to PDF.
Firefox ignores @page entirely — the same
limitation already noted in print.css. Printing from Firefox
means picking the paper size by hand in the print dialog, to match
--poster-width and --poster-height; exporting
from a Chromium-based browser avoids the step.
If the content is taller than the canvas, the page overflows onto a second printed sheet rather than shrinking to fit. This is deliberate: the bands cannot be squeezed into each other, so an overflow is seen instead of being silently absorbed.
Colors
None are written in this file. Cards, ribbons and the page ground read
--header-bg-color, --header-fg-color,
--bg-color, --bg-color-alt and the
--border-* variables, so the loaded theme decides the
palette — see CSS variables.