5 ms·

The math of CSS locks

126 points by bpierre 10y ago

marpstar 10y ago
I'm working on an Ionic2 project right now and we talked about a lot of this stuff and the desire for a `min-font-size` and `max-font-size`-like CSS rules. This is great stuff, can't wait to share this with my team.
- err4nt 10y ago
  Did somebody say min-font-size and max-font-size? I've got a demo of the lock-style implementation they are talking about in the article here: http://codepen.io/tomhodgins/pen/QEVbwR http://codepen.io/tomhodgins/pen/QEVbwR And another, JavaScript-powered version that I think is closer to how min-font-size or max-font-size would work if implemented as a CSS property here: http://codepen.io/tomhodgins/pen/bZxvjg http://codepen.io/tomhodgins/pen/bZxvjg
  - marpstar 10y ago
    our solution definitely ended up looking like your first example. it wasn't that solving the problem was particularly difficult, but just something we hadn't really run into. previous approaches of just using em and rem were working fine for the most part, but for one particular use case we wanted more.
mirap 10y ago
It would be great to inhereit from other element. Like h1 { font-size: calc( othertext.font-size + 10px );}
- tobr 10y ago
  Font size is already inherited. `font-size: calc(1em + 10px);` should do basically that.
muthdra 10y ago
dat line-height demo tho I remember having a lot of trouble with this when reading medium.com posts on mobile
Animats 10y ago
Why call linear interpolation a "lock"? It's amusing to see "calc" in CSS. You're only allowed the operators + - * /. No functions. Want to bet people start demanding user-defined functions?
- prashnts 10y ago
  The article essentially talks about producing something that is: font-size, line-height = function(viewport_width, max, min) in CSS. I think a closer analogy would be comparing it to timing/easing functions, rather than linear interpolation.
- majewsky 10y ago
  > Want to bet people start demanding user-defined functions? Doesn't Sass/SCSS already do that?
  - spartanatreyu 10y ago
    It does but just like css variables it'll eventually be rolled into css or inspire something else that performs a similar function that gets rolled into css. "Eventually"
- Rafert 10y ago
  It refers to a waterlock, as explained in the linked Tim Brown blog post: http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/ http://blog.typekit.com/2016/08/17/flexible-typography-with-...
  - kevhito 10y ago
    I agree that "lock" is a really poorly chosen word here. The explanation and diagram with a canal lock on that page is... unusual. It's a cutaway diagram of a physical canal lock, re-purposed as an mathematical graph (with x as the "viewport width" independent axis, and y as the "line height" dependent axis). But then it keeps the center portion moving up and down as if it is still a canal lock, so it can't really be a mathematical function at all. The word "clamped" should have been used instead of "lock". They just want the text size to scale linearly with page width, but they want to "clamp" the text size so that it always stays within some reasonable (min, max) range. They could have also called it "piecewise linear".
sametmax 10y ago
WARNINGS apply: remember that any calculation in CSS is re-evaluated everytime the mouse moves, which means it's a bit performance issue.
- majewsky 10y ago
  It's a simple optimization to only reevaluate a formula when the constituent variables change (in these cases, the viewport sizes and root font size). I know that at least Qt Quick implements this optimization, and I would assume that browser developers already do that, too.
  - amelius 10y ago
    Yes, but browser vendors can choose whether they optimize it, so don't count on it!
- jordanlev 10y ago
  Is this true? I've never seen this mentioned anywhere, and some googling doesn't show me any mention of this. Do you have a reference to something that verifies this and/or explains it? I can totally understand how CSS expressions would be re-evaluated due to a repaint (resizing the window, manipulating DOM elements with javascript, etc)... but it doesn't make any sense that simply moving your mouse would cause this.
  - solidr53 10y ago
    Not true. Read about reflow or layout trashing. Paul Irish has pretty complete list of what triggers repaint here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a https://gist.github.com/paulirish/5d52fb081b3570c81e3a
datashovel 10y ago
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.
anotheryou 10y ago
Great! Now how do I do it for high and low pixel density? I wonder why there is no centimeters or something in css, maybe because historically it didn't matter and was not known to the browser...

