The math of CSS locks | Hacker News Reader

The math of CSS locks

fvsch.com

126 pointsbpierre22 comments

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?

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.

> Want to bet people start demanding user-defined functions?

Doesn't Sass/SCSS already do that?

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"

It refers to a waterlock, as explained in the linked Tim Brown blog post: http://blog.typekit.com/2016/08/17/flexible-typography-with-...

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".

Lock makes sense to me, even if I don't think it is the best description.

There are two water levels, high and low side of the lock.

The lock smoothly transitions you from one level to the other.

A media query without the transition would be like navigating a boat down a waterfall rather than down a lock; jarring!

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.

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

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

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.

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?

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

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-m...

CSS 'calc' has multiplication, so polynomials are within reach. Here's a nice easing function reference page, with math: 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.

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

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

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...

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

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.

Yes, but browser vendors can choose whether they optimize it, so don't count on it!

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.

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

dat line-height demo tho

I remember having a lot of trouble with this when reading medium.com posts on mobile

Reply on news.ycombinator.com