Repository

sparksuite/simple-html-invoice-template

A modern, clean, and very simple responsive HTML invoice template
1455 1145 41 9

Add printer-friendly style

Add a custom style that is more friendly to printers.

5 Comments

  1. Suggested, tested code:

    @media print {
      .invoice-box {
        max-width: unset;
        box-shadow: none;
        border: 0px;
      }
    }
    
  2. Is there a specific issue with the appearance of the invoice when printing? Printing the demo page from Chrome on macOS looks fine:

    Screen Shot 2021-12-30 at 4 01 25 PM

  3. It does look fine, but with the top text removed in a production environment, the border + box shadow only doesn't really looks invoice like in my opinion. It's fine for web view, but the code above gives it a more natural invoice layout when printed.

    This is a preference thing ofcourse, but it was just a suggestion.

  4. Okay, I see what you mean. How the invoice should be styled when printing depends pretty heavily on where/how the invoice is displayed. If the invoice is the primary or only element on the page, then the @print styling you proposed definitely makes sense. But, if there are other elements on the page, it might make more sense to leave some form of a border and/or box-shadow to delineate between the invoice and other elements on the page.

    For the sake of simplicity, I think it's best to not include any default @print styling in the HTML file. That way, the invoice appears the same when printing as it does when viewing it on a screen. Then, it'd be up to the engineers using this invoice template to apply the appropriate @print styles based on their unique context.

    However, it might be worth adding a "Print styling" section above the "RTL" section in the README. It could include your suggested code above, and would help prevent engineers from accidentally overlooking print styling. Would you be interested in submitting a PR for that?