Re: The canvas

>> Section 14.2 of CSS2 says both of the following [1]:
>> 
>> # Margins are always transparent so the background of the parent box
>> # always shines through.
>>
>> # The background of the box generated by the root element covers the
>> # entire canvas.
>>
>> Therefore, one of the following must be true:
>>
>>  * The margins of the root element are colored by the background of
>>    the root element
>>  * The root element cannot have margins.
>>  * The background of the box generated by the root element covers
>>    the entire canvas minus the margins of the root element.  (This
>>    doesn't make much sense to me since the canvas can be much bigger
>>    than the root element if the children of the root element overflow -
>>    for example, wide tables or preformatted text.)
>>  * Something else??
>
> The first one, however you can understand it in a non-contradicting
> way by looking at it like this: the root element `reverse inherits'
> its background up to the canvas, in a similar way as you have the BODY
> element reverse inheriting up to the HTML element, except that with
> the :root and canvas backgrounds you inherit the computed value not
> the specified value so that an image placed at the 'top left' of the
> :root box will indeed be at the top left of the root box, not the top
> left of the canvas (they could, with margins or positioning, be
> different).

In theory this sounds reasonable, but in practice* it causes problems with
tiled backgrounds on BODY which were intended to be aligned with the top
left of BODY, not the top left of :root or canvas.  So you have two
possibilities:

- have BODY "bleed" its tiling of its background-image into the :root and/or
canvas area - this will typically result in ugly partial background-images
being drawn along the top and left of the page.

- have :root and/or canvas draw their own tiled background.  while this
makes the top and left edges of the canvas look better from a
background-image perspective, along the edge of the BODY box, the tiling is
"interrupted" and "reset" to the top left of the BODY box, and again, you
have an ugly background effect.

Since both of these literal interpretations of the spec result in poor
rendering (of a lot of pages, since most pages set their background-image on
BODY, which then also has margins, into which these background-image would
be expected to tile/bleed), I propose the following:

- A particularly specified background should only be drawn once.
- If an element "reverse inherits" its background from one of its children,
then the element then "takes over" drawing of that background, draws that
background, and has its children *not* draw the background a second (or
third) time.

E.g. in an HTML document if you had

BODY { background-image:url(bg.gif); margin: 15px 10px }

The background image bg.gif would be tiled from the top left of the canvas,
and the BODY element would *not* draw another tiled background offset 10,15
from the :canvas.

This proposal has two significant advantages over the above "literal
interpretation":

1. Pages with background specified on BODY (or even :root when :root has
margins) will look better.
2. It is backward compatible with current browser behavior.

Tantek

*in practice - meaning if you actually implement this, it is immediately
obvious.

Received on Thursday, 11 November 1999 14:34:02 UTC