Re: RFC: ability to assign images to corners

Robert Koberg writes:
> Hi,
> ----- Original Message -----
> From: "Bert Bos" <bert@w3.org>
> > Vadim Plessky writes:
> > > On Wednesday 20 February 2002 20:14, Robert Koberg wrote:
> > > |   I would like to have a box on the page that uses 4 uniques corners.
> I
> > > | would also like the borders to be assignd unique images that can tile
> so it
> > > | can be any height or width.
> > > |
> > > |   *-----*
> > > |   |       |
> > > |   |       |
> > > |   *-----*
> > > |
> > > |   best,
> > > |   -Rob
> > >
> > > I second back this proposal.
> > > Besides, you should be able to change those borders (corners)
> dynamically,
> > > with mouse :hover or for :focus / :active state
> > > Traditional Windowing Environment is dieing, web becomes more and more
> > > important. We should implement in CSS (Visual Rendering/Behavior) best
> > > features of legacy windowing environments, like MS WIndows, X-Windowing
> > > System or MacOS.
> >
> > The CSS WG also likes it and in fact decided a few months back to try
> > to write a draft[1] about it. However, from *liking* it to actually
> > coming up with a consistent and implementable specification is quite a
> > long way. Corner pieces are relatively OK, but the edges may contain a
> > fractional number of tiles, what do you do then? Scale the tile? Scale
> > the element's content? Crop the tile? All of those?
> 
> I don't know how these things are handled internally but why can't have the
> same behavior as tiling backgrounds in TDs (crop)? Or perhaps there is a
> limitaion placed (don't really like this idea, but it still works for my
> cases), that is: if tiling a width border then you must have an image that
> is one pixel in width; if tiling a height it has to be 1 pixel in height. No
> fractions this way.

At the last meeting the CSS WG had, we looked at some books in Art
Deco style. You may have seen these very elaborate floral and other
patterns. They often consist of a flower or a leaf that is repeated
and the repeated pieces are designed such that they connect nicely
together.

A 1-pixel image would clearly not be enough for those.

Also, we saw that many borders actually have 5 parts: the corners, a
center piece and two tiled parts (often the two tiles are each other's
mirror image):

    @@////////////////(*)\\\\\\\\\\\\\\\\@@
    //                                   \\
    //                                   \\
    //                                   \\
    //                                   \\
    ~~                                   ~~
    \\                                   // 
    \\                                   // 
    \\                                   // 
    \\                                   // 
    @@\\\\\\\\\\\\\\\\(*)////////////////@@

Some edges consisted of a single image that was stretched as needed:

     - - -- -- ---===###===--- -- -- - -  
   :                                     :
   :                                     :
     - - -- -- ---===###===--- -- -- - -  

We also looked at some of the built-in border styles of (Japanese)
cell phones. They have wavy lines and other patterns in two or three
colors.

Color brings up another interesting complication: if the border is
polychrome, it is usually OK if it comes with it own colors, as a PNG
image, for example. But when the border is monochrome, you might want
the same pattern to be used with different foreground and background
colors, to match the element's text.

Cropping is a problem, too, because then the tile connects correctly
to one corner piece, but not to the other corner.

We also have to consider borders in tables, which can use the same
styles, but have corners that connect to 1, 2, 3, or 4 edges.

Note that we already prepared somewhat for these borders, by adding a
property to the Background module to keep the background away from the
border: 'background-clip'
http://www.w3.org/TR/2002/WD-css3-background-20020219/#properties5

> 
> > And how do you
> > keep the CSS rules simple to write? There are already quite a number
> > of border properties, we'd like to avoid that we get two dozen more...
> 
> 
> div.coolBox {
> 
> top-right-corner: top_rt_corner.gif;
> bottom-right-corner: btm_rt_corner.gif;
> bottom-left-corner: btm_lft_corner.gif;
> top-left-corner: top_lft_corner.gif;
> 
> top-border-tile: top_brdr.gif;
> right-border-tile: rt_brdr.gif;
> bottom-border-tile: btm_brdr.gif;
> left-border-tile: lft_brdr.gif;
> 
> }
> 
> >
> > Of course, the best way you can help is to send concrete proposals.
> 
> why not discuss it with us on this list?

Absolutely, please go ahead. The working groups has no better
properties to propose :-) So far we only decided that we are going to
write a draft, someday.

> 
> >
> > [1] http://www.w3.org/Style/CSS/current-work#borders
> 
> doesn't mention corners other than rounded and I assume that is not image
> based.

It mentions tiled images. It doesn't explicitly mention corners, but
that was certainly implied.


Bert
-- 
  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 Thursday, 21 February 2002 14:24:25 UTC