W3C home > Mailing lists > Public > www-style@w3.org > December 2008

Re: scaling behavior of HTML <img>/<video> and SVG preserveAspectRatio

From: Philip Jägenstedt <philipj@opera.com>
Date: Wed, 03 Dec 2008 19:52:30 +0100
To: Dean Jackson <dino@apple.com>
Cc: www-style@w3.org
Message-Id: <1228330350.9186.212.camel@localhost>

Yes, fit and fit-position are the same as what I was proposing modulo
naming. It is a bit odd that nobody taking part in the WHATWG
discussion was aware of these properties. Searching in the www-style
archives I can't find much discussion at all of them and there are no
implementations yet as far as I can tell, so perhaps that explains
their relative anonymity.

In any event, is there any particular reason why this is in paged media?
It seems to me that it is more related to the box model.

Philip

On Thu, 2008-12-04 at 05:13 +1100, Dean Jackson wrote: 
> Hi Philip,
> 
> We agree that CSS is the right place to define this behaviour.
> 
> What about the 'fit' and 'fit-position' properties from CSS3 Paged
> Media?
> 
> http://www.w3.org/TR/css3-page/#fit
> http://www.w3.org/TR/css3-page/#fit-position
> 
> It seems to match SVG's preserveAspectRatio attribute.
> 
> Aside: I'm not sure why these are in Paged Media. They seem applicable
> to continuous media too.
> 
> Dean
> 
> On 04/12/2008, at 3:38 AM, Philip Jägenstedt wrote:
> 
> >
> > Hi,
> >
> > I've been working on implementing HTML 5 <video> in Opera and after
> > recent discussions on the WHATWG list[1] about the pixelratio  
> > attribute
> > in the specific and more generally the difference between <img> and
> > <video> I believe formalizing and expressing these differences in CSS
> > would be for the best (first suggested by Martin Atkins[2]).
> >
> > As you know, <img style="width: 100px; height: 100px;"> would cause
> > the image to stretch to fill the content box of 100x100 px, distorting
> > the image if the original is not square.
> >
> > <video style="width: 100px; height: 100px;"> also causes the content  
> > box
> > to be 100x100 px, but the video is scaled while preserving its ratio  
> > so
> > that it fits precisely inside the box, resulting in letterboxing or
> > pillarboxing if the original video is not square.[3]
> >
> > Furthermore, SVG has the preserveAspectRatio[4] attribute for some
> > elements, including <image> and <video>, but it cannot be set with  
> > CSS.
> > Using this attribute one can achieve both the stretch behavior  
> > ("none";
> > like HTML <img>), the aspect-preserving behavior ("meet"; like HTML
> > <video>) and additionally "slice" which also preserves aspect but  
> > zooms
> > and crops instead.
> >
> > I would like to suggest introducing something similar to
> > preserveAspectRatio in CSS along the following lines:
> >
> > 1. A new "preserve-aspect-ratio" property which can take the values
> > "none", "meet" and "slice". I'm not sure what the overflow behavior  
> > for
> > slice should be, this needs discussion. An alternative naming scheme  
> > for
> > this property might be "scaling" with values "stretch", "aspect-min"  
> > and
> > "aspect-max".
> >
> > 2. A new content-position property similar to background-position  
> > which
> > does has the same function as the align portion of the SVG
> > preserveAspectRatio attribute. This would only take effect if the  
> > above
> > property is "meet" or "slice".
> >
> > For HTML these properties only make sense for replaced content with an
> > intrinsic size and the default style would be
> >
> > <img style="preserve-aspect-ratio:none">
> >
> > <video style="preserve-aspect-ratio: meet; content-position: 50% 50%">
> >
> > In SVG the default behavior for both <image> and <video> appears to be
> >
> > <??? style="preserve-aspect-ratio: meet; content-position: 50% 50%">
> >
> > I believe that moving this to the CSS level would have several  
> > positive
> > effects, such as being able to use the <img> model for <video> and  
> > vice
> > versa. We are considering implementing something like this, but would
> > like to hear some feedback on the idea first.
> >
> > [1] discussion of the pixelratio attribute began at
> > http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-October/016588.html
> > and eventually resulted in its removal in
> > http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-December/017625.html
> >
> > [2]
> > http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-December/017638.html
> >
> > [3]
> > http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-video-videowidth
> >
> > [4]
> > http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
> >
> > -- 
> > Philip Jägenstedt
> > Opera Software
> >
> 
-- 
Philip Jägenstedt
Opera Software
Received on Wednesday, 3 December 2008 18:53:15 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:17 GMT