W3C home > Mailing lists > Public > www-html@w3.org > May 2004

CSS: Extended tiling. Proposal

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Tue, 4 May 2004 20:58:26 -0700
To: www-html@w3.org
Message-ID: <c79oot$i2b$1@sea.gmane.org>

CSS: Extended tiling. Proposal

To add additional attributes:

background-image-margin-top: size;
background-image-margin-bottom: size;
background-image-margin-left: size;
background-image-margin-right: size;

These margin values describe nine areas in the source image: four corners,
four sides and one middle section.
While being rendered onto box background, corners of the image will be
copied to the corners of the destination rectangle. Top, bottom, right and
left sides of the destination rectangle will be tiled by the corresponding
sections of the source image horizontally and vertically. The middle section
of the destination rectangle will be tiled by the source middle section.

Illustration:

Source image:
http://www.terrainformatica.com/htmlayout/images/tileex.png
will be rendered as
http://www.terrainformatica.com/htmlayout/images/tileexsample.jpg
using "extended" CSS:
  background-image-margin-top: 16px;
  background-image-margin-bottom: 13px;
  background-image-margin-left: 16px;
  background-image-margin-right: 13px;

More complex example (little bit ugly but nevertheless...):
http://www.terrainformatica.com/htmengine/screenshots/tablebackgrounds.png

Being implemented these four attributes will cover "rounded corners" cases
and many other including
all currently available by using background-repeat, background-attachment,
background-position attributes.

I've implemented this schema in my experimental HTML renderer.
Let me know if somebody wants to see this approach in action.

Andrew Fedoniouk.
http://terrainformatica.com
Received on Wednesday, 5 May 2004 00:01:43 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 27 March 2012 18:16:00 GMT