Re: Border-Images and 'round': CSS Backgrounds and Borders Module Level 3

On Sep 29, 2009, at 7:37 PM, fantasai wrote:

> Brad Kemper wrote:
>> On Sep 28, 2009, at 2:01 PM, "Tab Atkins Jr."  
>> <jackalmage@gmail.com> wrote:
>>> Two copies of the image will indeed fit perfectly in the box, but  
>>> you
>>> don't *have* two copies until the last step, *after* the 'source  
>>> copy'
>>> has already been scaled and positioned.  Thus you must position the
>>> first copy on the left edge so that when it tiles the second copy
>>> exactly fills the right half.  If you were to center it first, then
>>> the tiling wouldn't work correctly.
>> Sure it would. The alignment wouldn't change as you added more  
>> tiles. The would just push previous tiles to the left. Like when  
>> you add words to a centered paragraph. At least that's how I read it.
>
> @_@ Where does it say that you push the first tile to the left?

It doesn't say anything about the _first_ tile specifically. It says  
"Otherwise the images are centered horizontally". I took that to mean  
the tile images, as in all the tiles are centered for the respective  
area. Now that TJ explained it the other way, I understand the  
intention.

> The first tile is left-aligned for 'round' because if you center it  
> and
> then tile, an even number of star-shaped tiles will look like this:
>
>  \_ _/\_  _/\_  _/\_  _/
>   /\    /\    /\    /\
>  \| |/\|  |/\|  |/\|  |/
>
> Instead of like this
>
>   _/\_  _/\_  _/\_  _/\_
>  \    /\    /\    /\   /
>   |/\|  |/\|  |/\|  |/\|
>
> This is (was?) a bug in Webkit's implementation.

Because partial tiles look pretty bad, right? If each side is tiled  
first, with the number of whole tiles (or single stretched tile) that  
will fit in the space, and then positioned in the space, then there is  
not this problem for "repeat" either. Here is how I would do it:

Scale to width.
The two images for the top and bottom edges are made as tall as the  
top and bottom border-image area parts, respectively, and their width  
is scaled proportionally.
The images for the left and right edge are made as wide as the left  
and right border-image area parts, respectively, and their height is  
scaled proportionally.
The corner images are scaled to be as wide and as tall as the two  
border-image edges they are part of.
The middle image's width is scaled by the same factor as the top image  
unless that factor is zero or infinity, in which case the scaling  
factor of the bottom is substituted, and failing that, the width is  
not scaled. The height of the middle image is scaled by the same  
factor as the left image unless that factor is zero or infinity, in  
which case the scaling factor of the right image is substituted, and  
failing that, the height is not scaled.
Scale to length.
If the first keyword is ‘stretch’, the top, middle and bottom  
images are further scaled to be as wide as the middle part of the  
border image area. The height is not changed any further.
If the first keyword is ‘round’, the middle image is scaled to be  
as wide as the middle part of the border image area, and the top and  
bottom images are scaled horizontally, so that exactly a whole number  
of each fit in the middle part of the border image area, as follows:
S = the width (W) of the middle part of the border-image area, divided  
by the number (N) of whole tiles that can fit in that space (if N>0).   
If N= 0 then scale the tile to be W wide (if W==0, then no no tiles  
will be drawn). Otherwise, if S is less than 150% the width of one  
tile, scale the tile to be S wide. Otherwise, then scale the tile to W/ 
(N+1) wide.
If the first keyword is ‘repeat’ or 'space', the top, middle, and  
bottom images are not changed any further.
The effects of ‘stretch’, ‘round’, 'space', and ‘repeat’  
for the second keyword are analogous, acting on the height of the  
left, middle and right images.
Tile.
◦            If the first keyword is ‘round’ or ‘repeat’, the  
top image tiles are laid out end to end and the bottom image tiles are  
laid out end to end. These rows of tiles are inserted (centered, in  
the case of ‘repeat’) into their respective areas.

◦            If the first keyword is ‘space’, the top image tiles  
are laid out end to end with equal amounts of space around each tile  
and the bottom image tiles are laid out end to end with equal amounts  
of space around each tile, as follows:


S = (the width (W) of the middle part of the border-image area, minus  
(the number (N) of whole tiles that can fit in that space, multiplied  
by the width of each tile)/(N+1).  If N= 0 then no tiles will be  
drawn. Otherwise, each tile has S amount of space between it and the  
previous or next tile.


These rows of tiles are inserted into their respective areas, with S  
amount of space on each of the ends.
.

◦            If the first keyword is  ‘stretch’ the respective  
areas are filled with the horizontally scaled images.

◦            The effects of ‘stretch’, ‘round’, 'space', and  
‘repeat’ for the second keyword are analogous, acting on the  
spacing and tiling of the left, middle, and right images in the  
vertical direction.


.
Draw.
All images are drawn at the same stacking level as normal borders:  
immediately in front of the background layers.