Re: Revisiting aspect ratios in sizes

Hi All,

I drafted a similar demo for creating a new size property in CSS and
expanded from Tab Atkins aspect ratio work here in this demo (this links to
a draft spec also):
https://jonathankingston.github.io/logical-sizing-properties/demo/index.html

The discussion was started here:
https://discourse.wicg.io/t/shorthand-for-width-height-css-longhands/1160/26

Also CSSWG thread:
https://lists.w3.org/Archives/Public/www-style/2016Sep/0046.html

I would love your input on this as ideally if this is going to be a
property of HTML it would make sense to have some form of syntax interop.

Thanks

On Wed, Sep 21, 2016 at 8:22 AM Tommy Hodgins <tomhodgins@gmail.com> wrote:

> Hey Jason & everybody!
>
> I have two code demos to contribute toward this discussion. I often have
> to implement responsive video embeds and instead of trying the “*wrapper
> + padding hack”* technique for every video I have to embed — and then
> find some other way to calculate the aspect ratio based on its dimensions —
> I’ve taken to just copy/pasting the embed code directly from Youtube or
> Vimeo with the width="" and height="" attributes intact, and using JS to
> calculate the correct height for the element as the width adapts to fill
> its container responsively:
>
> http://codepen.io/tomhodgins/pen/PZqaLm
>
> The other example demonstrates how responsive aspect ratio might work in
> CSS. The desired aspect ratio is stored in a custom data attribute called
> data-ratio="" and read by (JS and) CSS and the correct height is
> calculated based on the same formula:
>
> http://codepen.io/tomhodgins/pen/XKJpYr
>
> So I hope these two demos can serve as a springboard for further
> brainstorms & exploration! Me and my buddies have often discussed that it
> would be cool if there was a $nativeWidth or $nativeHeight unit in CSS
> that was aware of the native resolution of any image/video content that you
> could use in your calculations - but haven’t mocked up support for that yet.
>
> Also, on the element queries front: this week I had a fun implementing of
> an element query solution in ~40-lines of JavaScript. It’s a non
> container-query style element query demo that uses custom data attributes
> and applies classes, so the features are quite limited. But hopefully this
> demo will help simplify the concept for people wondering how to implement
> element queries, or use them: http://codepen.io/tomhodgins/pen/bwwNRr
>
> Happy hacking,
> Tommy
>
>
> On Sep 21, 2016, at 1:44 AM, Jason Grigsby <jason@cloudfour.com> wrote:
>
> Back in 2014, Steve Caflin started an interesting thread on finding some
> way to tell the browser the size of the image in the page for the purposes
> of assisting with layout.[^1]
>
> The conversation led to two tickets in Github about intrinsic
> dimensions[^2] and how sizes only works with width-constrained images.[^3]
> Conversations on both tickets have subsided and issue #86 was explicitly
> tabled.
>
> I would like to reopen this conversation. In particular, we've seen an
> increased emphasis on providing old school width and height attributes to
> avoid the page jumping around.
>
> AMP Pages explicitly require height and width declarations for this
> reason.[^4] Owen Cambell-Moore's UI recommendations for Progressive Web
> Apps also state you should avoid pages jumping around by declaring height
> and width.[^5]
>
> The problem was also recently raised on the www-style list[^6] where
> Rachel Nabors[^7] among others described how this is a generalized problem
> for more than simply images.
>
> I believe we need to strongly consider two actions:
>
> 1. Prioritize adding aspect ratio information to sizes (or adding a aspect
> attribute).
> 2. Considering extending the sizes (and an aspect attribute if one exists)
> to be available to other elements that provide similar layout problems in
> responsive designs.
>
> With sizes, we've provided half of what the browser needs to reserve the
> size of the image in the page. If the browser knew the aspect ratio, it
> could calculate the other half. Let's find a way to make this happen.
>
> -Jason
>
>
> [^1]:
> https://lists.w3.org/Archives/Public/public-respimg/2014Oct/0043.html
> [^2]: https://github.com/ResponsiveImagesCG/picture-element/issues/85
> [^3]: https://github.com/ResponsiveImagesCG/picture-element/issues/86
> [^4]: https://www.ampproject.org/docs/guides/amp_replacements.html
> [^5]:
> https://medium.com/@owencm/designing-great-uis-for-progressive-web-apps-dd38c1d20f7#.hzxdz4z7d
> [^6]: https://lists.w3.org/Archives/Public/www-style/2016Jun/0072.html
> [^7]: https://lists.w3.org/Archives/Public/www-style/2016Jun/0091.html
>
>
> --
> +1 (503) 290-1090 o | +1 (503) 502-7211 m | http://cloudfour.com | @grigs
>
>
>