Re: [css-compositing] CSS overprinting

On Wed, Jun 19, 2013 at 6:03 PM, Shawn Allen <shawn@stamen.com> wrote:

> 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:
>
>         http://lists.w3.org/Archives/Public/www-style/2012Aug/0653.html
>
> 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.
>

The muddy brown is intended when you do OPP. It's supposed to look like
black ink on paper


>
> 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.
> ;)


You could just use a 'screen' blend with red, green and blue circles or a
'multiply' blend with cyan, magenta and yellow circles to get that effect.


>
>
> 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#lea ✿ http://lea.verou.me ✿ @leaverou
> >
> >
> >
> >
> >
> >
>
>
>