W3C home > Mailing lists > Public > www-style@w3.org > November 1999

Re: The canvas

From: David Perrell <davidp@earthlink.net>
Date: Thu, 18 Nov 1999 21:42:36 -0800
To: www-style <www-style@w3.org>
Message-id: <01d301bf3250$e3039ae0$15a8a8c0@DPER>
Tantek Celik wrote:

> David Perrell wrote:
> > The logic of this statement eludes me. How is it that
partial
> > background-images at top left are ugly and and partial
> > background-images at bottom right are not?
>
> Um, common asthetic sense?  I believe there have been
studies about how
> readers tend to look at a layout (whether textual or
graphical) starting at
> the top left and make their way towards the bottom right.

A repeated background is typically used as a texture, and the
less obvious its tile boundaries the better.

> Certainly people
> do that with user interfaces.  Oh wait, I have a reference:

Not necessary. There's a big difference between UI elements
and a background texture. BODY is an element, not BODY's
background-image.

> Then in your HTML documents use
>  HTML { margin:0;padding;0;border:none }
>  BODY { margin:0;padding;0;border:none }
>  DIV.body { /* whatever you would have styled for the "body"
*/ }
>
> And then always use a synthetic BODY constructed from a DIV.

With margins, DIV.body's background would not bleed onto the
canvas.

> Use two DIVs.  DIV.canvas and DIV.body.  Assuming you want
10,15,20px
> margins on your "body":
>
> DIV.canvas {
>   margin:0;padding:0;border:none;
>   background: url(bg.png) 10px 15px
> }
>
> DIV.body {
>   margin:10px 15px 20px; background: transparent;
> }

Yes, that would work for pixel-sized margins. But if history
is any guide, display quality will not remain static, and a
pixel from your display might cover 4 on mine. I prefer to use
relative measurements for margins. Unless I can
correspondingly resize the background image then I don't see
how your suggestions can help.

> > A second scenario: As above, but I want to put a DIV in
BODY
> > that has a de-saturated, hue-altered version of the
background
> > image, so that the appearance is of a tinted translucent
panel
> > over the background. The backgound-images in BODY and DIV
must
> > align perfectly. If the background-image does not align wi
th
> > BODY's padding, how could I get this effect?
>
> See above example for how to do embedded DIV alignments.

Again, no help. I want the background image to 'bleed' onto
the canvas, but I want it aligned relative to the element's
padding boundary.

> > A third scenario: As above, but I want the image pattern
> > centered in the content + padding area. Again, unless
> > alignment is relative to padding, how can I get this
effect?
>
> Again, just have 0 margin, border, padding on BODY and HTML.
Then do what
> you want with DIVs.

Again, no help if I want the tiled images to bleed onto the
canvas.

> No limitations - just use the relatively quirk-free DIV tag
instead of the
> quirky-tradition-laden HTML and BODY.

Sorry, but I don't see that DIV will do what I want, given the
background treatment you suggest.

> Should we create an implementation that breaks thousands,
perhaps millions
> of pages out on the web right now just for the sake of blind
literal
> interpretation when it does not provide any additional
capabilities?  I
> don't think so.

I'm trying to recall pages with backgrounds that would be
broken by an altered reference point. I can't think of any. My
impression is that most repeating backgrounds are not
dependent on any reference point. Any specification of
backgrounds with CSS would hopefully have been by authors
aware of the spec and understanding of the fact that browser
builders have had a somewhat difficult time implementing it
correctly.

David Perrell
Received on Friday, 19 November 1999 00:47:57 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:01 GMT