Dear DT users,
I’m not a programmer, but thanks to the posts graciously written by @chrillek (in particular CSS for Markdown — the series) and to the W3 and MDN websites, I’ve managed to write a CSS that previews markdown files in DT the way I like it.
There’s one aspect of the CSS I’ve been struggling with, though, and that’s the printing. Indeed, I cannot seem to be able to define global margins for printing: they seem fine in the first page, but they are smaller in the successive ones. I’m therefore wondering whether any of you could be so kind as to point me in the right direction.
The code I used to specify margins for printing is the following:
@page { size: letter portrait; margin: 1in; }
The reason I’d like to style for printing is that by printing to PDF I’d be able to share documents formatted the way I like it. I’m of course open to suggestions if you think there’s a better way, or an easier one, to generate a PDF that is formatted like the markdown preview. Thank you for your consideration.
Sincerely,
Enrico
P.S. I wanted to upload the whole CSS file in case it helped diagnose the problem, but for some reason when I try to do that all my .css files are grayed out and therefore unavailable for selection.
Short answer: CSS Paged Media (@page) | Can I use... Support tables for HTML5, CSS3, etc and 85062 – Support CSS 3 Paged Media Margin Boxes
Longer answer: Assuming that you print your MD to PDF from within DT, the lack of Webkit’s support for the @page rule is probably biting you.
Longest answer: Set up DT so that it refers to the CSS for Markdown with an external path (/Users/you/somewhere/your.css) instead of an x-devonthink-item location. Or include it verbatim at the top of your Markdown. After that, convert the MD to HTML in DEVONthink (context menu). Open the new HTML file in Chrome and print from there. Firefox is, unfortunately, no use here either as it doesn’t support the size parameter.
If that helps, you’re simply a victim of Apple’s reluctance to implement web standards. The Webkit bug is open since 2012, by the way. What a <favorite swear word>. Otherwise, we’ll have to investigate further.
That’s a fundamental misconception. PDF is a fixed layout, i.e. you decide on a page size up front and the data is then formatted to match that layout. Markdown preview is HTML, which is not fixed layout, as you can change the window size to whatever you want. As it should be, as the HTML can be viewed on various differently sized devices, from a tiny smartphone to a 27" monitor. HTML reflows with window size (to be very simplistic here), PDF does not. So the idea that PDF should represent MD preview exactly is misdirected as there is no exact MD preview. Also, you could define your MD preview to be white on black, which would not be very nice in PDF.
The upload function is only for images. You could copy your CSS and paste it inside three backticks like so
```
css goes here
```
but that might not be a good idea if it’s really huge.
2 Likes
Or the CSS file can be zipped and attached to the forum reply 
Dear @BLUEFROG,
Thank you for the helpful clarification.
Dear @chrillek,
Thank you for taking the time to help me out by writing such an exhaustive reply: I really appreciate that. Indeed when I print the html from Chrome everything now works as expected.
Best regards,
Enrico
Good. I’m sorry that there’s no better solution at this time. CSS print styles are not really focused by Safari or Firefox.