#1

I made the Clean Embeds CSS snippet but it still has some deficiencies in PDF styling (margins/padding around embeds when exporting to PDF).

So I naively jumped into the Dev Console, hit Ctrl+Shift+P, selected Show Rendering and selected Emulate CSS media type: print.

Voilà: White screen. Of course now it tried to show the whole Obsidian in “print” mode, not just my preview window.

Q1: How do you debug your PDF styling, say, for a theme or CSS snippet? Can’t be that we have to try-and-error and measure stuff in the PDF, right?

Q2: Is there a way to copy the rendered preview as HTML, so I could save it to a file and go from there?

Q3: Is there something like a print.css for the Obsidian built-in themes so I can at least get an idea where to override what?

P.S.: Please don’t answer “Just enclose everything in @media print in your CSS”, since for some reason that doesn’t work, not even using !important (which I abhor). I actually tried using @media screen, print but to no avail.

2 Likes
Meta Post - Common CSS Hacks
PDF styling - unable to remove unwanted padding
#2

Q2: If you navigate the elements and find this div.view-content, that should be the entire body of the note in Preview mode.

image
image1736×1184 495 KB

I copied this and pasted in an empty file in VS Code to get the entire note.

Q3: From the sources tab, I saved the app.css and linked it to my file in VS Code. This gave me the default style for the note as I see in Obsidian.

This get it close to debug but it still doesn’t product identical results like Obsidian does. So perhaps, there’s another bit of css used by the print plugin which I’m unable to find so far. I’m using the default theme for testing of course and if you do it this way, you’d need to add the class print to the view-content div saved above to be able to print it from the browser.

Looking forward to see if someone knows more about the internal css since I couldn’t find much in my elementary investigation and the pdf printing issue has bothered me as well requiring me to try different themes just for testing whose PDF exports look better. Some of these days, I planned to just do what you are doing but was being lazy and your post caused me to take half a step :grinning_face_with_smiling_eyes: at least.

#3

Thanks for your helpful feedback—brings me a step further, at least!

I don’t criticize the devs for not making Obsidian open source—their decision after all—, but it makes for so much more detective work …

And yes, I do use the default (light) theme for almost everything, because I found almost any other theme having some deficiencies I couldn’t live with.

I’ll do some further investigation when I find time.

1 Like
#4

Seems that many selectors don’t work anymore when trying to handle @media print, unfortunately I don’t know what preprocessing is applied before it reaches the PDF renderer.

Things like

.clean-embeds .markdown-preview-section .frontmatter

seem not to select anything anymore, I have to use

pre.frontmatter

here. Which of course could have unwanted side effects.

#5

Just making sure, are you using !important in your properties?

#6

It seems classes like .markdown-preview-section and so on are simply not there anymore when printing. But how to check except by asking a dev, since we can’t look at the code?

I assume some preprocessing goes on when exporting to PDF, whicht might change the DOM.

1 Like
#7

Hmm I see what you mean. I wonder if it’d make sense if we raise an FR to make printing work with the system’s default print dialog instead of how it works built-in right now. I wonder if it’d be worth the effort especially since it may still not give us the control over formatting as we like.

Another thing I’ve been wondering if we can perhaps post this in plugin ideas and see if people are interested in using some library like Html2Canvas (in combination with jsPDF) to generate images/pdfs of their notes. I’ve worked with this before and generating the correct layout is quite trivial including managing margins but I’m not that familiar with TypeScript nor do I have enough time on my hand to get into learning to make a plugin right now. But I’m keeping this on my radar.

2 Likes
#8

Found a solution?

#9

The solution: GitHub - nothingislost/obsidian-print-preview: A plugin to help theme designers debug "export to pdf" issues by allowing them to inspect the print results

1 Like
Request: "print" view toggle along with "preview" and "edit"
#10

This plugin is not installable from obsidian so I followed the manual installation instruction.

But there is no such file as main.js in the package. I tried changing main.ts to main.js but obsidian won’t load the plugin. (It did appear in the plugin selection, and I toggled it on)