Print ready rulebook

Directly from this website?

From webpage to printable guide
From webpage to printable guide
So I’ve come across print specific styles in CSS in the past, but this is the first time I have had a proper usecase for them.

I defaulted to A4 pages, as at least here in Australia, it is by far the most common paper size.

The concept is pretty simple - hide all of the irrelevant things, make a few extra things show, then make it look good. In practice it’s…honestly not too bad.

The CSS command is ‘@media print’ and whenever anyone hits print, these custom styles apply.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    .print-hide, .site-meta, .site-avatar, .site-name, .site-description, .back-to, 
    .sidebar, .left-sidebar, #toggle-menu, .svg-object, .comments, .article-time--reading, .icon-tabler-clock, 
    summary::marker, .article-header::before, .site-theme-by, .site-enhancers-by {
        display: none!important;
    }

    .print-reveal {
        display: block !important;
        break-before: page;
    }
    

  body::before, body::after, html::before, html::after {
        content: none !important;
        display: none !important;
    }

Then we add some simple margins and page numbers:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@media print {
    @page {
      size: A4;
      margin: 1cm;
      @bottom-center { 
          content: counter(page);
          color: #000;
          background-color: #fff;
          font-size: 9pt;
      }
    }
}

Next are a bunch of styles being removed so it’s a very clean print - I’ll probably add in more later, but at this stage it’s easier to work from a clean slate.

Then we can use the ‘break-after’, ‘orphans’ and ‘widows’ to make some powerful

1
2
3
      break-after: avoid;
      orphans: 3; 
      widows: 3; 

In typography, a widow is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.) - https://developer.mozilla.org/en-US/docs/Web/CSS/widows

In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.) - https://developer.mozilla.org/en-US/docs/Web/CSS/orphans

Rulebook order change

I’ve moved Volcanic Powers to the very end, they’re essentially a glossary of all the powers. Though I do wonder if scoring at the end would make the most sense. Might have to get people to vote on it.

Caldera/Appeasement has also been added, mechanically it makes the most sense after Buy a Tile or even as part of Buy a Tile. Thematically it fits well towards the end with sacrifices and lava movement.

I’ll play around with this no doubt.

Licensed under CC BY-NC-SA 4.0
Last updated on Oct 07, 2025 00:00 AEST

Lava your comments here

Loading comments...

I acknowledge the Wurundjeri Woi-wurrung people as the Traditional Owners of the lands and waterways on which this idea was brought to life, and pay my respect to the wisdom of their Elders past and present.

A boardgame designed by Alex Barnes-Keoghan
Built with Hugo, Theme Stack designed by Jimmy
Parallax stars effect by Sarazond, hexagonal background by Temani Afif
GAME TESTED BY// Ruby Benjy Amy Toby Hugh Liam Kumal Ben Sam Huon Jonathan The Melbourne Incubator Sonya Joseph Daarsya Jess Ryan and many more