Customizing PDF export per note

I was recently looking for how to make a standard pdf style without changing my whole obsidian theme or using external stuff. So, I wrote a css snippet that affects how things look in the editor and therefore affects how the pdf export looks.

In the header of a file that I want to export to pdf, I put:

cssclass: academia_pdf

This makes it easy to use my regular theme to write and edit my files, and then add that to the header before exporting.

Then, I put a css snippet in the snippets folder (I named it PDFFont.css). Remember to go to Settings>Appearance>CSS Snippets to activate it.

The properties in the first block below affect all of the text in the editor. I illustrate here how to change the font, the text size, add paragraph indents, and change the line spacing. The next one affects the color of links (external and internal). The third affects the highlight color. This is for the new editor (WYSIWYG), and notice that each one has .academia_pdf out front (same name as what is in my header).

.academia_pdf .cm-content {
font-family: “Times New Roman”, Times, serif;
font-size: 11.5px;
text-indent: 2em;
line-height: 2;
}

.academia_pdf .cm-content .cm-url {
color: red;
}

.academia_pdf .cm-content .cm-highlight {
background: LightSkyBlue;
}

3 Likes

I moved this to its own thread so it wasn’t lost, but the OP originally posted it in reply here:

Customising PDF formatting

Hi, just a follow up to my own post. This actually wasn’t doing exactly what I wanted - I got over-excited and didn’t realize my small changes weren’t affecting the pdf export. I have found how to do it, though.

Save the following as a css snippet and toggle it on and off as needed. Nothing needed in the header/frontmatter of any individual .md file.

@media print {

body {
  font-family: "Times New Roman", Times, serif; 
  font-size: 11.5px;
  text-indent: 2em;
  line-height: 2;
}

a {
  color: black;
} 

}

1 Like

Hi! I’m not sure if I am doing this right, but all my pdf still look the same no matter what I try and it’s so frustrating :frowning:

I have your code in a CSS snippet, the snippet itself works because when I called cssclass: pdf_academia the text in reading (and editing?) mode changed accordingly.

I tried:

  • disabling all community plugins,
  • changing the page format from A4 back to letter,
  • switching on and off the “add name…”
  • adding/removing a header with all sort of cssclass names (print, media, @media)… although you stated it’s not needed, I had nothing else to throw at it.
  • having separate snippets just for @media print {…}

as previously stated: :frowning:

I don’t think you’re doing anything wrong. I think you’ve stumbled on a bug in Obsidian that’s been around for a while: PDF export does not respect cssclass specified in YAML. You can read more about it here:

It’s painful to me, because I use PDF export often and I would really love to be able to customize the PDF per note. For some notes I want multi columns, for others I want different fonts, etc.

The bug report is still open, so I have hope that the dev team is aware of it and will eventually fix it. If you’d like to draw attention to it, you might add a heart or a comment to the bug report post.

1 Like