wicg / aspect-ratio

This is a repo to explore, and hopefully define a way to maintain aspect ratio

Archived

Discussion has moved here: w3c/csswg-drafts#333

aspect-ratio

This is a repo to explore, and hopefully define a way to maintain aspect ratio

Usecases

... see issues, we should end up with a few here ...

• Prevent content pushing from layout reflows by implementing aspect-ratio sized box demo
• Prevent content pushing when picture aspect-ratio changes demo

Potential solution

Jonathan Kingston already has a decent proposal here for it to work in CSS: https://jonathankingston.github.io/logical-sizing-properties/#propdef-aspect-ratio

Meetings

We discussed this issue at TPAC, here are the minutes: http://www.w3.org/2016/09/21-respimg-minutes.html

aspect-ratio's Issues

(orientation: square), (orientation: portrait), and (orientation: landscape) on elements

One thing CSS does that's really cool is (orientation: portrait) and (orientation: landscape) on @media queries. I use them when building full-screen animations with vmin and vmax units to ensure that stuff never goes outside the viewport and it's really handy to have that kind of information available - but I wish I could do the same on elements.

I grabbed the source code of EQCSS from http://elementqueries.com this weekend and added the following bit of JavaScript:

// Orientation
case "orientation":

// Square Orientation
if (EQCSS.data[i].conditions[k].value === 'square'){
  if (!(elements[j].offsetWidth == elements[j].offsetHeight)){
    test = false;
    break test_conditions;
  }
}

// Portrait Orientation
if (EQCSS.data[i].conditions[k].value === 'portrait'){
  if (!(elements[j].offsetWidth < elements[j].offsetHeight)){
    test = false;
    break test_conditions;
  }
}

// Landscape Orientation
if (EQCSS.data[i].conditions[k].value === 'landscape'){
  if (!(elements[j].offsetHeight < elements[j].offsetWidth)){
    test = false;
    break test_conditions;
  }
}

And now syntax like this is supported on @element queries:

@element ".orientation" and (orientation: square) {
  $this {
    background: orchid;
  }
}
@element ".orientation" and (orientation: portrait) {
  $this {
    background: darkturquoise;
  }
}
@element ".orientation" and (orientation: landscape) {
  $this {
    background: greenyellow;
  }
}

So now this is working with EQCSS in all browsers IE8 and up. Here's a video of me testing this in IE8:

Code demos

• Orientation on elements

I think it would be pretty cool if this was something normal CSS was aware of - I'll be able to put this to use right away!

Add use cases for aspect-ratio on non-replaced elements

I'm opening this based on the minutes from TPAC. @jonathanKingston and myself will need to provide usecases for when people utilize aspect ratio in the readme. Jonathan, if you could provide the rough use cases, I'm going to do a crawl where I find how often the % padding hack is utilized and on what types of elements.

Working on an aspect-ratio polyfill

Hi all, based on my comments in the other issue I have begun brainstorming and writing a polyfill for what an aspect-ratio property might look like. I currently have the logic figured out, and a regex that can extract this custom property from formatted CSS, I think I'm close to a working polyfill I just need to figure out how to list all CSS rules that affect a chosen element and determine if a width:; or height:; value has been assigned already in CSS before calculating the aspect ratio.

In thinking through how it should work, here's what I came up with:

Width	Height	Aspect-Ratio	Calculated
		✓	height
✓		✓	height
	✓	✓	width
✓	✓	✓	nothing
✓	✓	✓ with !important	nothing

This means any time there is both a width and height applied to the element in CSS, it would always take those values over the implied aspect-ratio, even if that aspect-ratio was marked !important.

For extracting values from formatted CSS. I have the following regex which will look for rules that contain -eq-aspect-ratio with the following syntax:

aspect ratio property = property name : width / height
property name = -eq-aspect-ratio
width = number with optional decimal and optional trailing digits
height = number with optional decimal and optional trailing digits

So here's the regex that will extract this and give us: a CSS selector, the width value, the height value:

/^(.*){.*-eq-aspect-ratio:\s*(\d*\.?\d+)\/(\d*\.?\d+)/gm

And here's my test with formatted CSS using one rule per line and some other simple transformations JavaScript can apply to any CSS to get it ready for extraction: https://regex101.com/r/kSMEeT/1

I wrote an almost working plugin yesterday on the plane - I'm going to keep toying around with it until I can get it working (by checking not the computed styles, but what CSS properties apply to each given element) but it's looking really hopeful and came together a lot faster than I thought it would!

Any thoughts on the precedence I have set in the table above?

Any comments on the prefix I have chosen for development -eq-aspect-ratio?

Any ideas about how such a plugin should be structured?

I'll post my polyfill here once I get it working!

Add use cases for the loading scenario of replaced elements

During the discussion @yoavweiss brought up use cases in regards to loading perf with aspect ratio. Can you please provide these so that we can ensure whatever is designed, we actually solve all use cases. Additionally, if you're able to - determine how many people actually try/want to accomplish this use case?

min-aspect-ratio and max-aspect-ratio on elements

Hi! This weekend I was experimenting with writing element queries based on the aspect ratio of an element. I learned that there is min-aspect-ratio and max-aspect-ratio support on @media queries which does the exact behaviour (and syntax) that I had desired, the only issue is that @media is limited to the browser's aspect ratio, and so these conditions can't be used to style elements based on their own aspect ratio.

I grabbed the source to EQCSS.js from http://elementqueries.com/EQCSS.js and added the following code:

// Min-aspect-ratio
case "min-aspect-ratio":

  var el_width = EQCSS.data[i].conditions[k].value.split('/')[0],
      el_height = EQCSS.data[i].conditions[k].value.split('/')[1];

  if (!(el_width/el_height <= elements[j].offsetWidth/elements[j].offsetHeight)){
    test = false;
    break test_conditions;
  }

break;

// Max-aspect-ratio
case "max-aspect-ratio":

  var el_width = EQCSS.data[i].conditions[k].value.split('/')[0],
      el_height = EQCSS.data[i].conditions[k].value.split('/')[1];

  if (!(elements[j].offsetWidth/elements[j].offsetHeight <= el_width/el_height)){
    test = false;
    break test_conditions;
  }

break;

Now the following syntax will work on @element queries with EQCSS in all browsers IE8 and up:

@element "div" and (min-aspect-ratio: 16/9) {
  $this {
    background: red;
  }
}
@element "div" and (max-aspect-ratio: 16/9) {
  $this {
    background: lime;
  }
}

And here is an extreme example, what I had in mind when I was looking for support, showing how different container queries could be written to allow a layout to recognize the aspect ratio it has and apply styles to many elements when that condition is met:

• https://www.youtube.com/watch?v=snykbZlFi-A

Code demos

• Min-aspect-ratio on elements
• Max-aspect-ratio on elements
• Element determining its own aspect ratio

I think if would be really cool if this sort of thing was in CSS!

Can we archive?

This is being worked on at the CSSWG. Can we archive this repo?