Page Layout in the Homebrewery (2024)

When you first start a new brew on Homebrewery you are presented with a single page with a few defaults, including but not limited to: the page size is US Letter, the margins are 1.4cm (top), 1.9cm (sides), and 1.7cm (bottom), and it has two balanced columns.

This setup has it’s basis in the design of a popular set of TTPRG books, and works for many people. Of course, “many people” doesn’t describe all people and so this post will cover some of the changes to the basic page layout you can accomplish with some CSS in the Style Editor.

Page Size & Orientation

If you are looking for a way to change the size it can easily be done with a small bit of CSS in the Style Editor. Using the below as a base, change the dimensions as needed (use only one set):

/* US Letter page size, portrait (default) */.page {height: 279.4mm;width: 215.9mm;}/* A4 page size, portrait (default) */.page {height: 296.8mm;width: 210mm;}

Changing the orientation from portrait to landscape is done by simply reversing the existing height & width dimensions that are used by default. Below, I have done exactly that for both US Letter and A4 page sizes:

/* US Letter page size, landscape */.page { height: 215.9mm; width: 279.4mm;}/* A4 page size, landscape */.page { height: 210mm; width: 296.8mm;}

If you plan to create a PDF or print your brew be sure to adjust your printer settings to match the size and orientation.

You may also want to adjust the margins of your page, or remove the footer graphic, or make other changes; read on.

Page Margins

If you have changed the size or orientation of your page, or you just want to make some design decisions, you may want to change the amount of empty space between the edge of your page and your content. In publishing this would be considered the margin, but in Homebrewery you are likely going to be making changes to the .page padding in the Style Editor.

Here is the default property and value:

/* default padding value for the page...*/.page { padding: 1.4cm 1.9cm 1.7cm;}/* ...which translates in practical terms to...*/.page { padding-top: 1.4cm; padding-right: 1.9cm; padding-bottom: 1.7cm; padding-left: 1.9cm;}

Note that the default has three values for the padding property. This is a shorthand method of writing “Top Sides Bottom”, and the sides will be equal. If you need a different margin for all four edges, your shorthand would look like “Top Right Bottom Left”, or:

.page { padding: 1.4cm 1cm 1.7cm 2cm; /* top, right, bottom, left */}

Columns

Once you have changed the orientation or size of your page and decided how much space to leave around the edges, you should look at your columns. Does a two-column layout still make sense, or will a single column suffice? Maybe three columns would fill out a landscape oriented page best, but they need to be narrower. As with everything else, these changes can be made in the Style Editor.

The relevant portion of the default CSS is as below:

.page { column-count: 2; column-fill: balance; /* balance, auto */ column-gap: .9cm; /* any length unit */ column-width: 8cm; /* any length unit */ -webkit-column-count: 2; -moz-column-count: 2; -webkit-column-width: 8cm; -moz-column-width: 8cm; -webkit-column-gap: .9cm; -moz-column-gap: .9cm; counter-increment: phb-page-numbers; position: relative; z-index: 15; box-sizing: border-box; overflow: hidden; height: 279.4mm; width: 215.9mm; background-color: var(--HB_Color_Background); background-image: url('/assets/parchmentBackground.jpg'); padding: 1.4cm 1.9cm 1.7cm; font-family: BookInsanityRemake; font-size: .34cm; text-rendering: optimizeLegibility; page-break-before: always; page-break-after: always;}

By modifying these properties on the page element you can change your columns. Column-fill dictates whether columns try to balance the amount of content of each column or fills them before moving to the next. Be aware that adding \column breaks can supersede this behavior, and that any *wide* elements such as the H1 header can also have unexpected effects on columns. Column-gap describes what is commonly known as the “gutter”, or space between columns.

Also, due to the varied support of Columns across browsers, be sure to update the prefixed properties for each browser as well (-moz-, -webkit-)—you will not see updates in your brew for these properties until you have updated the prefixed properties to match.

As of this writing Homebrewery defaults to a page layout that includes a footer graphic—a flowing gold bar—at the bottom of the page which you may wish to remove. To remove it, you can simply use this snippet in the Style Editor:

.page:after { all: unset;}

Alternatively, you can make modifications to it to suit your needs with some fussing to the CSS. When making changes to predefined elements such as this footer it is often helpful to understand the current CSS rules. You can use your browser’s Inspector Tool to reveal the CSS which I have done here:

.page:after {content: "";position: absolute;bottom: 0px;left: 0px;z-index: 100;height: 50px;width: 100%;background-image: url('/assets/PHB_footerAccent.png');background-size: cover;}/* even numbered pages */.page:nth-child(even):after { transform: scaleX(-1);}

The most likely properties you might change would be the background-image to url('https://www.imgur.com/....') and the height/width. I will likely go into more detail about the footer and other CSS pseudo-elements in a future post. And the rule dictating the transform on even-numbered pages alternates the direction of the graphic between pages, similarly carried out in the page numbers and footnotes.

Page Numbers

Changes to the footer is likely followed by changes to how the page number snippets are displayed. Unlike the footer graphic, a user has to add page numbers to each page manually typically by using the Page Number or (Auto Page Number) snippet from the editor menus. They look like this, in the Brew Editor:

{{pageNumber 1}}{{footnote PART 1 | SECTION NAME}}

The snippet drops in two elements, the page number and the footnote (which is more like a “section name” than a footnote). Removing or modifying each is about the same process, so I will discuss the page number first and with a bit more detail but provide the default CSS for the footnote as well. Below is the default CSS for the page number:

/* page number (odd page) */.page .pageNumber {position: absolute;right: 2px;bottom: 22px;width: 50px;font-size: .9em;color: var(--HB_Color_Footnotes);text-align: center;text-indent: 0;}/* page number (even page), IN ADDITION TO THE ABOVE^ */.page:nth-child(2n) .pageNumber {left: 2px;}

The page number element is positioned in the bottom-right corner of the page with the first rule. But the second rule sets a different rule for every even-numbered page: the position of the page number on these pages is in the bottom-left—but everything else is left untouched and thus applied to the even page numbers as well.

The same structure applies to the footnote elements as well, with a slightly modified rule for the even pages, as shown below:

/* footnote (odd page) */.page .footnote {position: absolute;right: 80px;bottom: 32px;z-index: 150;width: 200px;font-size: .8em;color: var(--HB_Color_Footnotes);text-align: right;}/* footnote (even page), IN ADDITION TO THE ABOVE^ */.page:nth-child(2n) .footnote {left: 80px;text-align: left;}

Conclusion & Example Brew

The above covers some of the basic modifications you can do in terms of page layout using the default brew as a starting basis. This is entirely done with CSS, and while I didn’t dive into the particulars of specific CSS properties, for which there are much better resources, I hope it helps bridge the gap from general CSS knowledge to practical use in the Homebrewery.

If you want to see the modifications in action, you can check out this example brew on the Homebrewery. The brew is laid out with 3 columns, a larger padding on top and narrower on the sides and an adjusted footer graphic and page numbers. Be sure to “Clone to New” from the Source menu at the top to play with in your own editor.