CSS media print sizes

DEVONthink
1

After years of barely scratching the surface I am finally making some headway in customizing my CSS for my markdown notes. Just as that’s happening a thing came up at work that I think could utilize style sheets.
I need to print out pages of notes to paper and leave a very wide right margin empty for handwritten logging notes.
I was thinking to print to legal (8.5"x17") landscape (so 17"x8.5") with the text going to just over the half way point. All this will be coming from an iPhone to a monochrome laser printer.
I can’t quite figure out how declaring the size/orientation in CSS works with selections in the iOS print dialogue.

This is the basic CSS I have for printing. Strips out colour of links, wraps fenced code blocks.
The source files are mostly large blocks of paragraph text, some headings, tables and a few code blocks although I might swap those to block quotes.
I still have to work out how to not page break tables.

@media print {
  @page {
    size: legal landscape;
    max-width: 50ch;
    }
  code {  
    white-space: pre-wrap !important;  
    }
   a {
  color: black;
  text-decoration: underline;
}
}

If I can get this to work I won’t have to go to the middle step of sending the text to Word or Preview or ?? And futzing around with scale or whatever. Haven’t really considered how I might to that yet.

2

CSS print styling is wonky in my experience.

Set File > Page Setup to print landscape. And try something like this…

<style type="text/css">
@media print {
	@page {
    		size: 14in 8.5in;
     	 }
	body {
		margin-left: 30vw;
		}
}
</style>

image
image1910×1588 335 KB

3

You should convert your MD to HTML, including the HTML. Then load that in Chrome (!) and print from there.
Other browsers have worse support for print media queries.

4

Thanks everyone
Wanted to avoid the Chrome step if I could but I tested it and it worked so I chalked it up as the fallback solution. Troubleshooting this in iOS was too finicky so I moved to MacOS and I’ve figured out the CSS and then tested it on my phone. This CSS is what ended up reliably working with the iOS print dialogue. I’ve gone back and forth leaving the space on the left or the right.

@page {  
    size: 14in 8.5in;  
    }  
    body {  
    max-width: 55ch;
    margin-left: 10vw;  
    }

The only remaining issue is discovering what kind of printer will show up on the day.

5

Glad to hear it :slight_smile:

1 Like
6

That should work everywhere. The problematic things are page breaks (widows, orphans etc).

2 Likes
7

This is where I think I’ll use <gasp!> an HTML page break tag.
each set of notes is only two maybe three pages and the chunks are easily broken up.
What’s great about doing it this way is that in the basic DT Markdown render which is mostly for me, page break doesn’t show up.
I break up the notes, print them out, hand them out, they get marked up on set, handed back to me and I update the notes with the new info. Sometimes paper and pencil works better than anything else. Especially under duress and when there’s already a clipboard in use for all the other info flying around.

1 Like
8

:100: