Re: Revisiting aspect ratios in sizes

Thanks all!

A bunch of us are currently at TPAC, so we're running a session about this
problem and related proposals. We'll try to keep minutes and publish
conclusions (if there are any)

On Wed, Sep 21, 2016 at 11:08 AM, Jonathan Kingston <jonathan@jooped.co.uk>
wrote:

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