Re: [css-masking][css4-background][css-images] 9-part sliced images (was: [css4-background] 9-part slicing images in background-image)

On Wed, Jan 1, 2014 at 10:40 PM, Dirk Schulze <dschulze@adobe.com> wrote:

> >
> > On Jan 2, 2014, at 6:15 AM, Rik Cabanier <cabanier@gmail.com> wrote:
> >
> >>
> >>
> >>
> >> On Wed, Jan 1, 2014 at 7:51 AM, Dirk Schulze <dschulze@adobe.com>
> wrote:
> >> Hi,
> >>
> >> Starting to look at the image function again. IMO it makes sense to
> base the syntax and behavior of a sliced-image() on the ‘border-image’
> shorthand[1]. (Type names shortened in this mail.)
> >>
> >>         border-image: [ <image> | none ] ||  <image-slice> [ /
> <image-width>? [ / <image-outset>]? ]? || <image-repeat>
> >>
> >> with:
> >>
> >>         <image-slice> = [ <length> | <percentage> | <number> | auto
> ]{1,4}
> >>         <image-width> = [ <length> | <percentage> | <number> | auto
> ]{1,4}
> >>         <image-outset> = [ <length> | <number> ]{1,4}
> >>         <image-repeat> = [ stretch | repeat | round | space ]{1,2}
> >>
> >> The area for 'border-image' is determined by the border-box. The area
> can be extended with 'border-outset’. CSS Image already specifies an image
> area for a bunch of properties. Other properties like ‘background’ and
> ‘mask’ specify their own image area. I think the function shouldn’t try to
> mess up with these definitions and therefore I suggest to leaf
> <image-outset> and <image-width> out of the equation for now.
> >>
> >>         sliced-image(
> >>                 [ <image> | <string> ] ||  <image-slice> ||
> <image-repeat>
> >>         )
> >>
> > Is there ever a reason to repeat a 9-slice image? It makes sense for
> border-image because it doesn't paint the center so you get repeating
> patterns on the outside.
> > It will look funny since you'll get square patterns. Maybe this
> attribute could be dropped?
>
> That is the key part of border-image and of this image function. Otherwise
> you can not do postage stamp effects with repeating perforations that are
> (nearly) independent of the element size.


Yes, it's key to border image but not for 9-slice scaling.
Just do an internet search for the term (ie
http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html
)

Do you have example where there are repeating patterns?


> >>
> >>
> >> If needed we can add  "[ / <image-width>? [ / <image-outset>]? ]?"
> later. The function would follow the definitions of 'border-image-*’
> properties otherwise.
> >>
> >> Greetings,
> >> Dirk
> >>
> >> [1] http://dev.w3.org/csswg/css-backgrounds-3/#border-image
> >>
> >> On Dec 18, 2013, at 11:33 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> wrote:
> >>
> >> > On Wed, Dec 18, 2013 at 1:01 PM, Dirk Schulze <dschulze@adobe.com>
> wrote:
> >> >> On Dec 18, 2013, at 9:44 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> wrote:
> >> >>> I believe that things like this should first be attempted as
> >> >>> functions, and if they end up too complex (which it probably will),
> we
> >> >>> just give up and try to add it to SVG instead.  The only problem
> there
> >> >>> is that we don't have an easy way to embed SVG in CSS, which is a
> >> >>> problem we can and should fix separately.
> >> >>
> >> >> I interpret your mail that you would like to see the image function
> before we introduce new properties (introduce in specifications since they
> are already there).
> >> >
> >> > Right.  The argument's simple; almost anything you might want to do
> >> > with an image, you want to be able to do it to images everywhere.
> >> > Limiting it to one context via properties (or spreading it piecemeal
> >> > by adding N sets of properties one by one) is bad.
> >> >
> >> >> I am generally fine with that but fear that a mockup, the draft and
> the final implementation would take a lot longer than specifying the
> implementation we already have. I can be convinced though.
> >> >>
> >> >> We can start from what we have in 'border-image' and take a look
> what is needed to take over:
> >> >>
> >> >> * border-image-source: <image> | none
> >> >>
> >> >> This on is kind of obvious, we need to reference the <image>:
> sliced-image(<image> …)
> >> >>
> >> >> * border-image-slice: [<number> | <percentage>]{1,4} && fill?
> >> >>
> >> >> This is the important part that defines the regions to slice the
> image. ‘fill’ removes the middle part. I do not think that we need ‘fill’.
> sliced-image(<image> [<number> | <percentage>]{1,4} …)
> >> >
> >> > Right, removing the center is a very border-image specific thing.  If
> >> > you really want to reproduce it yourself, just make the center of your
> >> > image transparent.
> >> >
> >> >> * border-image-width
> >> >>
> >> >> This defines the regions in which we draw the 9 sliced image parts.
> >> >>
> >> >> * border-image-outset
> >> >>
> >> >> How much does the border image area extend the border box. Again,
> useful but not necessarily helpful within the image function.
> >> >>
> >> >> * border-image-repeat
> >> >>
> >> >> Shall a tile be repeated, stretched, repeated as long as it fits,
> repeated as long as it fits into the border image area but with equal space?
> >> >>
> >> >> I think it gets clear that we can represent the first two properties
> in the sliced-image() function. The last three are important for the actual
> visual output. Currently I am unsure how they can be represent in the image
> itself. It feels more like this needs to be done by the property using the
> sliced-image() function.
> >> >
> >> > Depends on how you're envisioning things.  Creating a 9-sliced image
> >> > as an abstract thing, only the first two are necessary, and you apply
> >> > the other three via some other function at time of use.  But you can
> >> > also do the whole thing at once at time of use.  Depends on how much
> >> > abstraction you want.  border-image suggests that you don't need to
> >> > define the 9-slice as a separate thing, and it's okay to pull them all
> >> > together.
> >> >
> >> > ~TJ
> >>
> >>
> >
>