W3C home > Mailing lists > Public > www-style@w3.org > February 2002

Re: RFC: ability to assign images to corners

From: Bert Bos <bert@w3.org>
Date: Fri, 22 Feb 2002 16:32:25 +0100
Message-ID: <15478.25737.306516.881006@jfouffa.inria.fr>
To: www-style@w3.org
Dylan Schiemann writes:

> I read this and the first thing that enters into my
> mind is the question: is this css or should this be in
> osme other spec like svg?  If the border was an svg
> object, it seems that might simplify the css syntax
> somewhat.  
> I'm sure the WG has thoughts on this, and would like
> to include as much into css as possible without making
> it too complex.  I'm having trouble deciding where the
> crossover is between style and data

Indeed, that is the interesting question.

The thought that, somehow, it should be possible to use SVG for this,
has certainly crossed our minds. It could be as "simple" as

    DIV { border: url(myborders.svg) }

which would hand over the border area, the SVG file and all current
style rules to an SVG plug-in. Of course, some fallback is needed for
when the browser has no SVG implementation. (And we probably don't
want to limit this to just SVG either: if the referenced image is PNG
or PDF or something else, it should work as well, probably simply by
scaling to the element's width and height.)

I'm pretty sure we can make this well-defined. Some work is needed on
the interface between the CSS and SVG renderers and some careful
thought about security & privacy when styles are inherited into the
plug-in, but that has to be done anyway, since many people expect to
see SVG inside HTML inside MathML etc. in the brave new world of

But the tiling problem isn't fully solved by SVG either. SVG can
repeat a pattern and it can scale a pattern, but I cannot ask it to
scale the pattern by a small amount in such a way that it fits an
integer number of times in the given space.

Or, conversely, if I want to scale the element, rather then the border
pattern, I cannot currently say in CSS that the height of a box should
be the smallest size greater or equal to H that is a multiple of D.

> For overlap between svg and css, it would be nice to
> try and use similar conventions.  For example, svg has
> an x and y radius for corners of a rectangle, though
> this assumes all four corners to be symmetrical. 
> mozilla implements -moz-border-radius with radii for
> each of the four corners, which thus assumes always
> circular, but not necessarily symmetrical.  

The 'border-radius' property in the latest Box model draft[1] has the
cross-product of those: individual x and y radius for each corner.

[1] http://www.w3.org/TR/css3-box/#the-border
    (26 July 2001: yes, I know it is high time for an update :-( )

  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/INRIA
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Friday, 22 February 2002 10:32:27 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:00 UTC