CSS snipet is not applied to link when exporting to PDF

Custom CSS & Theme Design
, ,
1

Hi,

When exporting a note with links, the CSS snippet of a link which makes the bullet point return in front of the text.

This is how it looks in Obsidian

image
image758×608 21.7 KB

This is how it looks in source mode
image

The link “01 Behaaglijkheid” has in it a dataview query and a CSS snippet is applied:

LongformBlock: true
cssclasses:

  • DataviewListNoBullet
    Blok: 1
LIST WITHOUT ID Tekst
WHERE Kop = "6.1.2 Behaaglijkheid"
WHERE Blok = 1

But when exporting it to PDF, it seems like the CSS snippet is not applied.

image
image897×501 25.3 KB

Is there a way to fix this and get the PDF to export the note the way it is displayed in Obsidian

Regards,

Jonas

2

Is your first image from Live Preview or Reading view? Reading view is going to be closest to the PDF export, but depending on the theme you are using, theme settings, the extra CSS snippet(s), etc., the styles may not carry over to the PDF export.

In that case, you’ll need to write @media print export snippet to fix the issues with the PDF. If you search here or on Discord, there are numerous examples, but it doesn’t tend to be a “one snippet fits all” scenario.

Are the clean-embeds changes looking alright in the export? As the issue seems to be with the DataviewListNoBullet snippet, if you share that here, maybe someone could have a look.

3

Hi I found another way using inline dataview to get just text. This combined with just making one large note instead of linked notes solved my problem. I will have a look at your suggestion at a later date to expand my Obsidian skills.