'image-fit' vs preserveAspectRatio

[Simon Pieters-3]

We're speculating about implementing 'image-fit'

http://dev.w3.org/csswg/css3-page/#propdef-image-fit

and we note that it's pretty similar to preserveAspectRatio in SVG

http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute

The SVG attribute is not available as a CSS property.


We're considering the feasibility of aligning the two and making the SVG attribute map to the CSS property.

The CSS property allows the same precision as 'background-position' for positioning, while SVG has less precision. What are the use cases for more precision? Could the SVG WG consider allowing the same precision for preserveAspectRatio?

The CSS spec allows the image to go outside of the layout box with 'overflow:visible; image-fit:cover'. What's the use case for this?

Previously, the CSS spec had the same keywords as SVG. What's the reason for the change?


Cheers,
--
Simon Pieters
Opera Software

[Grant, Melinda]

 
Hi Simon,

I know little about SVG, so maybe someone else will help out if I misspeak.

> The CSS property allows the same precision as
> 'background-position' for positioning, while SVG has less
> precision. What are the use cases for more precision?

I think the greater precision for positioning was driven more by a desire to align with existing CSS syntax than from identified use cases.  The greater flexibility may not afford significant advantage to CSS authors.

> The CSS spec allows the image to go outside of the layout box
> with 'overflow:visible; image-fit:cover'. What's the use case
> for this?

This is more driven by the CSS box model than by use cases, I believe.  Images can extend beyond their height/width boxes, and overflow is the mechanism to control that.  The 'image-fit' specification just uses the existing model.  (I don't think SVG has a similar overflow model, does it?)

> Previously, the CSS spec had the same keywords as SVG. What's
> the reason for the change?

The keywords were initially taken from SMIL 1.0, but it was felt that the functionality was different enough that we should use different names to prevent confusion.  Also, the CSS group felt that the previous keywords weren't as descriptive as they could be.

HTH,

Melinda

[Simon Pieters-3]

Forwarding...


------- Forwarded message -------
From: "Erik Dahlström" <ed@...>
...

> Hi Simon,
>
> I know little about SVG, so maybe someone else will help out if I  
> misspeak.
>
>> The CSS property allows the same precision as
>> 'background-position' for positioning, while SVG has less
>> precision. What are the use cases for more precision?
>
> I think the greater precision for positioning was driven more by a  
> desire to align with existing CSS syntax than from identified use  
> cases.  The greater flexibility may not afford significant advantage to  
> CSS authors.

Svg might be "less flexible" for positioning if you use preserveAspectRatio, but I wouldn't call it "less precision". Anyway...

>> The CSS spec allows the image to go outside of the layout box
>> with 'overflow:visible; image-fit:cover'. What's the use case
>> for this?
>
> This is more driven by the CSS box model than by use cases, I believe.  
> Images can extend beyond their height/width boxes, and overflow is the  
> mechanism to control that.  The 'image-fit' specification just uses the  
> existing model.  (I don't think SVG has a similar overflow model, does  
> it?)

Svg supports 'overflow' on elements that establish viewports, which among other things includes foreignObject. The name 'image-fit' may not be so appropriate for that case. See http://www.w3.org/TR/SVG11/coords.html#EstablishingANewViewport.

I would ask what the CSS WG thinks should happen when using 'image-fit' on <iframe>, <object> and <embed>, both in case it references a raster image, and when it doesn't (e.g an svg, or some html, or a plugin).

>> Previously, the CSS spec had the same keywords as SVG. What's
>> the reason for the change?
>
> The keywords were initially taken from SMIL 1.0, but it was felt that  
> the functionality was different enough that we should use different  
> names to prevent confusion.  Also, the CSS group felt that the previous  
> keywords weren't as descriptive as they could be.

The SVG WG seemed to be ok with a new property, and could adopt it for use in SVG too, but 'image-fit' wasn't seen as a general enough name.

See http://www.w3.org/2009/03/16-svg-minutes.html#item06

/ed



--
Simon Pieters
Opera Software

[fantasai]

Erik Dahlström wrote:

>
>>> Previously, the CSS spec had the same keywords as SVG. What's
>>> the reason for the change?
>>
>> The keywords were initially taken from SMIL 1.0, but it was felt that
>> the functionality was different enough that we should use different
>> names to prevent confusion.  Also, the CSS group felt that the
>> previous keywords weren't as descriptive as they could be.
>
> The SVG WG seemed to be ok with a new property, and could adopt it for
> use in SVG too, but 'image-fit' wasn't seen as a general enough name.
>
> See http://www.w3.org/2009/03/16-svg-minutes.html#item06

Actually, the original name in the CSS draft was copied from SMIL
and was 'fit', not 'preserveAspectRatio'. The CSSWG felt 'fit'
was too general--since in CSS it only applies to replaced elements,
and not to any other boxes--and decided to rename it 'image-fit'.
I can't speak for the WG, but I think we'd be open to renaming it
to align better with SVG. However, I don't think 'aspect-ratio'
is a good name because this property doesn't give an aspect ratio.

I'm not coming up with any good alternatives here, just
   fit-scaling: fill | cover | contain
   fit-position: <background-position>
If you've got any other ideas throw them in...

~fantasai

[Philip Jägenstedt-2]

On Tue, 21 Apr 2009 20:51:29 +0200, fantasai  
<fantasai.lists@...> wrote:

> Erik Dahlström wrote:
>>
>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>> the reason for the change?
>>>
>>> The keywords were initially taken from SMIL 1.0, but it was felt that  
>>> the functionality was different enough that we should use different  
>>> names to prevent confusion.  Also, the CSS group felt that the  
>>> previous keywords weren't as descriptive as they could be.
>>  The SVG WG seemed to be ok with a new property, and could adopt it for  
>> use in SVG too, but 'image-fit' wasn't seen as a general enough name.
>>  See http://www.w3.org/2009/03/16-svg-minutes.html#item06
>
> Actually, the original name in the CSS draft was copied from SMIL
> and was 'fit', not 'preserveAspectRatio'. The CSSWG felt 'fit'
> was too general--since in CSS it only applies to replaced elements,
> and not to any other boxes--and decided to rename it 'image-fit'.
> I can't speak for the WG, but I think we'd be open to renaming it
> to align better with SVG. However, I don't think 'aspect-ratio'
> is a good name because this property doesn't give an aspect ratio.
>
> I'm not coming up with any good alternatives here, just
>    fit-scaling: fill | cover | contain
>    fit-position: <background-position>
> If you've got any other ideas throw them in...
>
> ~fantasai
>

How about content-fit and content-position? Perhaps this clashes too much  
with the content property, to which it isn't really related. Otherwise  
background-position/content-position makes intuitive sense. If this were  
used I guess people would soon expect background-fit to work too, not sure  
if that is at all possible or not though.

--
Philip Jägenstedt
Opera Software

[Simon Pieters-3]

On Tue, 21 Apr 2009 20:51:29 +0200, fantasai <fantasai.lists@...> wrote:

> Erik Dahlström wrote:
>>
>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>> the reason for the change?
...
> Actually, the original name in the CSS draft was copied from SMIL
> and was 'fit', not 'preserveAspectRatio'.

But the *keywords* were fill | hidden | meet | slice, where meet and slice are the same as in SVG.

--
Simon Pieters
Opera Software

[Giovanni Campagna]

2009/4/22 Philip Jägenstedt <philipj@...>:

> On Tue, 21 Apr 2009 20:51:29 +0200, fantasai <fantasai.lists@...>
> wrote:
>
>> Erik Dahlström wrote:
>>>
>>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>>> the reason for the change?
>>>>
>>>> The keywords were initially taken from SMIL 1.0, but it was felt that
>>>> the functionality was different enough that we should use different names to
>>>> prevent confusion.  Also, the CSS group felt that the previous keywords
>>>> weren't as descriptive as they could be.
>>>
>>>  The SVG WG seemed to be ok with a new property, and could adopt it for
>>> use in SVG too, but 'image-fit' wasn't seen as a general enough name.
>>>  See http://www.w3.org/2009/03/16-svg-minutes.html#item06
>>
>> Actually, the original name in the CSS draft was copied from SMIL
>> and was 'fit', not 'preserveAspectRatio'. The CSSWG felt 'fit'
>> was too general--since in CSS it only applies to replaced elements,
>> and not to any other boxes--and decided to rename it 'image-fit'.
>> I can't speak for the WG, but I think we'd be open to renaming it
>> to align better with SVG. However, I don't think 'aspect-ratio'
>> is a good name because this property doesn't give an aspect ratio.
>>
>> I'm not coming up with any good alternatives here, just
>>   fit-scaling: fill | cover | contain
>>   fit-position: <background-position>
>> If you've got any other ideas throw them in...
>>
>> ~fantasai
>>
>
> How about content-fit and content-position? Perhaps this clashes too much
> with the content property, to which it isn't really related.

content-fit is how the content (the content property, being it
"contents" or "url" or an arbitrary string) fits inside the box (or
set of boxes) generated by the element. So it is related to content,
and I support "content-fit".

I don't really support content-position: if you want to change the
shape of content area, you normally change padding, don't you?

> Otherwise
> background-position/content-position makes intuitive sense. If this were
> used I guess people would soon expect background-fit to work too, not sure
> if that is at all possible or not though.

We have multiple properties instead of background-fit
(background-repeat, background-clip, background-size...).

> --
> Philip Jägenstedt
> Opera Software
>
>

Giovanni

[fantasai]

Simon Pieters wrote:

> On Tue, 21 Apr 2009 20:51:29 +0200, fantasai <fantasai.lists@...> wrote:
>
>> Erik Dahlström wrote:
>>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>>> the reason for the change?
> ...
>> Actually, the original name in the CSS draft was copied from SMIL
>> and was 'fit', not 'preserveAspectRatio'.
>
> But the *keywords* were fill | hidden | meet | slice,
> where meet and slice are the same as in SVG.

I was replying to the minutes, specifically
   "ED: image-fit ... according to simon, they called it pAR first,
    not sure what's the reason for changing it"

HP has gotten very positive feedback on the keyword name change,
btw. I don't think we want to revert that.

~fantasai

[Andrew Fedoniouk]

fantasai wrote:

> Simon Pieters wrote:
>> On Tue, 21 Apr 2009 20:51:29 +0200, fantasai
>> <fantasai.lists@...> wrote:
>>
>>> Erik Dahlström wrote:
>>>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>>>> the reason for the change?
>> ...
>>> Actually, the original name in the CSS draft was copied from SMIL
>>> and was 'fit', not 'preserveAspectRatio'.
>>
>> But the *keywords* were fill | hidden | meet | slice,
>> where meet and slice are the same as in SVG.
>
> I was replying to the minutes, specifically
>   "ED: image-fit ... according to simon, they called it pAR first,
>    not sure what's the reason for changing it"
>
> HP has gotten very positive feedback on the keyword name change,
> btw. I don't think we want to revert that.
>

<img>/<object> may have two images - one is defined by
'background-image' CSS attribute.
and another defined by  its src DOM attribute.

The property that defines content or foreground image way of rendering
should have a name
with distinction from the background image.

'foreground-image-fit' , 'content-image-fit' as examples of names with
such distinction.

But I would suggest to add foreground-image as an entity to the CSS. So
to add:

foreground-image:
foreground-position:
foreground-size:
foreground-repeat:
etc.

foreground-size already defines how image is getting stretched/shrunk.

In this case initial style sheet for HTML will simply have this record:

img, object
{
   foreground-image: attr("src");
   foreground-size: 100%;
}

--
Andrew Fedoniouk.

http://terrainformatica.com







 

[Grant, Melinda]

 
Philip Jägenstedt said:
> How about content-fit and content-position?
Wrt suggestions for better names for 'image-fit' and 'image-position'.

The CSS WG did consider this alternative when we brainstormed names; as I recall, this was rejected at that point because the property is not intended to generalize to all content, but rather applies only to replaced content.

Since this is targeted to graphics, maybe
        gfx-fit, gfx-position?
Or, less cryptically, graphics-fit, graphics-position?

Best,

Melinda

[fantasai]

fantasai wrote:

> Erik Dahlström wrote:
>>
>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>> the reason for the change?
>>>
>>> The keywords were initially taken from SMIL 1.0, but it was felt that
>>> the functionality was different enough that we should use different
>>> names to prevent confusion.  Also, the CSS group felt that the
>>> previous keywords weren't as descriptive as they could be.
>>
>> The SVG WG seemed to be ok with a new property, and could adopt it for
>> use in SVG too, but 'image-fit' wasn't seen as a general enough name.
>>
>> See http://www.w3.org/2009/03/16-svg-minutes.html#item06
>
> Actually, the original name in the CSS draft was copied from SMIL
> and was 'fit', not 'preserveAspectRatio'. The CSSWG felt 'fit'
> was too general--since in CSS it only applies to replaced elements,
> and not to any other boxes--and decided to rename it 'image-fit'.
> I can't speak for the WG, but I think we'd be open to renaming it
> to align better with SVG. However, I don't think 'aspect-ratio'
> is a good name because this property doesn't give an aspect ratio.
>
> I'm not coming up with any good alternatives here, just
>   fit-scaling: fill | cover | contain
>   fit-position: <background-position>
> If you've got any other ideas throw them in...

Gerrie Shults suggests object-scale or object-size. I'll throw in
object-fit to that mix.

~fantasai

[Erik Dahlstrom]

On Wed, 22 Apr 2009 15:33:33 +0200, Giovanni Campagna <scampa.giovanni@...> wrote:

> 2009/4/22 Philip Jägenstedt <philipj@...>:
>> On Tue, 21 Apr 2009 20:51:29 +0200, fantasai <fantasai.lists@...>
>> wrote:
>>
>>> Erik Dahlström wrote:
>>>>
>>>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>>>> the reason for the change?
>>>>>
>>>>> The keywords were initially taken from SMIL 1.0, but it was felt that
>>>>> the functionality was different enough that we should use different names to
>>>>> prevent confusion.  Also, the CSS group felt that the previous keywords
>>>>> weren't as descriptive as they could be.
>>>>
>>>>  The SVG WG seemed to be ok with a new property, and could adopt it for
>>>> use in SVG too, but 'image-fit' wasn't seen as a general enough name.
>>>>  See http://www.w3.org/2009/03/16-svg-minutes.html#item06
>>>
>>> Actually, the original name in the CSS draft was copied from SMIL
>>> and was 'fit', not 'preserveAspectRatio'. The CSSWG felt 'fit'
>>> was too general--since in CSS it only applies to replaced elements,
>>> and not to any other boxes--and decided to rename it 'image-fit'.
>>> I can't speak for the WG, but I think we'd be open to renaming it
>>> to align better with SVG. However, I don't think 'aspect-ratio'
>>> is a good name because this property doesn't give an aspect ratio.
>>>
>>> I'm not coming up with any good alternatives here, just
>>>   fit-scaling: fill | cover | contain
>>>   fit-position: <background-position>
>>> If you've got any other ideas throw them in...
>>>
>>> ~fantasai
>>>
>>
>> How about content-fit and content-position? Perhaps this clashes too much
>> with the content property, to which it isn't really related.
>
> content-fit is how the content (the content property, being it
> "contents" or "url" or an arbitrary string) fits inside the box (or
> set of boxes) generated by the element. So it is related to content,
> and I support "content-fit".

'content-fit' would be ok with me.

Note that it may be slightly confusing for svg authors since preserveAspectRatio="none" means the same as image-fit="fill", and image-fit="none" means something else.

> I don't really support content-position: if you want to change the
> shape of content area, you normally change padding, don't you?

Does having 'content-position' change the content box? I think it only offsets what's shown inside the content box, right?
And isn't changing the padding really just affecting what's outside the content-box?

I think 'content-position' is fine.

Note that these are my personal opinions, not necessarily the opinion of the SVG WG.

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

[Erik Dahlstrom]

On Fri, 24 Apr 2009 08:59:32 +0200, Erik Dahlström <ed@...> wrote:

> On Wed, 22 Apr 2009 15:33:33 +0200, Giovanni Campagna <scampa.giovanni@...> wrote:
>
>> 2009/4/22 Philip Jägenstedt <philipj@...>:
>>> On Tue, 21 Apr 2009 20:51:29 +0200, fantasai <fantasai.lists@...>
>>> wrote:
>>>
>>>> Erik Dahlström wrote:
>>>>>
>>>>>>> Previously, the CSS spec had the same keywords as SVG. What's
>>>>>>> the reason for the change?
>>>>>>
>>>>>> The keywords were initially taken from SMIL 1.0, but it was felt that
>>>>>> the functionality was different enough that we should use different names to
>>>>>> prevent confusion.  Also, the CSS group felt that the previous keywords
>>>>>> weren't as descriptive as they could be.
>>>>>
>>>>>  The SVG WG seemed to be ok with a new property, and could adopt it for
>>>>> use in SVG too, but 'image-fit' wasn't seen as a general enough name.
>>>>>  See http://www.w3.org/2009/03/16-svg-minutes.html#item06
>>>>
>>>> Actually, the original name in the CSS draft was copied from SMIL
>>>> and was 'fit', not 'preserveAspectRatio'. The CSSWG felt 'fit'
>>>> was too general--since in CSS it only applies to replaced elements,
>>>> and not to any other boxes--and decided to rename it 'image-fit'.
>>>> I can't speak for the WG, but I think we'd be open to renaming it
>>>> to align better with SVG. However, I don't think 'aspect-ratio'
>>>> is a good name because this property doesn't give an aspect ratio.
>>>>
>>>> I'm not coming up with any good alternatives here, just
>>>>   fit-scaling: fill | cover | contain
>>>>   fit-position: <background-position>
>>>> If you've got any other ideas throw them in...
>>>>
>>>> ~fantasai
>>>>
>>>
>>> How about content-fit and content-position? Perhaps this clashes too much
>>> with the content property, to which it isn't really related.
>>
>> content-fit is how the content (the content property, being it
>> "contents" or "url" or an arbitrary string) fits inside the box (or
>> set of boxes) generated by the element. So it is related to content,
>> and I support "content-fit".
>
> 'content-fit' would be ok with me.
>
> Note that it may be slightly confusing for svg authors since preserveAspectRatio="none" means the same as image-fit="fill", and image-fit="none" means something else.
>
>> I don't really support content-position: if you want to change the
>> shape of content area, you normally change padding, don't you?
>
> Does having 'content-position' change the content box? I think it only offsets what's shown inside the content box, right?
> And isn't changing the padding really just affecting what's outside the content-box?
>
> I think 'content-position' is fine.
>
> Note that these are my personal opinions, not necessarily the opinion of the SVG WG.

The naming was briefly discussed in another SVG telcon[1], and the conclusion was that the SVG WG prefers the naming 'content-fit' and 'content-position' because of the reasons already mentioned above.

Cheers
/Erik, on behalf of the SVG WG (ACTION-2530)

[1] http://www.w3.org/2009/04/27-svg-minutes.html#item05

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

[Doug Schepers-3]

Hi, CSS WG-

We saw that you had decided on the property names 'image-fit' and
'image-position'.  These don't make much sense in the SVG context.

We counter-propose the following options for property names, which we
think work well with the set of value keywords ('fill', 'cover', and
'contain') in both CSS and SVG:

'image-fit'  ->  'fit-area', 'fit-aspect-ratio' or 'fit-resize'
'image-position'  ->  'fit-position'

What do you think?

Regards-
-Doug Schepers
W3C Team Contact, SVG and WebApps WGs