Member Avatar for Ritesh_4

Hello
Am using the window.print function on a page, but it does not print the background color which I've set in my stylesheet for table cells.
Any way to fix this issue?

  • 4 Contributors
  • 5 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

are all circling the main issue: window.print() only opens the print UI; whether table cell backgrounds actually print is a browser/user setting. Most browsers omit background colors/images by default to save ink and improve legibility, and you cannot reliably force this on with JS or CSS. You can request it with CSS using print-color-adjust: exact (and -webkit-print-color-adjust: exact), but user options take priority. (developer.mozilla.org)

Practical paths that work today:

  • Tell users how to enable backgrounds when they need them: Chrome/Edge > Print > More settings > check Background graphics. Safari on macOS > File > Print > Show Details > from the options menu choose Safari, then check Print backgrounds. Firefox > Print > Options > check Print Background Colors and Print Background Images. (support.microsoft.com)
  • Add a print stylesheet so the page stays readable even if backgrounds are off. For tables, prefer borders or a left color bar over full-cell fills.
/* Make tables legible even if backgrounds are stripped */
@media print {
  /* Ask browsers not to drop colors; may be ignored */
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  table { border-collapse: collapse; }
  th, td { border: 1px solid #999 !important; padding: 4pt; }

  /* Substitute for shaded cells */
  td.is-highlight { border-left: 12pt solid #f3d17a !important; }
}

If you manage a fleet (kiosks, intranet), admins can set the default or even restrict behavior: Chrome and Edge expose background-graphics print policies so users see the right default without hunting through dialogs. ()

Bottom line: is right that behavior differs by browser, and is right that it is ultimately the user’s print setting. Build for graceful degradation, then document how to enable backgrounds when color truly matters. (developer.mozilla.org)

Recommended Answers

All 5 Replies

Member Avatar for Benjamin_11

Ive had this happen differently in different browsers. I do belive the webkit browsers (it might be just then opposite btw) will not print the bgcolor via the dom.

Edited by Benjamin_11
Member Avatar for almostbob

Is set in the printer dialogue by the user

Member Avatar for Ritesh_4

Somewhat similar to JorgeM's link above, I got it to print the colors after going to File -> Page Setup in Firefox's options.
However, if an end user does not know about this, is there another way to make the "css" get printed without having to go customize the settings in the browser, as different browsers will have different settings?

Member Avatar for almostbob

Websites attempting to override user settings is generally frowned upon, even if harmless it is still considered potentially malicious

it can be done in css with a @media print call, in which there is a div, full width full height containing the background image, not as background, just as an image, with a z-index=(minus something huge), visible as a background behind printed info

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.