[css-values-4] How to interpolate <ratio>?

[tabatkins]

I'm moving the definition of <ratio> over to V&U right now, per #4908, but I'm stuck on how ratios should interpolate (which is simply not defined right now in Sizing, the only place where a ratio is potentially interpolable).

Two obvious answers:

1. Keep around the original pair of values, and interpolate numerator and denominator separately.
2. Resolve the ratio into a single number, and interpolate that value. (Aka turn it into X / 1 form.)

Here's a test showing off the behaviors.

I think that, in general, I like "interpolate numerator and denominator separately" better. In particular, if the two ratios are on the same scale, the behavior ends up being identical to just interpolating the width and height independently.

Note, tho, the fourth box on that page - it's still interpolating between the same two ratios, but one ratio is expressed as 5/1, and the other is 300/200. This gives a ridiculous result, that just happens to land on the exact right sizes at the beginning and end. This means that option 1 is scale-dependent, which is probably not a good thing to have!

Further complications: if we go with "interpolate the divided result", that implies that the computed value has to be the divided result, I think? Which means that if you write 3/2, we'll lose that information, and can only serialize it as 1.5/1, which seems bad.

So I'm not sure. What does the group think? Option 1, with a warning that people probably want to ensure their numbers are on similar scales? (They usually will be.) Or Option 2, and bite the bullet on serialization?

[AmeliaBR]

if we go with "interpolate the divided result", that implies that the computed value has to be the divided result, I think?

I don't see why. For transforms, we “upgrade” values as needed for interpolation, in a way that's separate from how computed values work.

So, without that objection, I'd definitely argue for scaling to a denominator over 1 before interpolating numerators. Or alternatively, scaling up to a lowest common multiple denominator, to avoid precision issues from decimals. E.g., 5/1→300/200 would be interpolated as 1000/200→300/200. But that should give the same results, minus precision issues, as 5/1→1.5/1

[Loirooriol]

Here's a test showing off the behaviors.

You forgot to animate the width of the 4th case. Here is the fixed showcase, also highlighting the start and end sizes: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/7976

This means that option 1 is scale-dependent

Specifically, if I got it right, linearly interpolating aspect-ratio from a/b to c/d with option 1 and width from a * k0 to c * k1 will only result in a linear interpolation for height if k0 = k1.

However, it's not clear to me that we should try to get that behavior. If some author wants to get the same behavior as if the width and height were interpolated independently, maybe they should just convert the initial and final widths into heights using the initial and final ratios, and actually interpolate height instead of aspect-ratio.

[tabatkins]

I don't find the linear interpolation necessary, but looking at the two examples, I do find it better-looking, at least when they're on the same scale.

But the scale-dependence really bothers me on a spec level (it shouldn't matter!), and looks terrible in practice when the scales differ by a lot.

I don't see why. For transforms, we “upgrade” values as needed for interpolation, in a way that's separate from how computed values work.

Ah you're right. That resolves my issue, then. Let's just specify behavior 2 (interpolate over the division result), then.

[dbaron]

It seems like it might be better to interpolate the logarithm of the division result, or perhaps some other function of the division result that would produce symmetric results between animation from 1/2 to 1/10 and animation from 2/1 to 10/1, which seems like it would be good for the aspect-ratio property.

[tabatkins]

@dbaron That is an excellent point: using division lets us avoid a scale-dependence (so going from 2/1 to 10/1 is the same as going from 20/10 to 100/10), but it still introduces an orientation dependence; tall and wide versions of the same ratios interpolate differently.

Using the logarithm of the division, then, seems to make a lot of sense - it'll interpolate your examples by going from (wlog, using log2) 1 to 3.32 for the first, and from -1 to -3.32 for the second, exactly symmetric.

It also means that going from 1/2 to 2/1 will end up with a square 1/1 ratio in the middle of the transition, which I think is what authors would expect.

So if nobody objects, I'll change to using the logarithm of the division result.

[Loirooriol]

So, the proposal is that the interpolation between two ratios r1 and r2 at distance p should be

exp((1 - p) * log(r1) + p * log(r2))

? Or equivalently,

(r1 ** (1 - p)) * (r2 ** p)

Note that 0 / 1 has a -infinity logarithm, so interpolating between 0 / 1 and 1 / 1 won't be fluid. But that was already the case for 1 / 0 and 1 / 1.

Also note that doing it linearly has the advantage that you can fix height: h and interpolate aspect-ratiofrom r1 to r2, then width changes linearly from h * r1 to h * r2. If ratios are interpolated logarithmically, we lose this property, but we didn't have it either when fixing width: w instead.

Example table:

Fixed style	Interpolation	p = 0	p = .5	p = 1
height: 5px	2/1 -> 18/1 linearly	aspect-ratio: 2/1 width: 10px	aspect-ratio: 10/1 width: 50px	aspect-ratio: 18/1 width: 90px
width: 180px	2/1 -> 18/1 linearly	aspect-ratio: 2/1 height: 90px	aspect-ratio: 10/1 height: 18px	aspect-ratio: 18/1 height: 10px
height: 5px	2/1 -> 18/1 logarithmically	aspect-ratio: 2/1 width: 10px	aspect-ratio: 6/1 width: 30px	aspect-ratio: 18/1 width: 90px
width: 180px	2/1 -> 18/1 logarithmically	aspect-ratio: 2/1 height: 90px	aspect-ratio: 6/1 height: 30px	aspect-ratio: 18/1 height: 10px

So this would make it symmetric, seems good to me.

[dbaron]

One other possibility that I think might work better that logarithms and still have the desirable properties of avoiding scale-dependence and orientation-dependence is to instead use the function

I(r) = r - 1, for r ≥ 1
I(r) = 1 - (1/r), for r < 1

since I think at least for aspect-ratio it might produce smoother size animations, at least when it's the larger size in the ratio that's moving and the smaller size that's fixed.

Note that this is easily invertible:
I'(t) = t + 1, for t ≥ 0
I'(t) = 1/(1-t), for t < 0

[dbaron]

Figuring out which of these two is better may require constructing demos. Though it also might make the rules for <ratio> animation particularly tied to what we want for aspect-ratio, which may or may not be ideal for any future uses of <ratio> in property values.