126 points by bpierre 10y ago

I'm working on an Ionic2 project right now and we talked about a lot of this stuff and the desire for a `min-font-size` and `max-font-size`-like CSS rules. This is great stuff, can't wait to share this with my team.

err4nt 10y ago
Did somebody say min-font-size and max-font-size? I've got a demo of the lock-style implementation they are talking about in the article here: http://codepen.io/tomhodgins/pen/QEVbwR http://codepen.io/tomhodgins/pen/QEVbwR And another, JavaScript-powered version that I think is closer to how min-font-size or max-font-size would work if implemented as a CSS property here: http://codepen.io/tomhodgins/pen/bZxvjg http://codepen.io/tomhodgins/pen/bZxvjg
- marpstar 10y ago
  our solution definitely ended up looking like your first example. it wasn't that solving the problem was particularly difficult, but just something we hadn't really run into. previous approaches of just using em and rem were working fine for the most part, but for one particular use case we wanted more.

mirap 10y ago

It would be great to inhereit from other element. Like h1 { font-size: calc( othertext.font-size + 10px );}

tobr 10y ago
Font size is already inherited. `font-size: calc(1em + 10px);` should do basically that.

muthdra 10y ago

dat line-height demo tho I remember having a lot of trouble with this when reading medium.com posts on mobile

Animats 10y ago

Why call linear interpolation a "lock"? It's amusing to see "calc" in CSS. You're only allowed the operators + - * /. No functions. Want to bet people start demanding user-defined functions?

prashnts 10y ago
The article essentially talks about producing something that is: font-size, line-height = function(viewport_width, max, min) in CSS. I think a closer analogy would be comparing it to timing/easing functions, rather than linear interpolation.
majewsky 10y ago
> Want to bet people start demanding user-defined functions? Doesn't Sass/SCSS already do that?
- spartanatreyu 10y ago
  It does but just like css variables it'll eventually be rolled into css or inspire something else that performs a similar function that gets rolled into css. "Eventually"
Rafert 10y ago
It refers to a waterlock, as explained in the linked Tim Brown blog post: http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/ http://blog.typekit.com/2016/08/17/flexible-typography-with-...
- kevhito 10y ago
  I agree that "lock" is a really poorly chosen word here. The explanation and diagram with a canal lock on that page is... unusual. It's a cutaway diagram of a physical canal lock, re-purposed as an mathematical graph (with x as the "viewport width" independent axis, and y as the "line height" dependent axis). But then it keeps the center portion moving up and down as if it is still a canal lock, so it can't really be a mathematical function at all. The word "clamped" should have been used instead of "lock". They just want the text size to scale linearly with page width, but they want to "clamp" the text size so that it always stays within some reasonable (min, max) range. They could have also called it "piecewise linear".

sametmax 10y ago

WARNINGS apply: remember that any calculation in CSS is re-evaluated everytime the mouse moves, which means it's a bit performance issue.

majewsky 10y ago
It's a simple optimization to only reevaluate a formula when the constituent variables change (in these cases, the viewport sizes and root font size). I know that at least Qt Quick implements this optimization, and I would assume that browser developers already do that, too.
- amelius 10y ago
  Yes, but browser vendors can choose whether they optimize it, so don't count on it!
jordanlev 10y ago
Is this true? I've never seen this mentioned anywhere, and some googling doesn't show me any mention of this. Do you have a reference to something that verifies this and/or explains it? I can totally understand how CSS expressions would be re-evaluated due to a repaint (resizing the window, manipulating DOM elements with javascript, etc)... but it doesn't make any sense that simply moving your mouse would cause this.
- solidr53 10y ago
  Not true. Read about reflow or layout trashing. Paul Irish has pretty complete list of what triggers repaint here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a https://gist.github.com/paulirish/5d52fb081b3570c81e3a

datashovel 10y ago

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.

anotheryou 10y ago

Great! Now how do I do it for high and low pixel density? I wonder why there is no centimeters or something in css, maybe because historically it didn't matter and was not known to the browser...