Export to PDF does not respect page-level CSS

Steps to reproduce

  1. Create some content in a page.
  2. Include a custom css class in the YAML frontmatter, e.g.:

Page.md

---
cssclass: green-headings
---

# This is a header

obsidian.css

.green-headings h1 {
    color: green;
}

Expected result

The exported PDF includes the custom CSS styling, just as it does for the default obsidian.css. (in this example, H1s would be green.)

Actual result

The exported PDF does not include the custom CSS styling. (In this example, H1s are black.)

Environment

  • Operating system: Ubuntu 20.04
  • Obsidian version: v0.10.0
2 Likes

To modify how pages are printed you need to change the ‘@media print’ part in css

1 Like

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 that demonstrates the issue. To see it, unzip the vault and load it in Obsidian, and see that “Regular Page” has black headers and “Special Page” has green headers using the cssclass directive. Then export “Special Page” to PDF and observe that the PDF headers are black, not green.

cssclass.zip (2.2 KB)

maybe I wasn’t clear enough, this green-headers.css works on both

h1 {
    color: green;
}

@media print{
    h1 {
        color: green;
    }
}
1 Like

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)

versus in Obsidian

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 kinda defeats the entire purpose of CSS classes. For 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.

1 Like

Export to pdf is based on reader output not on live preview.

I almost never use LP. what is “reader output”. reading mode?

In Obsidian, on reading mode

In PDF


if you see the second image from the previous post, .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 (first image)

alight, open a FR for that.

Thank you for bumping this thread! You expressed the problem much more clearly than I did.

https://forum.obsidian.md/t/make-export-to-pdf-respect-cssclass/38002