W3C home > Mailing lists > Public > www-style@w3.org > June 2013

Re: [css-compositing] CSS overprinting

From: Shawn Allen <shawn@stamen.com>
Date: Wed, 19 Jun 2013 18:03:45 -0700
Cc: Lea Verou <lea@w3.org>
Message-Id: <1AF8CF00-A7ED-4D10-AC81-F34E4780641F@stamen.com>
To: www-style list <www-style@w3.org>
I'll chime in on the [css-compositing] track to note that overprinting in RGB is basically the "subtract" blend mode that I suggested incorporating in the Compositing and Blending draft last year:


Since then CSS Shaders have made significant strides, so whether these less popular blend modes are eventually included in the spec may be a moot point, but hear me out:

Subtractive blending may not be good enough for approximating what a proper CMYK print of a web page would look like, but it would give CMYK overprint-like effects to designers who already know how to use (and abuse) them in print. In fact, it would be even better because you can actually get pure black with subtractive RGB, rather than the muddy brown that overprinting simulations produce.

At the very least, having subtractive blending would make it much easier to make an SVG tutorial describing why RGB and CMYK behave so differently. ;)

Shawn Allen

On Jun 18, 2013, at 2:39 PM, Lea Verou <lea@w3.org> wrote:
> (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#leahttp://lea.verou.me ✿ @leaverou
Received on Thursday, 20 June 2013 01:04:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:31 UTC