CSS Stylesheet for printing documents

[vinschger]

Hi

I have a paragraph in my personal CSS stylesheet for printing (printing on paper or converting to pdf) of my markdown documents. However, the resulting printout or pdf does not respect the page margins that I have defined in the CSS code. Any idea why? I have put this paragraph at the end of my CSS stylesheet, so that it should overwrite any potential other settings:

@media only print { 	
   body {  		
     font-family: ‘Times New Roman’, serif; 		
     font-size: 11pt;  	
   } 	
   h1, h2, h3, h4, h5, h6 {  		
     font-size: 14pt;  	
   }  	
   table, pre, figure {  		
     break-inside: avoid; 	
   } 	
   @page { 		
     size: A4; 		
     margin: 2.5cm !important; 	
   }
 }

Do you have any idea, why the margins on page 2 on top seems to be 0 cm in the resulting pdf/printout?

Thanks!

[chrillek]

Please use the search function – “CSS print” as search term leads you directly to

CSS: Styling for Printing

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 …

[vinschger]

Dear Chrillek

thank you a lot. Indeed I have searched in the forum and found another thread from you, but not this one. Thanks a lot for pointing it out. So if I understand it correctly, there is no easy possibility to get a good-looking printout from markdown documents, at least not with correct margins on all sides?

Thanks
Vinschger

[chrillek]

I described the only way I’m aware of in the other thread. That you don’t get what you want is due to the limitations of Apple’s and Firefox’s implementation of CSS, unfortunately.

[BLUEFROG]

Page size and margins are controlled by File > Page Setup.
This is a Markdown document printed with the Monarch Envelope size selected…

[vinschger]

I do not find a page margin setting for markdown printouts. Can you please share a screenshot, where you have such settings? Thank you.

[BLUEFROG]

There isn’t a page margin setting for markdown printouts. There is a Page Setup. However, custom margins may be affected or disallowed by the chosen printer. Page size should be editable, margins may be.

[vinschger]

This older posting of @BLUEFROG describes a perfect solution to handle page margins in markdown printouts:

Markdown margins

I believe it’s the File > Print dialog you have there rather than File > Page Setup, which on my end looks like this: [53] Sadly there are no margin option to be found, on either dialog box, at least with my printer. I didn’t know this was driver related. Even without the concept of pages, it seems logical to expect DT to have some control over markdown rendering when printed (since it already controls the font used).

Thank you, Jim. Indeed, I wasn’t aware that with a customized page setting it is possible to define margins, whereas it is not possible to define them with the CSS stylesheet consistently for all pages. Now, I have a customized page setting for printing/converting markdown documents, and a standard page setting for printing other documents (PDF etc.)

[chrillek]

@vinschger

whereas it is not possible to define them with the CSS stylesheet consistently for all pages.

To clarify: you can define all page attributes just fine with CSS. But Firefox and Safari are seriously lacking in implementing those attributes. And there are more than just margins, like orphan and widow control, forced page breaks (eg before a level 2 heading) etc.

If you need full and fine control over print layout, use Chrome to print your MD/HTML documents and an appropriate style sheet.