W3C home > Mailing lists > Public > public-respimg@w3.org > October 2016

RE: Revisiting aspect ratios in sizes

From: Greg Whitworth <gwhit@microsoft.com>
Date: Tue, 4 Oct 2016 15:49:31 +0000
To: Yoav Weiss <yoav@yoav.ws>, Jason Grigsby <jason@cloudfour.com>
CC: "public-respimg@w3.org" <public-respimg@w3.org>
Message-ID: <SN2PR03MB215880AD00B34880964465CCA4C50@SN2PR03MB2158.namprd03.prod.outlook.com>
I also created a repo with issues that were actioned at the meeting:

https://github.com/WICG/aspect-ratio


If anyone wants to provide use cases where they utilize the padding hack or other methodology to achieve aspect-ratio, feel free to add them to the readme via PR.

~Greg

From: Yoav Weiss [mailto:yoav@yoav.ws]
Sent: Tuesday, October 4, 2016 7:52 AM
To: Jason Grigsby <jason@cloudfour.com>
Cc: public-respimg@w3.org
Subject: Re: Revisiting aspect ratios in sizes

My notes from the meeting (among others) are at https://blog.yoav.ws/tpac_2016/


On Tue, Oct 4, 2016 at 1:19 PM, Jason Grigsby <jason@cloudfour.com<mailto:jason@cloudfour.com>> wrote:
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<mailto: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<mailto: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<mailto: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<mailto: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<tel:%2B1%20%28503%29%20290-1090> o | +1 (503) 502-7211<tel:%2B1%20%28503%29%20502-7211> m | http://cloudfour.com<http://cloudfour.com/> | @grigs





--
+1 (503) 290-1090<tel:%2B1%20%28503%29%20290-1090> o | +1 (503) 502-7211<tel:%2B1%20%28503%29%20502-7211> m | http://cloudfour.com | @grigs

Received on Tuesday, 4 October 2016 15:50:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 17:06:19 UTC