Proposal: width-step/height-step for image tiling

It has been noted in discussions about extended border-image properties
that it would be useful to ensure that images tile a whole number of
times. I believe the same is true of background images. Ensuring that
the images around the edges of an element are all in a known position
would greatly increase the possibilities for CSS liquid-layout: images
can be made to meet seamlessly without having to fix the size of certain
elements.

My preferred way to allow this would be:

width-step:
  value: <length>
  initial: 0
  inherit: no

Specifies that the width of an element must be a multiple of the length
specified. The length calculated from the width properties is rounded
down to the nearest multiple, unless that would result in a zero
width/height.

A value of 0, the default, means any width is acceptable (as current
behaviour). Negative lengths are not allowed.

Issue: when a box has padding and border, one may want the width to
be a multiple-plus-a-bit to account for the padding/border being
outside the content width. Eg. if a border image 50px wide should tile
a whole number of times and the border-width plus padding-width is
only 20px, one would need to specify a width of '(50px*N)-40px'.
My preferred way of doing this would be to use box-sizing as proposed
in the CSS3 Box Model WD:

  border-top-image: url(a50pxWideImage.gif);
  border-width: 10px;
  padding: 10px;
  width: 50%;
  width-step: 50px;
  box-sizing: border-box;

Here the border-box must be a multiple of 50px, allowing the top
border's tiles to align in the top-left and top-right corners.
It would be useful to add a 'padding-box' value to the 'box-sizing'
property, to account for borders-with-corners and background images.
In any case I much prefer the 'box-sizing' property to the
alternative 'box-width' and 'box-height' properties in the proposal.
It seems to me that 'box-sizing' would cause less confusion with
eg. 'min-width'.

Other possibilities include adding a 'width-step-offset' property,
or taking the value of 'min-width', if specified, as an offset.

height-step:
  (same as width-step).

Comments?

-- 
Andrew Clover
mailto:and@doxdesk.com
http://and.doxdesk.com/

Received on Tuesday, 19 March 2002 06:01:50 UTC