How to make fancy world-building handouts

This is Part 5 in the series, Guide to World-building.

Mad with envy for the creative power of the DnD community, I set about to make some fancy world-building handouts for my readers using Markdown, HTML/CSS and PrinceXML


How to make fancy world-building handouts

I'm not a table-top roleplaying gamer, but I've long respected the sheer creative power of the Dungeons and Dragons (D&D) community. One thing I love is the artefacts Dungeon Masters (DMs) produce in pursuit of their craft, in particular, the gorgeous handout sheets given to players to describe certain locations, monsters or non-playable characters. I've spent a lot of time on Pinterest and Tumbler looking at such creations with admiration and envy.

It's precisely the sort of thing I'd like to start giving away to readers of my fantasy stories. Many DMs build their worksheets with Adobe Photoshop or Indesign, and while I have and use both programs, I'm a lazy bastard and don't want to spend hours (or even minutes for that matter) converting my world-building material into shareable documents.

So, I decided to see if I could automate their creation with the tools I have available on my Mac.



The best approach, for me, is using a technique similar to how I produce documents in my day job as a technical writer. I'll design a template in HTML and CSS and use my favourite PDF creation utility to transform them into a PDF.

The difference is I'll be attempting to create something quite stylised — textured background, decorative typefaces, etc. — something which my corporate masters wouldn't appreciate. I envy the writers who work for Wizards of the Coast!

Source material

The source material, my world-building articles, are already written in markdown, a light-weight, plain-text format that's incredibly robust, flexible and designed for compilation into HTML.

Although I typically draft articles in Ulysses, I'll need to finesse and compile the document elsewhere because Ulysses doesn't support things like tables or definition lists, which I frequently use for laying out quantitative information or creating glossaries.

MultiMarkdown, my preferred dialect of markdown, supports these features, along with other useful things — like linking to external stylesheets, which will make this job easier to scale. MultiMarkdown's command-line compiler is free and open-source and is excellent for automating builds. I also use and love MultiMarkdown Composer, a graphical markdown editor for the Mac — since it's created by the MMD developer, it is to markdown what MS Word is to docx.



Markdown writing templates

Here's my template for a location.


# Location name

## Description

Location is such-and-such in some place... blah blah blah

## Quick facts

Tables containing information like:

* Population
* Physical dimensions
* Political affiliations
* Government
* Associated characters
* Associated stories and events


## History

In days of yore...


My character template follows a similar structure, but naturally, the information differs.


# Character Name

## Quick facts

Tables containing information like:

* Physical details
* Family
* Abilities

## Role in story

## Description

## Biography

If you've seen D&D worksheets before, you'll note my templates are more descriptive (and less statistical), but that's because I'm writing books, not games. If you've stumbled on this page looking to create DnD templates, there's nothing to stop you adapting this system for your needs.

I'd also like to include images too, but don't get excited as my drawing skills are terrible. Images might consist of portraits and family trees for characters and maps for locations. Markdown supports the linking of images, so I'll factor their placement into my design.



With MultiMarkdown, I can add a metadata block that includes the document title, author name, and most importantly a link to an external CSS stylesheet.


Title: Character name
Author: Chris Rosser
CSS: /path/or/url/to/stylesheet.css

# Character Name

Design

MultiMarkdown produces a very clean HTML5 document, so to design my worksheets, I'll build a sample article and then create, and iterate upon, a Cascading Stylesheet (CSS) where the styling get done. If I get enough interest, I’ll make the CSS document and other goodies available for download.

The design stage will be split into two parts. Most of the work will be concentrated on the general style of the document — layout, typography, colours etc. When I'm happy with this, I'll then add Paged Media elements to the CSS document that PrinceXML can use to render the HTML page into a PDF.

I'll concentrate on a location sheet. Here's the example markdown I'll be using...


Title: Location name
Author: Chris Rosser
CSS: stylesheet.css


# Location name

![test image](350x350.png)


## Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

## Quick Facts

Cras tincidunt vulputate ipsum eget tincidunt...

| Population    | Area  | Foo   |
| :---------    | :---- | :---- |
| 1000  | 1000mi^2^ | bar   |
[test table]

## History

Maecenas commodo arcu mauris, eget efficitur turpis laoreet id...


...and here's a screenshot of the document rendered in un-styled HTML.

Template rendered as unstyled HTML
Template rendered as unstyled HTML

Style

Overall, I'm after a more bookish style but with plenty of elements that pay homage to the D&D worksheets which inspired the project. Cheesy, cliched? Maybe, but I intend to have fun doing it!



Typography

In keeping with the stated goal, I'll use a bookish serif typeface for the body text elements (paragraphs, lists, blockquotes etc.). Since my favourite typeface is Garamond1, I’ll use that. I'll set the text to 12pt with 15 points of leading. To keep the design bookish, I'll indent the first line of each paragraph (except the first), justify the text and enable hyphenation. I also added a little padding on the left-hand side to visually separate paragraphs from the sub-headings.

p, blockquote, li, ol, td {

font-family: "Adobe Garamond Pro";
}

p {
font-size: 12pt;
line-height: 15pt;
text-align: justify;
hyphens: auto;
text-indent: 15pt;
margin-top: 0;
margin-bottom: 0;
margin-left: 6pt;
}

Sample text rendered in Adobe Garamond Pro
Sample text rendered in Adobe Garamond Pro

For headings, I'll use Uncial Antiqua, a Celtic-style typeface that pairs nicely with Garamond. I set them to display in small caps because I liked the effect it created. For size, I set Heading 1 to 24pt and worked down in increments of 4. I'll also decorate Heading 2 with an underline, to help visually separate the blocks of text

h1, h2, h3, h4, h5, h6, th  {

font-family: "Uncial Antiqua";
font-variant: small-caps;

}

h1 {

font-size: 24pt;

}

h2 {

font-size: 20pt;
border-bottom: 3pt groove #000000;

}

h3 {

font-size: 16pt;
}
Styled Heading 2 with paragraphs
Styled Heading 2 with paragraphs

Colours

For colours, I'm keeping things simple but will use the occasional splash for emphasis. Body text will stay as black, while I'll add a dark crimson swatch (\#5e0900) to use for Headings (including tables). For rules and borders, I’ll use light tan (\#ceaf61).

h1, h2, h3, h4, h5, h6, th  {
color: #5e0900;
}

h2 {
border-bottom: 2pt groove #ceaf61;
}

Text with coloured highlights
Text with coloured highlights

I've seen some D&D sheets that use additional colours to decorate pullouts and boxes. I haven't decided if I'll do that yet, but I'm not ruling out the possibility.

Images

Images will be centred and set to 100% of the container, adding a little mobile responsiveness to the web view. To ensure they stand off the page, I'll add a slight drop shadow and a border.

img {

border-radius: 2pt;
box-shadow: 6pt 6pt #ebebeb;

}

MultiMarkdown also supports figure and table captions, which is a nice bonus — not all markdown dialects do. I'll centre those and style them in italic.

figcaption, caption {
text-align: center;
font-style: italic
}
Figure styling
Figure styling

Tables

I've opted to style table headings in Uncial Antiqua and text in Garamond as I've done with the rest of the document. I've added borders on the inside only and decorated them with the same tan colour as the border on the headings.

I also added a little extra margin above, below, and on the sides to line them up with the paragraphs.

Finally, I’ve coloured every even row in a washed out pine green (\#dde8c0)

table {

width: 100%;
border-collapse: collapse;
margin-top: 12pt;
margin-bottom: 18pt;
margin-left: 6pt;
margin-right: 6pt;

}

td, th {

padding-top: 6pt;
padding-bottom: 6pt;

}

th {
border-bottom: 2pt groove #ceaf61;

}

td {
border-bottom: 1pt solid #ceaf61;
}

tr:nth-child(even) {
    background-color: #dde8c0;
}

Here’s how it looks.

Table styling
Table styling

Layout

I dithered over the layout for a while as I couldn't decide if I wanted to use a single column layout, two columns, or a main column and a side-bar. In the end, I decided to use two columns. It looks good in my opinion and doesn't require that I chop up my markdown source file with unsightly \<div> tags.

The only problem is that CSS columns can be a little wonky on some browsers, so I elected to use them only on the print layout, which I discuss below.

For the screen layout, I kept things conservative and relatively mobile friendly — even though that's not a stated goal. I applied a maximum width of 900px and centred the content by adding automatic margins to the left and right of the body element.


body {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}



Texture

A key element of D&D sheets is the use of a textured background. The desired effect is a parchment manuscript and to hide the bright, ultra-white ugliness of modern printing paper. Screwing this up though is easy, especially if the texture is over-saturated. The risk is over-powering the text and making it hard to read. So, for the base texture, I wanted something fairly muted and subtle.

I couldn't find one that was 1. what I wanted and 2. free/royalty-free so I made my own in Pixelmator. The technique I used is simple and works with other bitmap editors including Photoshop, Affinity Photo and GIMP. It's also widely demonstrated by people more qualified than I so I won't repeat it here.

I don’t bother using the texture on the web view as I won’t publishing as is. If I were, I’d be more inclined to use a solid colour because creating seamless tiles is a pain.

Because I only care about print/PDF, the texture I created is full A4 sized at 300dpi.

I show you how I apply the print texture in the next section.

Print design

Thus far everything I've covered is enough to style a decent looking web page, but since I'm targeting PDF, I've got a bit more work to do.

To turn a webpage into a PDF, you need to use the Paged Media queries for CSS3, and a utility that knows how to render a page styled in this way to PDF. Unfortunately, this isn't something your average web browser can do.

I use PrinceXML, a professional tool with a price-tag to match. It comes in a variety of licences: free, desktop and server. The free version is ideal for testing purposes and non-commercial use. It's not limited by time but does watermark your documents. I use the desktop licence, but as noted earlier this is because I use it commercially in my job as a technical writer.

An alternative I haven't tried, but one that looks promising, is the open-source Weazyprint project. Once I've finished hacking together this workflow, I'll experiment with using weazyprint and will post my thoughts in the comments below.

Column layout

For economy, and because it's commonly used with D&D sheets, I adopted a two-column layout for print. Annoyingly, PrinceXML attempts balance column content visually instead of reflowing them as you'd expect in a word processor or page layout program. So in addition to the column count, I changed the column-fill property to auto.


body{

    column-count: 2;
    column-fill: auto;
}

Two-column layout
Two-column layout

That arranges all the content into two columns, including Heading 1, which I didn't want. Fortunately, PrinceXML makes this easy to fix without resorting to divs in my markdown.




h1 {
 column-span: all;
}

Now, the Heading 1 block will extend the length of the document, and the columns will start below it, everything lined up nice and neat.

Heading 1 spanning both columns
Heading 1 spanning both columns

Background texture

Applying a texture to the body tag won't cover the whole page when the document is converted to PDF. This is because in the Paged Media specifications, the body applies to the main section of a page — that is the part surrounded by the margins.

To cover the whole page, I need to apply the text to the @page element.


@media print {

   @page {
      background-image: url('a4-bg-texture.png');
      background-repeat: no-repeat;

   }

}

Now we’re getting somewhere!

Page size

Since I live in Australia, the most practical paper size for me is A4. However, I'm acutely aware (and extremely humbled) that more than half of my readers and site visitors live in North America, where US-letter is the dominant format.

So, my options are:

  • Pick either A4 or Letter and hope people know how to handle the sizes on their printer (i.e. scaling and so on)
  • Produce and offer two different sizes
  • Create a hybrid format that can print to both

The 3rd solution is ugly, but it works and means I don't have to double-handle files. The trick is to create a document no wider than A4 and no longer than Letter. Believe it not, I had to do this when I worked for a UK-based company owned by an American multi-national. The resulting format is a slightly odd looking 210mm x 279.4mm (8.27in x 11in).

Fortunately, PrinceXML makes setting the print size easy and even allows for the creation of custom sizes.

The next issue for me is margins. To avoid text bleed when printing to Letter, I would need to add a 45mm margin on the page bottom which is huge, ugly and wasteful.

So, I'm going to stick with A4 for the time being — at least while I work out my design. I can always change it later if I get complaints. For margins, I'll start with your typical defaults of one inch, or 25.4mm, all the way around.


@media print {

   @page {
      size: A4;
      margin: 25.4mm;

   }

}

Headers and footers

Finally, it’s time to add some page numbering. PrinceXML adds some paged media directives, especially for this purpose.

@bottom {
content: counter(page);
}

I decided to keep it simple, with the page number centred at the bottom. Using the same directive, you can also add a border.

@bottom {
border-top: 2pt groove #ceaf61;
}

PrinceXML is capable of doing quite a bit more, including generating content dynamically and inserting them into a header or footer. For example, I’ll take the Heading 1 content and insert it into the footer.

h1 { string-set: doctitle content() }

@bottom-right {
    content: string(doctitle)
}

I also dropped the page’s bottom margin down to 15mm as the full 2.54 (1 inch) was too much.

@page {
margin: 25.4mm;
margin-bottom: 15mm;
}
Page footer showing doc title and page number
Page footer showing doc title and page number

Results and concluding thoughts

So here’s what it ended up looking like!

Final result
Final result

So what's missing?

I'd be remiss if I said, my way or my design was perfect2. This technique is built for speed, scale and convenience, not artistic refinement. I lose a lot of the elaborate blending tools and techniques available to WYSIWYG editors such as PhotoShop. But I'm okay with that. Having spent the better part of a weekend designing my book's launch poster, I know what I prefer to be doing with my time.

Yes, I could have created individual sheets or booklets in Adobe Indesign or even MS Word or Apple's Pages, both of which can be wrangled into page layout duties. However, the process is very manual and time-consuming — and I just don't like working that way.

In all, I'm pleased with how they've turned out. It took less than an hour to design the stylesheet, and I already have the content in markdown ready to go. With every story I write and plan, every setting my character's visit I add more and more articles to my world encyclopaedia. With everything in place, it takes seconds to build a file and there-in lies the workflow's power and appeal.

This workflow scales, and scales exponentially, with zero effort. With one CSS template, I can format an unlimited number of documents for web and print. If I want to change them on the fly, I can. Try changing the style of even a dozen Word documents, and you'll soon be swearing like a sailor at your computer.

PrinceXML can literally chew through tens of thousands of pages in less than a minute — I know because I do just that in my day job each and every time I build the documentation I write.

In the next part, I'll be looking to take things up a notch with some advanced topics using some of MultiMarkdown and PrinceXML's powerful features, as well as the automation power baked right into the Mac.


  1. I use Adobe’s variety, Adobe Garamond Pro, which came with Indesign. 

  2. I plan on refining both as I go. 

Comments

There are no comments yet. Click the button below to start the conversation!

Article Details
Support my writing

Liked this article and want to support my site?

If you're an Amazon customer, please consider using one my affiliate links for the USA or UK Amazon stores.

Prefer another way to support my site?