- From: Dirk Schulze <dschulze@adobe.com>
- Date: Fri, 3 Jan 2014 07:30:33 +0000
- To: Rik Cabanier <cabanier@gmail.com>
- CC: Tab Atkins Jr. <jackalmage@gmail.com>, Jet Villegas W3C <w3c@junglecode.net>, Dean Jackson <dino@apple.com>, "liam@w3.org" <liam@w3.org>, Brad Kemper <brad.kemper@gmail.com>, www-style list <www-style@w3.org>, Simon Fraser <simon.fraser@apple.com>
On Jan 3, 2014, at 6:40 AM, Rik Cabanier <cabanier@gmail.com> wrote: > > > > On Thu, Jan 2, 2014 at 1:02 AM, Dirk Schulze <dschulze@adobe.com> wrote: > > On Jan 2, 2014, at 7:44 AM, Rik Cabanier <cabanier@gmail.com> wrote: > > > > > > > > > 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? > > I just gave you one in the sentence above. Here is the visual version of the explanation: http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-box-image-property > > Ok, I see. This is not about implementing 9-slice scaling; you're defining a new image function that can do everything that border-image does (which includes 9-slice scaling) > > You probable want to add the 'fill' keyword as well [1] Yes, that keyword is part of <image-slice> and important for masking. Greetings, Dirk > > 1: http://dev.w3.org/csswg/css-backgrounds/#border-image-slice-fill > > > > > >> > > >> > > >> 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 > > >> > > >> > > > > > > >
Received on Friday, 3 January 2014 07:31:11 UTC