{"id":11412,"date":"2024-03-05T22:18:36","date_gmt":"2024-03-05T21:18:36","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=11412"},"modified":"2024-03-05T22:19:38","modified_gmt":"2024-03-05T21:19:38","slug":"css-for-printing-to-paper","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2024\/03\/05\/css-for-printing-to-paper\/","title":{"rendered":"CSS for printing to paper"},"content":{"rendered":"\n

CSS for printing to paper<\/a><\/em><\/p>\n\n\n\n

I do like articles explaining how to use CSS for printing!<\/p>\n\n\n\n\n\n\n\n\n\n\n\n

\n

CSS for printing to paper<\/h1>\n\n\n\n
    \n
  1. <\/li>\n<\/ol>\n\n\n\n
      \n
    1. Introduction<\/a><\/li>\n\n\n\n
    2. Sample files<\/a><\/li>\n\n\n\n
    3. @page<\/a><\/li>\n\n\n\n
    4. @media print<\/a><\/li>\n\n\n\n
    5. Width, height, margin, and padding<\/a><\/li>\n\n\n\n
    6. Element positioning<\/a><\/li>\n\n\n\n
    7. Multi-page documents with repeating elements<\/a><\/li>\n\n\n\n
    8. Portrait \/ Landscape mode<\/a><\/li>\n\n\n\n
    9. Data source<\/a><\/li>\n\n\n\n
    10. Essentials cheatsheet<\/a><\/li>\n<\/ol>\n\n\n\n

      Introduction<\/h2>\n\n\n\n

      At work, one of the things I do pretty often is write print generators in HTML to recreate and replace forms that the company has traditionally done handwritten on paper or in Excel. This allows the company to move into new web-based tools where the form is autofilled by URL parameters from our database, while getting the same physical output everyone’s familiar with.<\/p>\n\n\n\n

      This article explains some of the CSS basics that control how your webpages look when printed, and a couple of tips and tricks I’ve learned that might help you out.<\/p>\n\n\n\n

      Sample files<\/h2>\n\n\n\n

      Here are some sample page generators to establish some context, and perhaps a shred of credibility.<\/p>\n\n\n\n

      I’ll be the first to admit these pages are a little bit ugly and could use more polish. But they get the job done and I’m still employed.<\/p>\n\n\n\n

      Invoice generator<\/a><\/p>\n\n\n\n

      Coversheet with sidebar inputs<\/a><\/p>\n\n\n\n

      Coversheet with contenteditable<\/a><\/p>\n\n\n\n

      QR code generator<\/a><\/p>\n\n\n\n

      @page<\/h2>\n\n\n\n

      CSS has a rule called @page<\/code><\/a> that informs the browser of your website’s printing preferences. Normally, I use<\/p>\n\n\n\n

      \n
      @<\/span>page<\/span>\n{<\/span>\n    size<\/span>:<\/span> Letter<\/span> portrait<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
      I will explain why I choose margin: 0<\/code> in the later section about margins. You should use Letter or A4 as appropriate for your relationship with the metric system.<\/p>\n\n\n\n
      Setting the size and margin of @page is not the same as setting the width, height, and margin of your <html><\/code> or <body><\/code> element. @page is beyond the DOM \u2014 it contains the DOM. On the web, your <html><\/code> element is bounded by the edges of your screen, but when printing it is bounded by @page.<\/p>\n\n\n\n
      The settings controlled by @page more or less correspond to the settings you get in your browser’s print dialog when you press Ctrl+P.<\/p>\n\n\n\n
      Here’s a sample file I used to do some experiments:<\/p>\n\n\n\n
      \n
      <!DOCTYPE html><\/span>\n<<\/span>html<\/span>><\/span>\n<<\/span>style<\/span>><\/span>\n@<\/span>page<\/span>\n{<\/span>\n    \/* see below for each experiment *\/<\/span>\n}<\/span>\nhtml<\/span>\n{<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    background-color<\/span>:<\/span> lightblue<\/span>;<\/span>\n\n    \/* grid by shunryu111 https:\/\/stackoverflow.com\/a\/32861765\/5430534 *\/<\/span>\n    background-size<\/span>:<\/span> 0.25<\/span>in<\/span> 0.25<\/span>in<\/span>;<\/span>\n    background-image<\/span>:<\/span>\n    linear-gradient<\/span>(<\/span>to<\/span> right<\/span>,<\/span> gray<\/span> 1<\/span>px<\/span>,<\/span> transparent<\/span> 1<\/span>px<\/span>)<\/span>,<\/span>\n    linear-gradient<\/span>(<\/span>to<\/span> bottom<\/span>,<\/span> gray<\/span> 1<\/span>px<\/span>,<\/span> transparent<\/span> 1<\/span>px<\/span>)<\/span>;<\/span>\n}<\/span>\n<<\/span>\/<\/span>style<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n    <<\/span>h1<\/span>><\/span>Sample text<\/span><<\/span>\/<\/span>h1<\/span>><\/span>\n    <<\/span>p<\/span>><\/span>sample text<\/span><<\/span>\/<\/span>p<\/span>><\/span>\n<<\/span>\/<\/span>body<\/span>><\/span>\n<<\/span>\/<\/span>html<\/span>><\/span>\n<\/pre>\n<\/div>\n\n\n\n
      Here’s how that looks in the browser:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      And here are the results of some different @page values:<\/p>\n\n\n\n
      @page { size: Letter portrait; margin: 1in; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      @page { size: Letter landscape; margin: 1in; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      @page { size: Letter landscape; margin: 0; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Setting the @page size won’t actually put that size of paper into your printer’s feed tray. You’ll have to do that part yourself<\/a>.<\/p>\n\n\n\n
      Notice how when I set size<\/code> to A5, my printer stays on Letter, and the A5 size fits entirely within the Letter size which gives the appearance of a margin even though it’s not coming from the margin<\/code> setting.<\/p>\n\n\n\n
      @page { size: A5 portrait; margin: 0; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      But if I tell the printer that I have actual A5 paper loaded, then it looks as expected.<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      From what I gather by experimentation, Chrome only follows the @page rule if you have Margin set to Default. As soon as you change Margin in the print dialog, your output is instead the product of your physical paper size and the chosen margin.<\/p>\n\n\n\n
      @page { size: A5 portrait; margin: 0; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Even when you choose a @page size that fits fully within your physical paper, the margin<\/code> still matters. Here, I make a 5×5 square with no margin, and a 5×5 square with margin. The size of the <html><\/code> element is bounded by the @page size and<\/strong> margin combined.<\/p>\n\n\n\n
      @page { size: 5in 5in; margin: 0; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      @page { size: 5in 5in; margin: 1in; }<\/code>:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      I did all these tests not because I expect to print on A5 or 5×5 paper, but because it took me a while to figure out what exactly @page is. Now I am pretty confident in always using Letter with margin 0.<\/p>\n\n\n\n
      @media print<\/h2>\n\n\n\n
      There is a media query<\/a> called print<\/code> where you can write styles that only apply during printing. My generator pages often contain a header, some options, and some help text for the user that obviously shouldn’t come out on the print, so this is where you add display:none<\/code> on those elements.<\/p>\n\n\n\n
      \n
      \/* Normal styles that appear while you are preparing the document *\/<\/span>\nheader<\/span>\n{<\/span>\n    display<\/span>:<\/span> block<\/span>;<\/span>\n}<\/span>\n\n@<\/span>media<\/span> print<\/span>\n{<\/span>\n    \/* Disappear when you are printing the document *\/<\/span>\n    header<\/span>\n    {<\/span>\n        display<\/span>:<\/span> none<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Width, height, margin, and padding<\/h2>\n\n\n\n
      You’ll need to know a bit about the box model<\/a> to get the margins you want without wrestling the computer too much.<\/p>\n\n\n\n
      \"\"\/<\/a><\/figure>\n\n\n\n
      The reason I always set @page margin: 0<\/code> is that I’d rather handle the margins on the DOM elements instead. When I tried to use @page margin: 0.5in<\/code>, I would often accidentally wind up with double-margins that squash the content smaller than I expected, and my one-page design spilled onto a second page.<\/p>\n\n\n\n
      If I wanted to use @page margin, then the actual page content would need to be laid out all the way up against the edges of the DOM, which is harder for me to think about and harder to preview before printing. It is mentally easier for me to remember that <html><\/code> occupies the entire physical paper and my margins are within the DOM instead of beyond it.<\/p>\n\n\n\n
      \n
      @<\/span>page<\/span>\n{<\/span>\n    size<\/span>:<\/span> Letter<\/span> portrait<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\nhtml<\/span>,<\/span>\nbody<\/span>\n{<\/span>\n    width<\/span>:<\/span> 8.5<\/span>in<\/span>;<\/span>\n    height<\/span>:<\/span> 11<\/span>in<\/span>;<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
      When it comes to multi-page print generators, you’re going to want a separate DOM element representing each page. Since you can’t have multiple <html><\/code> or <body><\/code>, you’re going to need another element. I like <article><\/code>. Even for single-page generators, you may as well always use an article.<\/p>\n\n\n\n
      Since each <article><\/code> represents one page, I don’t want any margins or padding on <html><\/code> or <body><\/code>. We’re pushing the logic one step further \u2014 it is easier for me to let the article occupy the entire physical page and put my margins within it.<\/p>\n\n\n\n
      \n
      @<\/span>page<\/span>\n{<\/span>\n    size<\/span>:<\/span> Letter<\/span> portrait<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\nhtml<\/span>,<\/span>\nbody<\/span>\n{<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\n\narticle<\/span>\n{<\/span>\n    width<\/span>:<\/span> 8.5<\/span>in<\/span>;<\/span>\n    height<\/span>:<\/span> 11<\/span>in<\/span>;<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
      When I talk about adding margin within my article, I’m not using the margin<\/code> property, I’m using padding<\/code>. That’s because margin<\/code> goes outside and around your element in the box model. If you use a margin<\/code> of 0.5in, you’ll have to set the article to 7.5\u00d710 so that the article plus 2\u00d7margin equals 8.5\u00d711. And if you want to adjust that margin you’ll have to adjust the other dimensions.<\/p>\n\n\n\n
      Instead, padding<\/code> goes on the inside of the element, so I can define the article to be 8.5\u00d711 with 0.5in padding, and all the elements inside the article will stay on the page.<\/p>\n\n\n\n
      A lot of intuition about element dimensions is easier when you set box-sizing: border-box<\/code><\/a>. It makes it so that the outer dimensions of the article are locked in while you adjust the inner padding. This is my snippet:<\/p>\n\n\n\n
      \n
      html<\/span>\n{<\/span>\n    box-sizing<\/span>:<\/span> border-box<\/span>;<\/span>\n}<\/span>\n*<\/span>,<\/span> *<\/span>:<\/span>before<\/span>,<\/span> *<\/span>:<\/span>after<\/span>\n{<\/span>\n    box-sizing<\/span>:<\/span> inherit<\/span>;<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
      Let’s put this all together:<\/p>\n\n\n\n
      \n
      @<\/span>page<\/span>\n{<\/span>\n    size<\/span>:<\/span> Letter<\/span> portrait<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\n\nhtml<\/span>\n{<\/span>\n    box-sizing<\/span>:<\/span> border-box<\/span>;<\/span>\n}<\/span>\n*<\/span>,<\/span> *<\/span>:<\/span>before<\/span>,<\/span> *<\/span>:<\/span>after<\/span>\n{<\/span>\n    box-sizing<\/span>:<\/span> inherit<\/span>;<\/span>\n}<\/span>\n\nhtml<\/span>,<\/span>\nbody<\/span>\n{<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\n\narticle<\/span>\n{<\/span>\n    width<\/span>:<\/span> 8.5<\/span>in<\/span>;<\/span>\n    height<\/span>:<\/span> 11<\/span>in<\/span>;<\/span>\n    padding<\/span>:<\/span> 0.5<\/span>in<\/span>;<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Element positioning<\/h2>\n\n\n\n
      Once you’ve got your articles and margins set up, the space inside the article is yours to do with as you please. Design your document using whatever HTML\/CSS you feel is appropriate for the project. Sometimes this means laying out elements with flex or grid because you’ve been given some leeway with the output. Sometimes it means creating squares of a specific size to fit on a certain brand of sticker paper. Sometimes it means absolutely positioning absolutely everything to the millimeter because the user needs to feed a special piece of pre-labeled paper through the printer to get your data on top of it, and you’re not in control of that special paper.<\/p>\n\n\n\n
      I’m not here to give a tutorial on how to write HTML in general, so you’ll need to be able to do that. All I can say is be mindful of that fact that you’re dealing with the limited real estate of a piece of paper, unlike a browser window which can scroll and zoom to any length or scale. If your document will contain an arbitrary number of items, be ready to paginate by creating more <article><\/code>.<\/p>\n\n\n\n
      Multi-page documents with repeating elements<\/h2>\n\n\n\n
      A lot of the print generators I write contain tabular data, like an invoice full of line items. If your <table><\/code> is large enough to go onto a second page, the browser will automatically duplicate the <thead><\/code> at the top of each page.<\/p>\n\n\n\n
      \n
      <<\/span>table<\/span>><\/span>\n    <<\/span>thead<\/span>><\/span>\n        <<\/span>tr<\/span>><\/span>\n            <<\/span>th<\/span>><\/span>Sample text<\/span><<\/span>\/<\/span>th<\/span>><\/span>\n            <<\/span>th<\/span>><\/span>Sample text<\/span><<\/span>\/<\/span>th<\/span>><\/span>\n        <<\/span>\/<\/span>tr<\/span>><\/span>\n    <<\/span>\/<\/span>thead<\/span>><\/span>\n    <<\/span>tbody<\/span>><\/span>\n        <<\/span>tr<\/span>><\/span><<\/span>td<\/span>><\/span>0<\/span><<\/span>\/<\/span>td<\/span>><\/span><<\/span>td<\/span>><\/span>0<\/span><<\/span>\/<\/span>td<\/span>><\/span><<\/span>\/<\/span>tr<\/span>><\/span>\n        <<\/span>tr<\/span>><\/span><<\/span>td<\/span>><\/span>1<\/span><<\/span>\/<\/span>td<\/span>><\/span><<\/span>td<\/span>><\/span>1<\/span><<\/span>\/<\/span>td<\/span>><\/span><<\/span>\/<\/span>tr<\/span>><\/span>\n        <<\/span>tr<\/span>><\/span><<\/span>td<\/span>><\/span>2<\/span><<\/span>\/<\/span>td<\/span>><\/span><<\/span>td<\/span>><\/span>4<\/span><<\/span>\/<\/span>td<\/span>><\/span><<\/span>\/<\/span>tr<\/span>><\/span>\n        ...\n    <\/span><<\/span>\/<\/span>tbody<\/span>><\/span>\n<<\/span>\/<\/span>table<\/span>><\/span>\n<\/pre>\n<\/div>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      That’s great if you’re just printing a <table><\/code> with no frills, but in a lot of real scenarios it’s not that simple. The document I’m recreating often has a letterhead on the top of each page, a footer on the bottom, and other custom elements that need to be explicitly repeated on each page. If you just print a single long table across pages, you don’t have much ability to place other elements above, below, and around it on intermediate pages.<\/p>\n\n\n\n
      So, I generate the pages using javascript, splitting the table into several smaller ones. The general approach here is this:<\/p>\n\n\n\n
        \n
      1. Treat the <article><\/code> elements as disposable and be ready to regenerate them at any time from objects in memory. All user input and configuration should take place in a separate header \/ options box, outside of the articles.<\/li>\n\n\n\n
      2. Write a function called new_page<\/code> that creates a new article element with the necessary repeating header\/footer\/etc.<\/li>\n\n\n\n
      3. Write a function called render_pages<\/code> that creates the articles from the base data, calling new_page<\/code> every time it fills up the previous one. I usually use offsetTop<\/code> to see when the content is getting far along the page, though you could definitely<\/strong> use smarter techniques to get the perfect fit on each page.<\/li>\n\n\n\n
      4. Call render_pages<\/code> whenever the base data changes.<\/li>\n<\/ol>\n\n\n\n
        \n
        function<\/span> delete_articles<\/span>(<\/span>)<\/span>\n{<\/span>\n    for<\/span> (<\/span>const<\/span> article<\/span> of<\/span> Array<\/span>.<\/span>from<\/span>(<\/span>document<\/span>.<\/span>getElementsByTagName<\/span>(<\/span>\"article\"<\/span>)<\/span>)<\/span>)<\/span>\n    {<\/span>\n        document<\/span>.<\/span>body<\/span>.<\/span>removeChild<\/span>(<\/span>article<\/span>)<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n\nfunction<\/span> new_page<\/span>(<\/span>)<\/span>\n{<\/span>\n    const<\/span> article<\/span> =<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>\"article\"<\/span>)<\/span>;<\/span>\n    article<\/span>.<\/span>innerHTML<\/span> =<\/span> `<\/span>\n    <header>...<\/header>\n    <table>...<\/table>\n    <footer>...<\/footer>\n    <\/span>`<\/span>;<\/span>\n    document<\/span>.<\/span>body<\/span>.<\/span>append<\/span>(<\/span>article<\/span>)<\/span>;<\/span>\n    return<\/span> article<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> render_pages<\/span>(<\/span>)<\/span>\n{<\/span>\n    delete_articles<\/span>(<\/span>)<\/span>;<\/span>\n\n    let<\/span> page<\/span> =<\/span> new_page<\/span>(<\/span>)<\/span>;<\/span>\n    let<\/span> tbody<\/span> =<\/span> page<\/span>.<\/span>query<\/span>(<\/span>\"table tbody\"<\/span>)<\/span>;<\/span>\n    for<\/span> (<\/span>const<\/span> line_item<\/span> of<\/span> line_items<\/span>)<\/span>\n    {<\/span>\n        \/\/ I usually pick this threshold by experimentation but you can probably<\/span>\n        \/\/ do something more rigorously correct.<\/span>\n        if<\/span> (<\/span>tbody<\/span>.<\/span>offsetTop<\/span> +<\/span> tbody<\/span>.<\/span>offsetParent<\/span>.<\/span>offsetTop<\/span> ><\/span> 900<\/span>)<\/span>\n        {<\/span>\n            page<\/span> =<\/span> new_page<\/span>(<\/span>)<\/span>;<\/span>\n            tbody<\/span> =<\/span> page<\/span>.<\/span>query<\/span>(<\/span>\"table tbody\"<\/span>)<\/span>;<\/span>\n        }<\/span>\n        const<\/span> tr<\/span> =<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>\"tr\"<\/span>)<\/span>;<\/span>\n        tbody<\/span>.<\/span>append<\/span>(<\/span>tr<\/span>)<\/span>;<\/span>\n        \/\/ ...<\/span>\n    }<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
        It is usually good to include a “page X of Y” counter on your pages. Since the number of pages is not known until all pages are generated, I can’t do this during the for loop. I call a function like this at the end:<\/p>\n\n\n\n
        \n
        function<\/span> renumber_pages<\/span>(<\/span>)<\/span>\n{<\/span>\n    let<\/span> pagenumber<\/span> =<\/span> 1<\/span>;<\/span>\n    const<\/span> pages<\/span> =<\/span> document<\/span>.<\/span>getElementsByTagName<\/span>(<\/span>\"article\"<\/span>)<\/span>;<\/span>\n    for<\/span> (<\/span>const<\/span> page<\/span> of<\/span> pages<\/span>)<\/span>\n    {<\/span>\n        page<\/span>.<\/span>querySelector<\/span>(<\/span>\".pagenumber\"<\/span>)<\/span>.<\/span>innerText<\/span> =<\/span> pagenumber<\/span>;<\/span>\n        page<\/span>.<\/span>querySelector<\/span>(<\/span>\".totalpages\"<\/span>)<\/span>.<\/span>innerText<\/span> =<\/span> pages<\/span>.<\/span>length<\/span>;<\/span>\n        pagenumber<\/span> +=<\/span> 1<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
        Portrait \/ Landscape mode<\/h2>\n\n\n\n
        I’ve shown that the @page rule helps inform the browser’s default print settings, but the user can override it if they want to. If you set @page to portrait mode and the user overrides it to landscape mode, your layout and pagination might look wrong, especially if you are hardcoding any page thresholds.<\/p>\n\n\n\n
        You can accommodate them by creating separate <style><\/code> elements for portrait and landscape, and using javascript to switch between them. There might be a better way to do this, but at-rules like @page behave differently than normal CSS properties so I’m not sure. You should also save some variable that can help your render_pages<\/code> function do the right thing.<\/p>\n\n\n\n
        You could also stop hardcoding thresholds, but then I’d have to follow my own advice.<\/p>\n\n\n\n
        \n
        <<\/span>select<\/span> onchange<\/span>=<\/span>\"return page_orientation_onchange(event);\"<\/span>><\/span>\n    <<\/span>option<\/span> selected<\/span>><\/span>Portrait<\/span><<\/span>\/<\/span>option<\/span>><\/span>\n    <<\/span>option<\/span>><\/span>Landscape<\/span><<\/span>\/<\/span>option<\/span>><\/span>\n<<\/span>\/<\/span>select<\/span>><\/span>\n<\/pre>\n<\/div>\n\n\n\n
        \n
        <<\/span>style<\/span> id<\/span>=<\/span>\"style_portrait\"<\/span> media<\/span>=<\/span>\"all\"<\/span>><\/span>\n@<\/span>page<\/span>\n{<\/span>\n    size<\/span>:<\/span> Letter<\/span> portrait<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\narticle<\/span>\n{<\/span>\n    width<\/span>:<\/span> 8.5<\/span>in<\/span>;<\/span>\n    height<\/span>:<\/span> 11<\/span>in<\/span>;<\/span>\n}<\/span>\n<<\/span>\/<\/span>style<\/span>><\/span>\n\n<<\/span>style<\/span> id<\/span>=<\/span>\"style_landscape\"<\/span> media<\/span>=<\/span>\"not all\"<\/span>><\/span>\n@<\/span>page<\/span>\n{<\/span>\n    size<\/span>:<\/span> Letter<\/span> landscape<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n}<\/span>\narticle<\/span>\n{<\/span>\n    width<\/span>:<\/span> 11<\/span>in<\/span>;<\/span>\n    height<\/span>:<\/span> 8.5<\/span>in<\/span>;<\/span>\n}<\/span>\n<<\/span>\/<\/span>style<\/span>><\/span>\n<\/pre>\n<\/div>\n\n\n\n
        \n
        let<\/span> print_orientation<\/span> =<\/span> \"portrait\"<\/span>;<\/span>\n\nfunction<\/span> page_orientation_onchange<\/span>(<\/span>event<\/span>)<\/span>\n{<\/span>\n    print_orientation<\/span> =<\/span> event<\/span>.<\/span>target<\/span>.<\/span>value<\/span>.<\/span>toLocaleLowerCase<\/span>(<\/span>)<\/span>;<\/span>\n    if<\/span> (<\/span>print_orientation<\/span> ==<\/span> \"portrait\"<\/span>)<\/span>\n    {<\/span>\n        document<\/span>.<\/span>getElementById<\/span>(<\/span>\"style_portrait\"<\/span>)<\/span>.<\/span>setAttribute<\/span>(<\/span>\"media\"<\/span>,<\/span> \"all\"<\/span>)<\/span>;<\/span>\n        document<\/span>.<\/span>getElementById<\/span>(<\/span>\"style_landscape\"<\/span>)<\/span>.<\/span>setAttribute<\/span>(<\/span>\"media\"<\/span>,<\/span> \"not all\"<\/span>)<\/span>;<\/span>\n    }<\/span>\n    if<\/span> (<\/span>print_orientation<\/span> ==<\/span> \"landscape\"<\/span>)<\/span>\n    {<\/span>\n        document<\/span>.<\/span>getElementById<\/span>(<\/span>\"style_landscape\"<\/span>)<\/span>.<\/span>setAttribute<\/span>(<\/span>\"media\"<\/span>,<\/span> \"all\"<\/span>)<\/span>;<\/span>\n        document<\/span>.<\/span>getElementById<\/span>(<\/span>\"style_portrait\"<\/span>)<\/span>.<\/span>setAttribute<\/span>(<\/span>\"media\"<\/span>,<\/span> \"not all\"<\/span>)<\/span>;<\/span>\n    }<\/span>\n    render_printpages<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> render_printpages<\/span>(<\/span>)<\/span>\n{<\/span>\n    if<\/span> (<\/span>print_orientation<\/span> ==<\/span> \"portrait\"<\/span>)<\/span>\n    {<\/span>\n        \/\/ ...<\/span>\n    }<\/span>\n    else<\/span>\n    {<\/span>\n        \/\/ ...<\/span>\n    }<\/span>\n}<\/span>\n<\/pre>\n<\/div>\n\n\n\n
        Data source<\/h2>\n\n\n\n
        There are a couple of ways to get your data onto the page. Sometimes, I pack all of the data into the URL parameters, so the javascript just does const url_params = new URLSearchParams(window.location.search);<\/code> and then a bunch of url_params.get("title")<\/code>. This has some advantages:<\/p>\n\n\n\n