SMOOSH JUICE
Pretty printing in Obsidian
When I first started putting my notes into Obsidian I was put off by the fact that it seemed so hard to get any kind of reasonable printout. Sure you can export to PDF but the output wasn’t at all like I wanted, and every way to get output seemed so complicated.
Since that time, I’ve learned a lot. I’ve messed around with pandoc, with LaTeX, with Typst. All of them work, all of required multiple steps and hurt my brain. A few months ago, I learned you could control printed output with a css command and snippet, and use Obsidian’s “Export to PDF” command directly, and now I have a css that generates output like the page below (a Cairn background I made for my Oz game).
My snippet outputs two-column text except for H1s, which span the full width of the page. I refined it so that I could easily change fonts, and so that lists and headers and tables don’t break over columns, and so that I can use it on pages with transcluded text (where you use the ![[file name]] command in markdown).
Otherwise it uses the formatting and theme of your vault. Here’s the same content and css file, but using a different theme in Obsidian.
Print settings
I usually print at A4, 68% size text, default margins, filename not included as header. I have a hotkey set up so that command-shift-P takes me to the print window. This can be for adventures or other RPG content I make, but you can also use it for sessions.
An alternate setting I also use is A5, 100%, minimal margins, landscape. I take the output from this and print it onto A6 index cards. I like to have monsters on index cards for my play.
Key to know is that H1 always starts on a new page, and that filenames are treated as H1’s if they are included.
How to Install
In Obsidian settings, choose Appearance.
Then, scroll down to CSS snippets, and click the file folder icon to the right of the screen to open your snippets folder.
On a Mac, you need to push Command-Shift-. to see the files in this folder.
Then save the file to the folder, ensuring it has the extension .css instead of .txt.
Load the snippet by choosing the round arrow next to the file folder icon you clicked previously.
Finally, enable the snippet with the slider.
How to Modify
The .css file is just a text file, so you can modify it in any text editor. I’ve commented most of the code so it should be easy to see what to do.