Open jsnkuhn opened 2 years ago
What happens if the box is too small to accommodate the entire center image? Do we just clip it, or do we want to scale it down?
ahh, honestly hadn't thought about the fill
. I assume if a designer went to the trouble to make a border image they probably wouldn't want the browser to just arbitrarily cut it off so "scale it down" sounds like the better option here.
it occurs to me I might have misunderstood the question. Are you taking about the center fill
area or this situation where the width is not large enough for the full edge image?
It looks like there are 3 different possibilities right now for when there isn't room for a whole iteration of the edge image. stretch
and round
scale it down, repeat
clips from each size and space
just removes the image altogether.
The current space
behavior (just removing it) is probably most desired for no-repeat
.
some jury-rigged live no-repeat
examples:
Not entirely sure whether this would be a use case here or not. Looking at the centered thing on the top border and wondering if that's really part of the border or if it's a separate element.
The current
space
behavior (just removing it) is probably most desired forno-repeat
.
I agree with that. Though I can imagine that there may be cases in which scaling it down or clipping it could be desired results.
Having said that, to let this feature find its way into the spec., I think it'd be best to add it with the removing behavior first. If use cases for the other behaviors rise, we can still add them later.
Sebastian
@jsnkuhn The example in your last comment could be covered by having clipping behavior for no-repeat
Though that would have the downside that the text is part of the image. And as an author you'd probably want to have multiple such elements with different titles in them.
Also, you'd have to create a rather wide image to avoid any gaps between the corner images and the centered one.
For cases like that (but maybe without title), it would probably better to allow multiple border images. So you could define the first one using stretch
and the second one with no-repeat
.
Sebastian
Ran into 2 other examples with centered design elements but once again not sure if no-repeat
is what's needed for these. It almost seems to me like in these cases what's needed is a 5x5 sliced image instead of a 3x3.
I.E. slices for fixed corner and the center sizes but allow the remaining edge bits to stretch to fill the space?
https://ffvii-remake-intergrade.square-enix-games.com/en-us/
Currently done with a bunch of presentational divs. This one seems even more like it would really need the 5x5 slice. or 3x3 for just the corners and the solid line plus a single ::after
for the centered diamond.
https://www.zelda.com/tears-of-the-kingdom/
This might be more of a mask-border
situation but it still has the centered style element.
@jsnkuhn Your two examples before the last one seem to be better served through a 5x5 grid or multiple border images instead of a no-repeat
keyword. So maybe we should split that out into a separate issue.
Sebastian
it occurs to me that no-repeat
probably isn't specific enough of a keyword. The non repeated image fragment could technically be left aligned, right aligned or centered in the top edge. no-repeat-center-aligned
seems like a bit much... And I don't think I've ever seen a case where something like no-repeat-left-align
or no-repeat-right-align
would be used. So... maybe center
is a better keyword here?
It also seems worth pointing out that this should apply to both border-image-repeat
and mask-border-repeat
https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat
a
no-repeat
option forborder-image-repeat
that would center the sliced edges likerepeat
does but would NOT fill in the empty space with repeated tiles.this would allow developers to create border-images with centered edges like this: