PDF Export is ignoring YAML CSS class

When using cssclass in the yaml frontmatter of a note, to facilitate custom styling for that note, the custom css is applied to the note/page, but is ignored in the PDF export.

For example:

YAML:

---
cssclass: h1_red
---

CSS:

.h1_red.markdown-preview-view h1{
	color: red!important
}
@media print {
	.h1_red.markdown-preview-view h1{
		color: red!important
	}
}

Note in Obsidian:

PDF Export:

2 Likes

I have replied to an identical bug report a while back.
Please, search before posting.

Also, if you need help, post in the help section first.

Hi @WhiteNoise , thanks for your reply. This bug is still present in Obsidian. The YAML cssclass: directives are not respected when exporting to PDF.

Please let me know if you need help reproducing the bug.

It works for me and I posted a solution to your problem in the linked thread.

Post a screen recording of the css I provided on a vaniilla vault and print.

Sure, happy to help. Here’s a link to the screencast:

Here’s what I demonstrate in the screencast:

  • (offscreen) create new vault with no plugins
  • (offscreen) add test.css and activate it
  • Create regular note
  • Observe that the header is green
  • Print regular note
  • Observe that header is green
  • Add special CSS
  • Reload Obsidian to force CSS to update
  • Create special note with “cssclass: special”
  • Observe that header for this note is now red
  • Print special note
  • Observe that printed header is still green

Ok, I managed to repro. Thank you!
I move this back to bug reports.

2 Likes

I posted about this on Discord… now, I see it is also reported here.

From here:

When exporting to PDF, the CSSClass is dropped:

(in print)
image

(versus in Obsidian - see the .markdown-preview-view portion)
image

On the latter, .markdown-preview-view.markdown-rendered has .cornell appended to the back of it. This behaviour is not replicated in .print > .markdown-preview-view.markdown-rendered (in the first image).

Unfortunately the lack of the css class applied to the .markdown-preview-view.markdown-rendered section means that people cannot print or export to PDF except what is already originally rendered in the original theme, which kind of defeats the entire purpose of CSS classes. In terms of use cases, stuff like LaTeX rendered document printing cannot be supported in-house by a theme that usually doesn’t look like LaTeX, or things like clean-embeds cssclasses won’t print as such.


This is evident in an PDF export of the document:
image
vs in Obsidian
image

The PDF export is similar to other documents exported using the Willemstad theme, although the point of the CSS Class is literally to ensure otherwise.

9 Likes

Please fix this, it’s essential for generating PDFs for invoices etc. from Obsidian!

3 Likes