[css3-background] Distributing space for 'background-repeat: space'

The values 'round' and 'space' for the 'background-repeat' property 
provide two different ways to ensure that a tiled background image is 
tiled a whole number of times. 'Round' does it by shrinking the 
image, 'space' by inserting space between the tiles.

'Space' is meant for images that should not be scaled and are fairly 
small compared to the element. But, of course, the specification must 
also define what happens if the image is large. The question is how.

Let A be the width of the area and W>0 the width of the image. Then the 
number of times the image fits in the area is N = floor(A/W) and the 
amount of space we have to distribute is S = A - N*W. (There is a 
similar story for the height.)



The interesting cases to look at are N = 0 and N = 1, but let's first 
look at the more typical case where N > 1. There are a few options:

a) Fantasai and I decided (see ACTION-10[1]) that it looked best if the 
first and last images touched the edges. That way, the designer knows 
where those images are and can visually "attach" them to the border, or 
include transparent parts in the image to explicitly detach them from 
the border. In this option, there are N - 1 gaps between the tiles and 
each gap has a size of S/(N - 1). Clearly, this is undefined for N = 1.

b) Another reasonable choice is to put half as much space at the edges 
as between the tiles. Thus there is S/N space between the tiles, and 
half that at the edges. The advantage is that this looks better if 
adjacent elements have the same size and are tiled with the same image.

c) We can also put as much space at the edges as between the tiles. The 
space between the tiles is now S/(N + 1). This may look better if the 
image and the border are of similar visual strength.

d) We can drop the keyword 'space' completely. The slight downscaling 
introduced by 'round' doesn't have to look ugly, if the UA uses a 
reasonable algorithm.

Is option a indeed the best?



Assuming option a, what happens if N = 1, i.e., there is only one tile?

a1) The image is centered, i.e., either it touches both edges or it 
touches neither.

a2) The image is put in the top left corner.

a3) The image is placed according to 'background-position'.

a4) The image is placed in a corner that depends on 'direction' 
and 'block-progression':

          tb          rl             lr
    -----------------------------------------
    ltr   top left    top right      top left
    rtl   top right   bottom right   bottom left



And for all three of a, b and c, what happens if N = 0, i.e., the image 
is wider than the area?

1) Show no image.

2) Show one image. The next question then is: how is it aligned?

3) Reduce the image in size (keeping aspect ratio) until N = 1.

4) As 1, but let the designer choose 3 by means of a new 
keyword 'space-round', which acts like 'space' when the image fits and 
like 'round' when it doesn't.



[1] http://www.w3.org/Style/CSS/Tracker/actions/10



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Monday, 31 March 2008 18:38:24 UTC