W3C Workshop
on Wide Color Gamut
and High Dynamic Range
for the Web

Hello everyone.

My name is Mike Bremford, and I'm here to talk to you about the use of CSS Color 4 in print.

CSS is already widely used for laying out documents for print, and is used for everything from train tickets to books.

In virtually all cases, it does this by converting the layout to PDF first.

You can do this by selecting Print from your browser menu, and there are a number of dedicated CSS layout engines for print.

The majority of these implementations have been written from scratch.

So there are probably more CSS layout engines for print than for screen.

Color fidelity isn't so important for a train ticket, but it's critical for a magazine cover and even our financial services customers seem to think it matters for their reports.

The PDF format makes calibrated color possible, if not always easy.

So we're excited to see CSS Color 4 arrive.

The first time I saw these ideas presented was by Chris Lilley at a CSS in Print conference back in 2006, so that has been worth the wait.

Why listen to me?

I'm Technical Director at bfo.com.

We've been working with PDF for some 20 years and CSS for most of that.

We're currently developing a new CSS to PDF layout engine.

We're part of the CSS Working Group, and we've fully implemented CSS Color 4.

So this presentation is largely on how we did it and what problems we hit.

On the next slide, we'll start with CSS Color 3.

That defined the sRGB color space, and also HSL, which is nothing more than a way of describing a color in the same sRGB color space.

By contrast, PDF has no sRGB color space, so right away we have to make a choice.

We can choose the device-dependent RGB color space, which may or may not be sRGB.

Being device dependent, it's going to vary depending on how the PDF is displayed.

If we don't really care about the exact color it's probably close enough.

And it's the choice made by a lot of PDF software, like when you print from your browser.

Or I can embed an sRGB ICC profile in the PDF.

There are other ways to describe a calibrated color space in PDF, the CalRGB and CalGray spaces I've listed on the slide, but they're essentially a poor man's ICC profile and not fully capable of displaying sRGB.

So I'll lump these all in together.

On the next slide, we have CSS Color 4 which adds HWB.

Exactly with HSL, this is just another way of describing colors in the sRGB color space.

We've got ICC profiles, which obviously correspond to the same in PDF.

Several of these are predefined in CSS, for example, display-p3, but they're all still ICC profiles.

We have device CMYK, which is great 'cause we have exactly the same in PDF.

This is obviously device dependent 100% cyan will look different on different printers.

And we have Lab color.

Well, we have that in PDF, too.

And finally, in CSS, we have LCH, which, (just as HSL is to sRGB), is another way of describing colors in the Lab color space.

Finally, for completeness, there are two other types of color specs in PDF, which have no correspondence in CSS, DeviceN and Separation color spaces.

These map a custom set of components to an existing color space and are how we do spot colors in PDF.

They're specialized and useful but they're not part of CSS 4, so not up for discussion today.

On the next slide you can see that LCH really is just another way of describing a color in the Lab color space.

Lab uses a and b, which are Cartesian coordinates and LCH uses C and H, the radius and angle around the circle which are polar coordinates.

The L value remains the same, so it's trivial to convert between the two.

The same statement applies to HSL and sRGB, although the maths is a little different.

So if you have an HTML page using LCH color, and you want it in PDF, you can simply convert the LCH values to Lab.

On the next slide, you'll see there are problems with this.

If you have a gradient with LCH colors at either end, you might expect it to interpolate between those end points in LCH.

But as you can see on the left, if we convert to Lab and interpolate in Lab, we get wildly different results even though the end points are identical.

By the way the current published version of CSS specifies that all gradients interpolate in sRGB, but this is under discussion and I'm assuming this will change at some point.

On the right, you can see the same gradients presented against the Lab color space.

The straight line through the middle is our linear interpolation in Lab.

It passes through the center so we get sort of gray color.

The curved line is how we move through the Lab space to get the same gradient we'd expect in LCH, a semicircle with a C component, a radius of 70, and a hue moving from -135 to 45 degrees.

So given a gradient is simply a function between two colors, to simulate LCH in Lab, we just need to control that function.

This isn't possible in CSS, but PDF gives us plenty of options to do this: exponential functions, sampled functions, and even PostScript.

The approach we take is to start by assuming the function is linear, measuring the difference at the midpoint, and if the difference in color is too large, we subdivide the curve and repeat for both halves.

This is the standard De Casteljau algorithm, commonly used with Bézier curves.

The advantage of this approach is it works for any curve, not just LCH, so we can apply it universally.

So we can update our table now with the equivalents between CSS and PDF.

