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

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".
> 

Conceptually <img> and <video> are elements that have two images:
    1) background-image:url(...) and
    2) foreground-image:attr(src).

Imagine that you have additional set of foreground-*** attributes
similar to background-*** set.

Having them you would be able to define defaults for the <video>
as:

video
{
   foreground-image   :attr(src);
   foreground-repeat  :stretch keep-ratio;
   foreground-position:50% 50%;
}
video:unavailable
{
   foreground-image   :url(somecaption.png);
}

There are also many other cases when CSS would benefit from having 
foreground images. E.g. list items with icons are better (semantically) 
defineable as <li>'s with foreground image and text.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 4 December 2008 04:09:07 UTC