Twenty Twelve Print Stylesheet Needs More Contrast

[miqrogroove]

I just tried printing a page in Twenty Twelve for the first time and saw some deal breakers in there:

• The site title is not black and not even close to black.
• The content text appears to be the same shade of gray and is bordering on difficult to read.
• The site subtitle is not legible because it is almost white on white.

According to http://core.trac.wordpress.org/browser/trunk/wp-content/themes/twentytwelve/style.css#L1616 there are actually no colors specified in the print stylesheet. That means it's using #515151 for the site title and #444 for content.

Fixes color in print stylesheet.

Attached patch is working for colors but breaks the H1 font in Chrome.

Also fixes title font in Chrome.

Can you share your exact steps to repeat? And browser / OS varieties you tested in.

I tried in FF latest stable on OS X Lion, and the result was as expected (dark text, good contrast). Will upload a sample PDF.

Sample PDF printed from OS X Lion Firefox "Aurora" stable

Chrome WinXP.

miqro-22797.2.diff​ tested and working on my end.

lancewillett, are you able to try my patch and let us know if it works well on OS X?

Replying to miqrogroove:

lancewillett, are you able to try my patch and let us know if it works well on OS X?

Testing now. I'm all for the idea of setting the base color, the font-family is less important for print.

miqrogroove — I can't repeat the unreadable text with Windows XP and, could you attach a screenshot of what you're seeing? Can you test it out with ​http://sanbeiji.com/tests/textcolor.php ?

Looks like color: black; is the best choice.

Replying to lancewillett:

miqrogroove — I can't repeat the unreadable text with Windows XP and, could you attach a screenshot of what you're seeing?

fwiw, attached

Suggested change to color only

Thanks, a screenshot is worth 1,000 words, you know. :)

Could you take another test + screenshot with 22797.3.diff applied, please?

I made screen shots of both patches so you can see the difference. Only setting the body color misses the other problems I mentioned.

As per the CSS Style Guide ( ​http://make.wordpress.org/core/handbook/coding-standards/css/#properties ) let's make it do color: #000; instead of color: black; -- it's one character shorter, and internally consistent.

Also, I don't *think* it needs a !important on the color -- unless you mean to prevent child themes from accidentally overriding it.

So we all agree on miqro-22797.2.diff ?

Actually, I got miqro-22797.diff to work after a cache dump. +1 that patch.

Alternative version, in case you guys insist on full coverage ink.

Replying to georgestephanis:

As per the CSS Style Guide ( ​http://make.wordpress.org/core/handbook/coding-standards/css/#properties ) let's make it do color: #000; instead of color: black; -- it's one character shorter, and internally consistent.

Based on research here: ​http://www.sanbeiji.com/archives/953 — black prints faster, but I'm not tied to it.

Agreed on not needing the !important.

miqro-22797.3.diff looks good, agreed on extra coverage to ensure good contrast.

I think #222 or even #111 is more representative of the header color from screen, but any of them will work for me.

Replying to lancewillett:

Based on research here: ​http://www.sanbeiji.com/archives/953 — black prints faster, but I'm not tied to it.

Scratch that, no argument there about black as a keyword, nor speed in printing, there. The link was in the ​HTML5 Boilerplate source which I took to mean "black keyword is better". We're OK with hex values. :)

In 23116:

Twenty Twelve: set color values to black to ensure full text color contrast in print styles. Props miqrogroove, fixes #22797.

Thank you Lance :) Good work all.