Re: suggestion: fixed-aspect-ratio CSS rule for block elements

On Wed, May 5, 2010 at 12:46 AM, Julien Cayzac <julien.cayzac@gmail.com> wrote:
> It would be very sweet if you could actually enforce a block element's
> aspect ratio using CSS, so you wouldn't have to rely on hacks in the
> line of http://lab.veille.jp/aspectratio/ anymore.
>
> This would be especially useful when designing elastic interfaces that
> display videos.
> Example: Right column at http://www.veille.jp/

I agree that this is potentially useful.  One has to be careful about
interactions with the existing width/height, though, since this would
essentially override one of them.  I think there are 3 ways we could
go about this:

1) We could make it a new value for height - a ratio() function,
perhaps.  However, this only works when the height is a function of
width, which it is under normal circumstances, but that dependency is
sometimes reversed, such as when the writing mode is vertical.  We'd
have to allow this as a value for width as well, which is potentially
confusing to authors when they try to use it and it doesn't do anythin

2) We can add a new property, aspect-ratio or something, that ignores
whichever of width or height is dependent.  That is, given the
following:

foo {
  width: 400px;
  height: 200px;
  aspect-ratio: 4 3;
}

The used value for height would be 300px instead.  (I believe that
this can occur during the step that resolves percentage dimensions,
which I think makes "used value" the correct value level here?)  I
think this is potentially confusing too, since the specified value of
width/height will be ignored sometimes.  It is also somewhat
unintuitive if you do indeed want to control the height and have the
width respond.

3) We add aspect-ratio, but have it only interact with 'auto' values
for width/height.  So, in the previous example, the aspect-ratio would
have no effect, since both width and height are already specified.  If
you set height:auto instead, though, then aspect-ratio will be
consulted to resolve it.  Or you could set height and leave width as
auto, so aspect-ratio would also have an effect.  Finally, if both
were auto (the default), then whichever is resolved first (typically
width) would be resolved normally, then aspect-ratio would be used to
resolve the other dimension (typically height).

I like #3 the best.  It would cause the least confusion while giving
the most power, I believe.  It would definitely address the use-case
of the veille.jp site, where they set the width to 39% and leave the
height alone.


While we're on the subject, then, let's talk mechanics.  Just having
aspect-ratio accept a single <number> would be acceptable defining the
ratio.  But I think for ease-of-use, it should alternately accept two
<numbers> specifying the ratio of the width to the height.  That way
you could, as in the example above, set a 4:3 ratio by simply saying
"4 3", rather than having to convert to "1.33", and "16 9" rather than
"1.77".  In both cases, the former is both easier to type and easier
to read, plus is more exact anyway.

~TJ

Received on Wednesday, 5 May 2010 15:46:51 UTC