Re: Revisiting aspect ratios in sizes

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 <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 <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 <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 <https://lists.w3.org/Archives/Public/public-respimg/2014Oct/0043.html>  
> [^2]: https://github.com/ResponsiveImagesCG/picture-element/issues/85 <https://github.com/ResponsiveImagesCG/picture-element/issues/85>
> [^3]: https://github.com/ResponsiveImagesCG/picture-element/issues/86 <https://github.com/ResponsiveImagesCG/picture-element/issues/86>
> [^4]: https://www.ampproject.org/docs/guides/amp_replacements.html <https://www.ampproject.org/docs/guides/amp_replacements.html>
> [^5]: https://medium.com/@owencm/designing-great-uis-for-progressive-web-apps-dd38c1d20f7#.hzxdz4z7d <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 <https://lists.w3.org/Archives/Public/www-style/2016Jun/0072.html>
> [^7]: https://lists.w3.org/Archives/Public/www-style/2016Jun/0091.html <https://lists.w3.org/Archives/Public/www-style/2016Jun/0091.html>
> 
> 
> -- 
> +1 (503) 290-1090 o | +1 (503) 502-7211 m | http://cloudfour.com <http://cloudfour.com/> | @grigs