I want to preserve the font coloring I see on screen (for instance in syntax-colored source code) when I print a web page or save it as a PDF file. However, sometimes font colors are removed, no matter what browser I use. Color images are printed in color, so I'm not printing in grayscale mode.

How can I solve this?

share|improve this question
   
Mixed feelings about this question and answer pair. The reality is there will never be a one-trick solution to something like this. You mention “Bootstrap” which is fine, but must people who can’t code are already baffled. Will let this comment stand, but as someone who does web development for a living and knows how to traverse CSS and such… Honestly, I see no easy solution.– JakeGould18 hours ago
   
@JakeGould: When you print source code, it's crucial to keep the formatting, so I think it's a good question. I agree that my answer requires a power user, yet I can think of no simpler solution. Granted, you could make a browser plugin that kills the relevant CSS; none is in existence AFAIK.– Gruber18 hours ago
1 
Possible duplicate of How do I print with the screen stylesheet?– JakeGould15 hours ago
   
There is already a question that is about 6 years old that touches on the topic and has a variety of different solutions. So I would encourage you to place your answer there since this is clearly thoughtful, though out and of value to anyone looking to deal with print CSS issues as you describe.– JakeGould15 hours ago

Sometimes web sites use CSS to specify that different styles should be used on-screen and when printing. This is often good, but it can also be confusing and problematic. Inspect the source code of the page and look for something like:

@media print {*:after {color: #000 !important;background: transparent !important;}

One reason this problem is common is that web sites using the popular Bootstrap framework use the ubiquitous bootstrap.min.css file, which contains the CSS style above.

The key thing to look for is @media print. Web sites often have complex structures and it may help to save the page locally and inspect it with a recursive text-searching tool.

When you think you've found the spot in the CSS code, you can modify the page directly in your browser by using its developer features. (In Chrome you press Ctrl+ Shift + I to launch them.)

Search for the CSS code and just remove or invalidate the rows causing the problem. Verify that the operation worked by using "Print preview".

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.