<-     -c-     ->    



Full-Bleed Backgrounds And Margins




I've been looking into how e-readers handle backgrounds set on the HTML or BODY elements of an xhtml file. After trying my test files in several readers I can only come to two conclusions.


When I first started investigating how e-readers implement page margins and backgrounds I was under the impression that their overrides caused them to, essentially, set the HTML element's background-clip property to 'content-box'.

I was mistaken.


My guess now is that their implementation is based on an interpretation of CSS 2.1's section on paged media where the content is clipped by the page's margins. E-reader vendors seem to take this as an indication that backgrounds in on-screen paginated contexts should be clipped to the page's margins as well.

That is, I'd argue, a misinterpretation. CSS 2.1's paged media section is discussing printed media, where almost no printer shipped to consumers can print full-bleed backgrounds. The spec as defined is merely putting order to a real-world limitation that cannot be removed.

This limitation does not apply to on-screen paginated contexts and so in my view the only correct thing would be to render the backgrounds set on the HTML element edge-to-edge, i.e. full-bleed. Maintaining consistency with default screen rendering behavior should trump the print media edge case.

But using CSS 2.1's section on page margins seems sensible.

Allowing authors to set the page's margins using @page and a full-bleed background using the html selector would solve a lot of design problems e-book developers are facing.

And it would have the added benefit of being entirely compliant with the CSS 2.1 standard.