Unfolding the @page

Unfolding the @page

As a designer, I often have to deal with clients who need to make corrections to pdf, to websites, to whatever they have asked me to design, because they are not able to do it themselves. Naturally enough, they don’t have the specialised tools used by graphic designers, which are neither cheap nor easy to use; and also, designers seldom use ordinary office tools like Microsoft Word when they need to typeset some content.

Most often, there are two scenarios. A designer provides a layout for a Word file that the client then uses to create and publish content. If everything goes well — let’s be honest, this happens on a regular basis — the output is not that bad: the layout is still there as it was designed, the type font has not changed, the styles are used, and the exported pdf is good enough to be printed in the office or shared on the web. On the other hand, when anything goes wrong, the client calls the designer and, often, the designer is given the file, makes the corrections, cleans the layout, and charges the client. Nobody likes to charge a client for this, firstly because you can’t charge him the real amount of time you spent on it, and secondly because you are repeating a job you already did before. But as they say, it’s part of the service.

Well, thanks to CaSSius, that is how it used to be.

CaSSius is an impressive tool. it can do a lot of things, and it works in every browser[1].  As Martin (the developer)  explains, CaSSius lets you produce a pdf document from html content using some nice css and JavaScript. But before we dive completely into the creation of specific layouts for CaSSius, we need to understand how a browser can transform any html document into a specific sized PDF.

Understanding how the @page works.

Let’s say you need to make a poster and you need to give to the client the possibility to change a few things on this poster, like the date, or even the title. HTML can be the right way to go: it works in all browsers, it does not need any particular applications to be installed, fonts and colours are already set up by a professional designer, and the pdf will be ready for print without any problems.

To do so, you still have to struggle with the size of elements on screen and the size of elements on the paper.

I’m pretty sure that you will have tried to print a page and ended up with a huge sidebar and a small part of the content you wanted to read. That’s because HTML has sized content, and the size of the content mustn’t outrun the size of the paper.

To avoid this, we can now use the @page CSS at-rule. To explain this, we’re going to make a poster. Let’s build one of the most iconic ones (since the 2000s) with quite a history:

keep calm and carry on Poster
Keep calm and carry on

Keep Calm and Carry On was a motivational poster produced by the British government in 1939 in preparation for the Second World War. The poster was intended to raise the morale of the British public, threatened with widely predicted mass air attacks on major cities. Although 2.45 million copies were printed, and although the Blitz did in fact take place, the poster was hardly ever publicly displayed and was little known until a copy was rediscovered at Barter Books, a bookshop in Alnwick. It has since been re-issued by a number of private companies, and has been used as the decorative theme for a range of products. (from Wikipedia)

For the purposes of this exercise, the crown icon comes from Wikipedia and the typeface, a revival of Gill’s work, comes from the finest guys of Open Source publishing, Gill sans alternative from OSP.

Let’s build the poster from scratch.

The html

We are using inline svg for the crown, since it’s the best way to modify it directly using css.  The only class used here is for the AND word which is a little smaller than the other word.

  <article class="page">
    <svg viewBox="0 0 91 79" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
      <g id="crown">
        <path d="M83.593,33.2119991 <!-- here are the location of all the point and vector needed to produce the svg.  --> L10.269,64.0979991 Z"></path>
    <p contenteditable="true">keep</p>
    <p contenteditable="true">calm</p>
    <p class="and" contenteditable="true">and</p>
    <p contenteditable="true">design</p>
    <p contenteditable="true">stuff</p>

The interesting thing here is the appearance of the .page class added to the body. To tell the computer that this page is the one we want to print, we need to add some css for it.


I won’t talk about the css for the styling, it’s pretty easy and everything is in the file you’ll be able to download below. Let’s focus on the print.

First, we need to style how the box appears on the screen:

.page {
  /* width of the page */
  width: 320 mm;
  /* height of the page */
  height: 450 mm;
  /* shadow to see the page in the browser if the background is transparent*/
  box - shadow: 0 0 0.5 rem rgba(0, 0, 0, 0.25);
  /* to position the children absolutely, we need to specify the relative position of the page */
  position: relative;
  overflow: hidden;
  margin: 2e m auto;

Those styles will be shared with the printed version of the css. We need to override some styles to be sure that the layout is as expected.

/* the @media print to specify this only affect the content when printed*/  
@media print {  
  .page {  
    /* we remove margin and padding*/  
    margin: 0;  
    padding: 0;  
    /* we position the .page body on the top left angle of the page*/  
    position: absolute;  
    left: 0;  
    top: 0;  

If you try to print with those lines, Chrome will ask you the size of the paper, and the margins, and if you want to see the top header and so on. To avoid this behavior and take the full power from Chrome’s print utility, we need to provide those lines in the css:

@page {  
  size: 320mm 450mm;  
  margin: 0;  

In future, the @page will be able to handle a lot of what we use when printing books: running heads, page number counter, different margins depending on odd/even page numbering. However, we are currently waiting for the browsers to be fully operational to produce what we need.

Using this css, we can produce html posters, ready for print. Everything being vectors, we could even produce a huge pdf in order to cover a building for example (since Chrome can’t unzoom below 25%, good luck with that, but in theory, it would do the job). Using only em for the size of the text, and a font-size: 100% for the body,  you only need to change the size of the .page class to produce the largest PDF. (InDesign cannot handle  a surface with more than 5486.4mm²: it looks like the Make it bigger effect just took a huge step up ).

For another example, you might also want to refer to the poster we made with the jellyfish illustration last year.

Superfast jellyfish poster example

Until next time!


Download the example files for the jellyfish poster here and for the keep calm and carry on poster here.

  1. CSS-regions used to be a way to create book design in html + css, but it seems that very few browsers will be using that element again. Google Chrome left Webkit for Blink some years ago, abandoning CSS-regions at the same time. Safari is one of the only which still shows some love for CSS-regions.  ↩

Related stories

What is the Paged Media initiative?

At the beginning of the year, we announced the Paged Media initiative as a community driven open source solution to help anyone who wants to print content with web technologies. Before looking at what we’ve been up to for the last five months, in upcoming articles, let’s have a look at what’s possible the gaps we’re trying to fill.

Paged Media approaches (Part 1 of 2)

Designing a book or a print-ready PDF  requires that you think by pages. This is the major difference between formatting for the web and for PDF/Print. In a browser, we are able to implement a fixed height block with overflowing/scrollable content or automatic height block based on content. But for print/PDF, we need to be able to create pages of HTML content i.e. we need to be able to fractionate the content.

Making books with HTML + CSS — a look at Vivliostyle (Part 1 – page layouts)

Before you read further, the following information has been gathered in the process of making experimental books with Vivliostyle. As the specs are a little old and pretty experimental, I can’t guarantee you would necessarily get the same results as I did. Also, if you have used the tool and have found any other ways … Continue reading “Making books with HTML + CSS — a look at Vivliostyle (Part 1 – page layouts)”

CaSSius: heavyweight typesetting with lightweight technology

I can’t remember when Adam Hyde first suggested to me that CSS regions might be a viable way to produce PDFs for scholarly communications but it seemed like a good idea at that time and, I think, it still does. CaSSius is my implementation of that idea.

To back up a bit, at the moment in scholarly communications, the production stage usually involves creating a PDF and XML copy in tandem, perhaps using a tool like eXtyles and a process involving Adobe InDesign.