CSS overprinting

(Subject has no tag cause I’m not sure if this would be [css-gcpm], [css-color] or [compositing])

If we are intending people to use CSS for serious printing, there should be a feature that controls overprint. I’ve searched a lot and could not find anything, although we have lots of other print-friendly features.

Overprinting in CMYK is the process of printing colors on top of each other, sometimes for certain effects and often for better print quality. Let me explain: Assume you have black text [1] on a div with a light orange [2] background. The way RIPs work, you’d print 10% yellow and 20% magenta on the box with "holes" (white) where the letters are and the letters for black (K). Unless you have perfect alignment for the four inks, a little white will be visible (I'm sure you've all seen this effect in carelessly done graphic design or when overprinting is not an option, e.g. the text color is not black). This is why graphic designers use overprinting. If the black text is overprinted, the the 10% yellow and 20% magenta would be printed for the entire box, and the 100% black text would be printed on top of that. It’s basically equivalent to setting the text color to be device-cmyk(0,.1,.2,1), i.e. each of the C,M,Y,K components goes through max(a, b). Then having perfect alignment doesn’t matter any more, it could be off by a bit and it will still look good.

Hope the above makes sense. If not, I could illustrate it with a diagram.

I’m not sure how overprint could be controlled, since it could be for the entire element, or just the text etc. It looks more like a blending mode. However, if we add a blending mode for it, what will it do for RGB? I'm not sure if overprinting is even a thing in RGB.

[1]: device-cmyk(0,0,0,1)
[2]: device-cmyk(0,.1,.2,0)

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou