Re: Revisiting aspect ratios in sizes

Hi Yoav,

What was the outcome of the discussion at TPAC? Is it shipping in browsers
next month? ;)

-Jason

On Wed, Sep 21, 2016 at 2:35 AM, Yoav Weiss <yoav@yoav.ws> wrote:

> 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/sh
>> orthand-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
>>>
>>>
>>>
>


-- 
+1 (503) 290-1090 o | +1 (503) 502-7211 m | http://cloudfour.com | @grigs