And you can see that, if it's possible in CSS, it's possible in PDF.

Of course, there are a good number of specification and implementation issues, which cause us problems.

PDF has restrictions on the types of ICC profile it can use.

An ICC profile is just a mapping between a universal color space, always XYZ or Lab, and whatever color space the profile is defining.

PDF limits us to gray, RGB, CMYK, and Lab, and Lab only works with an eight-bit lookup table.

These restrictions are odd, and the last one, in particular, is absurd, but they're been in the spec for 20 years, so they're baked into all sorts of printer firmware.

In practice, it's not a huge problem.

Anything not in this subset is pretty esoteric.

One example is FOGRA55, a seven-color process with cyan, magenta, yellow, black, orange, green and violet.

FOGRA released a beta ICC profile for this condition just five months ago.

Another one worth mentioning is an XYZ identity profile where you specify the components directly as X, Y and Z values.

This one is significant because CSS Color 4 lists X, Y and Z as a predefined ICC profile.

Well, we can't use it in PDF for this reason.

I'm not a color expert, but I'll state that for any visible XYZ colors they can be mapped exactly to a color in the Lab space, just like for LCH.

So that's exactly what we do for XYZ colors, just convert to Lab.

CSS Color 4 supports named color ICC profiles which are just a list of color names and values.

For example, the PANTONE range of colors.

These aren't supported by PDF while their named colors certainly are, with the DeviceN space I mentioned earlier, and it's trivial to convert a named ICC profile to one of these.

But finally the main problem we hit while implementing this was 2D gradients, i.e., parametric surfaces, or gradients that vary over two dimensions.

These are implemented in PDF as Coons Patch shading.

The concept isn't directly a part of CSS, but they're the only way we can render conic gradients, which, of course, are.

They're also used by the mesh gradient paint server proposed by Inkscape for SVG, a proposal we like very much and we've implemented.

The problem is that most PDF viewers interpolate the patch in the wrong color space.

The spec is clear this is wrong, so I'm going to call it an implementation issue but none of the PDF viewers we tested got it right.

I thought we'd found a way around it a few weeks back, but I was wrong.

Instead, the gradients I'd drawn had been automatically broken up into smaller steps.

So I couldn't really tell which color space the interpolation was happening in.

And that's ultimately the solution to this problem.

We must subdivide our patch into smaller parts so the interpolation occurs between colors that are already fairly similar.

For conic gradients, this means drawing the arc in smaller steps.

The slide shows an LCH conic gradient drawn with 45-degrees segments.

For generalized mesh gradients this is considerably harder, but it's still possible.

Next slide,

what difference will CSS Color 4 actually make for print?

Well somewhere between none and a lot, depending on your point of view.

Most documents intended for print use RGB or CMYK.

Spot colors are common and where calibrated colors are required, they're typically done with ICC profiles.

Lab is used, but it's less common.

That's reflected in the CSS print engines, all of which already support CMYK.

In fact, by happy coincidence, most even use the same syntax.

ICC colors are also fairly widely supported, although the syntax varies.

So while CSS Color 4 may not offer much new functionality, the very fact that it is a standard is significant.

Being able to preview CMYK content in your browser before printing will make CSS print workflows simpler.

And I'm sure we'll see the inevitable Stack Overflow posts describing how to specify ICC color in a webpage, which will encourage layout engines to adopt the syntax, probably alongside their existing one.

It all brings awareness that CSS can be used for print, and that's a good thing.

Finally, there's been a shift away from generic PDF to two subsets of PDF, PDF/A for long-term archiving of PDF documents and PDF/UA for accessible PDF.

This is the PDF equivalent of WCAG, both require all color to be calibrated.

Legislation has driven adoption internationally, and we also saw a large surge in interest in PDF/UA about two years ago after Domino's Pizza lost a court case in the US for not making their website accessible.

Suddenly everybody started caring about accessibility.

So if you're generating a PDF invoice, there's a very good chance you'll want it to use only calibrated color.

And if you were designing that invoice in CSS and HTML, specifying the colors using an ICC profile will ensure it meets the accessibility requirements when converted to PDF.

So that's my final slide.

The slides for this presentation are online, both HTML and PDF format.

If your browser support CMYK, Lab, LCH, and the other color spaces I've talked about, then the various diagrams will render in those colors.

If not, you'll see bitmaps.

The PDF version was created with our own BFO Publisher and that does support everything I've just talked about.

Hopefully, we'll have a public beta by the time this presentation goes out.

So the PDF version of the presentation demonstrates all of the techniques I've just described.

That's it.

Thanks for listening.