4 ms·

I'm interested to know if anyone with a decent amount of experience with this technique can vouch for the linear formula? It would certainly be great if that i

I'm interested to know if anyone with a decent amount of experience with this technique can vouch for the linear formula? It would certainly be great if that is an ideal formula. I'm curious to know if a slight curve in the formula would in any case be more optimal / natural? The reason I ask is because I've implemented similar techniques in projects before, and from experience I ran into a few situations where (for example) text would wrap at undesirable locations (such as titles / headings) during the transition while I would resize the window's width. So if anything it may be interesting to extrapolate this technique so that the derivative of the function is slightly smaller on the small end of the spectrum, and slightly larger on the big end. Or maybe a shape similar to a sigmoid function?

spartanatreyu 10y ago
My thoughts too. I think most word wrap issues could be avoided with implementation of the text-balance spec. (Pretty sure this is a part of css4) Polyfill Example: http://webplatform.adobe.com/balance-text/demo/index.html http://webplatform.adobe.com/balance-text/demo/index.html As for changing linear interpolation to easing, I can't think of a good way to do that off the top of my head. It could be made in js but native css would be better. It does seem like a great use case for houdini specs (if they do come out) where just like the dom is accessable from js, the cssom would also be available so you could make a new css rule with a js implementation. Really good read on that: https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/ https://www.smashingmagazine.com/2016/03/houdini-maybe-the-m...
- zachrose 10y ago
  CSS 'calc' has multiplication, so polynomials are within reach. Here's a nice easing function reference page, with math: http://gizma.com/easing/ http://gizma.com/easing/ I'm not sure if it's possible to express an in-out easing function inside `calc`, but you might be able to set a halfway point and use two easing functions.

spartanatreyu 10y ago

My thoughts too. I think most word wrap issues could be avoided with implementation of the text-balance spec. (Pretty sure this is a part of css4) Polyfill Example: http://webplatform.adobe.com/balance-text/demo/index.html http://webplatform.adobe.com/balance-text/demo/index.html As for changing linear interpolation to easing, I can't think of a good way to do that off the top of my head. It could be made in js but native css would be better. It does seem like a great use case for houdini specs (if they do come out) where just like the dom is accessable from js, the cssom would also be available so you could make a new css rule with a js implementation. Really good read on that: https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/ https://www.smashingmagazine.com/2016/03/houdini-maybe-the-m...

zachrose 10y ago
CSS 'calc' has multiplication, so polynomials are within reach. Here's a nice easing function reference page, with math: http://gizma.com/easing/ http://gizma.com/easing/ I'm not sure if it's possible to express an in-out easing function inside `calc`, but you might be able to set a halfway point and use two easing functions.