Question

Edit:

Any recommended hacks?

I’m currently considering generating an image on the backend, then open that in a new window, then printing off the image.

---

I’m printing parts of a page by hiding other elements via

$(...).hide();

and then calling print via

window.print();

But in all browsers I encounter some style inconsistency. Specifically, background-color disappears.

Regular webpage view:

Print preview:

The relevant html (jade) are as follows:

amount-due.span2
  dl
    dt Amount Due
    dd.align-right <%= RP.util.currency_to_symbol[invoice.currency.toLowerCase()] %>
      <% if (invoice.state !== "paid") { %>
      span <%= invoice.total_amount %>
      <% } else { %>
      span 0
      <% } %>

and

d.darken <%= RP.util.currency_to_symbol[invoice.currency.toLowerCase()] %><%= invoice.total_amount %>

The relevant CSS are as follows:

and

Answer 1

I’m not aware of any browser that doesn’t, for the sake of saving ink/toner, turn background colours and images off for printing.

Some provide a user preference to reenable it.

Design your stylesheet on the assumption that all your backgrounds will be white, and use some other means (such as bold text) to highlight particular bits of content.