This document does not aim to be a complete technical guide on how to make your character sheet printable, but rather a summary of things you need to know.
Unlike a book, where the designer has total control of the amount of data in a single page, when dealing with web pages, and thus character sheets, the degree of control is much smaller. We could, for example, have a dynamically populated section in one sheet with 4 items while the same section in another sheet has 36 items. Or we could have another section where the player lists the equipment that their character is carrying.
Browsers do provide methods to specify how content is broken across multiple pages; however, at the current moment, they are far from perfect, especially when it comes to using newer layout techniques like Flexbox and Grid.
Media Queries
Media queries allow you to apply CSS styles depending on a device's general type or other characteristics such as screen resolution or browser viewport width (1). If your sheet is not using the legacy mode, you may use media queries to conditionally specify styles that will only apply when printing your character sheet. Here is a summary of how this works out:
/* Your sheet CSS file: */
/* Rules outside any media query will apply on any
Device Type*/
.highlight {
font-size: 1rem;
}
@media print (orientation: landscape) {
/* Rules that will only take effect when printing your sheet
on landscape orientation. */
html {
Font-size: 12pt;
}
.highlight {
color: black;
font-weight: bold;
}
}
@media print (orientation: landscape) {
/* Rules that will only take effect when printing your sheet
in landscape mode. */
}
@media print (orientation: portrait) {
/* Rules that will only take effect when printing your sheet
in portrait mode. This is the default mode for most printers */
}
@media screen {
/* Rules that will only take effect when seeing your
character on a screen (Computer, Mobile). */
html {
Font-size: 14px;
}
.highlight {
color: red;
}
}The Page Rule
The @page at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins (2).
/* Your sheet CSS file: */
@page {
size: letter portrait; /* specifies sheet will be printed on letter size in portrait orientation */
margin: 0.25in /* specifies a page margin of 0.25 inches */
}
The page rule accepts the following pseudo-selectors:
@page page :first { /* first-page of the document */ }
@page page :last { /* last-page of the document */ }
@page page :left { /* even-numbered pages */ }Page Breaks
In the beginning of this article we mentioned that browsers offered us some tools to control how content should be displayed across multiple pages. Here are some techniques you can use to control the page flow on your sheet:
/* Your sheet HTML file: */
<div class="section__container">
<h2 class="section__title">Section 1</h2>
<p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
<figure class="section__thumbnail>
<img src="imgs/section1.jpg" alt="Section 1">
<figcaption>Fig.1 - Nam ullamcorper felis</figcaption>
</figure>
</div>
<div class="section__container">
<h2 class="section__title">Section 2</h2>
<p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
<figure class="section__thumbnail">
<img src="imgs/section2.jpg" alt="Section 2">
<figcaption>Fig.2 - Lorem ipsum dolor sit amet</figcaption>
</figure>
</div>
/* Your sheet CSS file: */
.section__container {
/* Makes each section start on a new page */
break-before: page;
}
.section__thumbnail {
/* indicates that whenever possible, the browser should avoid splitting the content inside the section thumbnail across multiple pages. In that way the caption stays close to the relevant picture. */
break-inside: avoid;
}Think Like a Printer
If you have made this far you should have a grasp of the basic concepts needed to make your character sheet printable. Great, now comes the hardest part: Forget the way you used to think about character sheets, there is no mouse or touch screen involved, all interaction is done with a pencil and origami techniques (although very rarely). Here is a couple of design tips that may help you among the way:
Make your character sheet responsive. This will help you out not only with serving your sheet on different resolutions and window sizes but also when it comes to printing it on different paper sizes. Remember people around the world use different paper sizes (Letter, A4…), they may also want to print it in landscape or even by setting up multiple sheets on a single page to create a quick monster reference, for example.
Turn off legacy mode. If you want to have access to all the cool features, you will need to update your sheet to current standards.
Hide unnecessary stuff. Your sheet may contain a couple of roll buttons without any information inside them, for example. If that is the case, you should hide them as no one is gonna be able to use them. Same could be said for the repeating section controllers, macro buttons, etc.
Change style accordingly. Ok, maybe you do have a roll button that has some useful information inside it. If that is the case, style it to reflect that. Instead of looking like a clickable element, think about what would make sense once printed on a piece of paper.
Leave space for notes. People will probably be taking notes during a gaming session. You would do good by inserting some blank lines/space on the equipment section of your sheet or perhaps where the players track how much damage their character has taken.
Black and white is your friend. Not everyone has a color printer. And some that do would still favor printing in black and white. Even though most computers will be able to automatically convert the content to grayscale, you would do better by offering black and white version of your content. By specifying colors, borders and images you can make sure your sheet will be printed with the right amount of contrast.
Be careful with font sizes. To ensure the print design is accessible by a wide audience, we recommend utilizing a 16 point font size.
Avoid background colors and images. By default browsers won't print those. Users may manually opt to do so but you would rather be on the safe side. If you really need to use CSS background colors and images, take a look at the print-color-adjust css property (3). Although not fully supported, it may help you achieve what you are looking for, specially in Chrome. Another approach you could try is to use absolute positioned images or div with image borders.
Balance line length. Reading a long line of text causes fatigue: the reader must move their head at the end of each line and search for the beginning of the next line. Too short a line breaks up words or phrases that are generally read as a unit (4). To avoid this, you should strive to make your lines between 45 to 75 characters (including spaces and punctuation) long when designing for print. A cool thing you could try is dynamically splitting your content into multiple columns by using the column count css property:
/* Your sheet HTML file: */
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus. Cras et odio in tellus efficitur congue vitae ut eros. Sed non arcu vitae purus semper sagittis. Nullam ipsum arcu, rhoncus sed pharetra quis, porttitor quis tortor.</p>/* Your sheet CSS file: */
p {
column-count: 2;
}This will split your paragraph content dynamically into two columns. It also works with nested content like repeating sections.
Expand and collapse content as needed. Last but not least, a lot of the time your character sheet will have collapsible components that can be toggled to show more information about a specific trait of a character. When it comes to print, you may want to ignore how the user left those sections on the screen and expand them instead. Or perhaps you could print just the title and create a new section, visible only when printing, that can be printed on demand on a separate page.
Sheet Configuration
The last step to make your character sheet printable is let us know that your sheet was designed to be print friendly. In order to do that, you need to add a printable property to your sheet.json file and set its value to true, just like so:
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Roll20 Team (@roll20app)",
"roll20userid": "1",
"preview": "pritablesheet.png",
"instructions": "**This sheet is print fiendlyt**\n\nYou can put Markdown-formatted instructions here for how to use your sheet.",
"legacy": false,
"printable": true
}Congrats, You Made It
We hope this brief guideline will provide you enough food for thought to get you start designing and coding the printed version of your character sheet. If you have any questions or suggestions to improve this article, drop us a line at an address to be defined.
Take care and happy printing!
Additional Resources
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://developer.mozilla.org/en-US/docs/Web/CSS/@page
- https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust
- J. Craig and W. Bevington, "Designing with Type: A Basic Course in Typography" in , New York:Watson-Guptill.
- https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
Downloadable ZIP
We've included a ZIP file which includes various files and examples from the D&D 5E by Roll20 character sheet. This should help provide some real use context for configuring printable sheets!