CSS: Extended tiling. Proposal

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 UTC