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).
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;
}
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
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 {…}
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.
I want to drop a big THANK YOU to the Obsidian devs for fixing this! I can now use cssclass in my pages, and the PDF output respects it.
This is a big deal for me because it means that my printed notes now match the formatting I see in the app. This is great for reports, forms, cheat sheets, etc. etc.
I’ve tried with both the community flatpak and the official appimage and the problem still seems to persist. The custom css renders fine in reading mode, but, even if the modifications are copied within media print, the PDF output still does not pick it.
Custom css:
.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;
}
/* Adjust printing style only to have column output
when the document is tagged with the fontmatter
cssclass of 'columns'*/
@media print {
.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;
}
/* Document title to go across entire page */
.academia_pdf h1:first-of-type {
column-span: all;
text-align: center;
}
/* Content broken up in columns */
.academia_pdf .markdown-preview-view {
column-count: 2;
column-rule: 1px solid #EEE;
column-gap: 2em;
}
}
Thank you @Craig! You are right, finding that out myself could have taken some time.
I guess now it’s time to delve on css styling, I have checked online and found some examples: ScottKillen’s template, phibr0’s latex like template (I can’t get this one to work), but I am not sure if there is a central repository where templates are shared. Maybe I should open an issue on awesome-obsidian?
