- From: Rik Cabanier <cabanier@gmail.com>
- Date: Wed, 1 Jan 2014 21:15:05 -0800
- To: Dirk Schulze <dschulze@adobe.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>
- Message-ID: <CAGN7qDC=1P+-biw7dws7hMa6z=wHmJW+LJ_Wg85gzDThwzjHJg@mail.gmail.com>
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? > > 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 Thursday, 2 January 2014 05:15:39 UTC