
The math of CSS locks - bpierre
http://fvsch.com/code/css-locks/
======
Animats
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?

~~~
Rafert
It refers to a waterlock, as explained in the linked Tim Brown blog post:
[http://blog.typekit.com/2016/08/17/flexible-typography-
with-...](http://blog.typekit.com/2016/08/17/flexible-typography-with-css-
locks/)

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

~~~
Cogito
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!

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

------
datashovel
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
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-m...](https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-
exciting-development-in-css-youve-never-heard-of/)

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

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

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

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

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

~~~
jordanlev
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
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)

------
muthdra
dat line-height demo tho

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

