PDF Export is ignoring YAML CSS class

[frvkl]

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:

[WhiteNoise]

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.

Export to PDF does not respect page-level CSS

Hi @WhiteNoise, thanks for writing back! Thanks for the tip regarding @media print {}. That works well to specify css that only affects PDF output. However, that doesn’t solve the problem I’m seeing. The issue is that export to PDF seems to be ignoring the cssclass: directive in the frontmatter. I can get regular css to appear in the PDF, e.g. h1 { color:green; }, but if I add a page-level class to the frontmatter using cssclass: it does not appear in the PDF. I’ve attached a mini-vault th…

[Craig]

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.

[WhiteNoise]

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.

[Craig]

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

Obsidian cssclass issue 2021-06-16

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

[WhiteNoise]

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

[midas0441]

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

[tingmelvin]

From here:

Export to PDF does not respect page-level CSS

Just bumping this, because it’s not just about @media print {} (and I should know this since I’m one of the only few people working on @media print{} in Obsidian at the moment. the HTML for PDF renders drops CSSclasses (the cssclass here being cornell) (in print) [image] versus in Obsidian [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 rendere…

When exporting to PDF, the CSSClass is dropped:

(in print)

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

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:

vs in Obsidian

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.

[Sanqui]

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