LEC - Linear Equation to Calc()

stand-alone version of linearToCalc v1.1

introduction

You may already have come across demo's MadeByMike or by TrentWalton on Codepen (and a few others: Fluid Typography, Simplified Fluid Typography and Flexible typography with CSS locks) on how to gain control over responsive typography (make sure to check them out). I did too and I found their ideas awesome. But, as I am quite bad at math, it took me quite a while to grasp their equations for responsive sizing of webpage fonts.
As you may know, most (if not all) mathematical equations have a name, but unfortunately, both posters made no mention of the names of their formulas making it even harder for me to understand what it was all about.

the hard part

definitions

To save you the trouble of having to search online like me, those formulas are called Linear equations defining the 'equation of a straight line'. They come in several, so called, 'forms':

Standard form: Ax+By=C (writing linear equations)
y as a linear function of x: f(x)=a+bx
Slope Intercept, y-intercept or vertical intercept form: y=mx+b (depending on country: ax+b, mx+c, mx+d, mx+k, etc.)
The point slope form: y-y1=m(x-x1) or simplified: y=y1+m(x-x1)
and quite a few more, but we will be using variations of the ones above from here on…

With above equations you can calculate all points making up a line running through two points. Let this sink in for a moment: two points, line through them, get all other points on that line…

why and how to use

Defining an element's size values (font-size, width, height, padding, margin, etc.)

Initially I used a graph I had created on GeoGebra.org which served me well for a while, ERS linear equations. A simple XY-graph with a few sample lines depicting equations I use in my webpages.

p1(320,90)
p2(1920,270)
y = 11.25x + 54

p1(320,90)
p2(1920,540)
y = 28.125x

Although both below equations yield the same result, a CSS rule like
equation 1: font-size: calc((mx + b) * ratio)
e.g. width: calc((11.25vmin + 54px) * 1.77778)

is much easier to read and maintain (and is less CPU intensive) than
equation 2: font-size: calc((y1 + (y2 - y1) / (x2 - x1) * (x - x1)) * ratio)
e.g. width: calc((90px + (270 - 90) / (1920 - 320) * (100vmin - 320px)) * 1.77778)

Be smart about this, don't waste your precious time on fixing pixel level details no-one but you cares about anyway. No matter how pixel perfect your site is, it will only be as good as the content you have to offer.

linearToCalc 1.1

For that reason I created a simple tool (below form)

points

p1(x1,y1)

p2(x2,y2)

result

multiply with

units

decimals

CSS

create 'calc()'

comment

!important

demo toggles

The demo toggles showcase a few extra tricks used in this document.

edit card rules

larger root font

show outlines

document [dir]

checkbox alt 1

stand-alone

tl;dr

create calc() version of y=mx+b
for points p1(x1,y1) and p2(x2,y2)
from 'point slope form'

full specifications below…

resulting equation

example cards CSS rules

example cards

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

examples of calc() used in this document

<html> fontsize
default: (320,14)(1280,20)
calc(0.625vmin + 0.75rem)

larger: (320,16)(1280,22)
calc(0.625vmin + 0.875rem)

Favours browser fontsize settings by using REM. All document text will have this fontsize, unless specifically defined differently (like a few examples here).

editable card <style> fontsize
(320,8)(1280,17)
calc(0.9375vmin + 0.3125rem)

Will show most code without wrapping, but becomes less readable on smartphones.

[data-typo*="hero"]
(320,12)(1280,66)
calc(5.625vmin - 0.375rem)

'hero' and 'outro' large fontsize.
MQ: 12px at max vp-size 320px, otherwise it becomes much smaller than [subline] on smartphones.

[data-typo*="subline"]
(320,12)(1280,18)
calc(0.625vmin + 0.625rem)

'hero' and 'outro' subline fontsize

[band*="padded"]
T/B padding: (320,32)(1920,72)
calc(2.5vh + 24px)

L/R padding: (320,8)(1920,320)
calc(19.5vw - 54.4px)

main document padding.

Lorem Ipsum

Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae.

Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem est. Mel ex oporteat consectetuer.

Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex. Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.

Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel phaedrum conceptam ut.

Nam id utinam referrentur, similique intellegebat ad mel, eu nobis aeterno qui. Ad quodsi cetero sed, deserunt disputando nam an, veri viderer consetetur vel an. Zril vivendo pro no, oratio scripta quo eu, aeque elaboraret duo et. Ea nonumy essent sed, enim cetero pri an. An zril facete ius.

l;bra - how to use linear equations for responsive sizing

Much has been said already about responsive design, the "why-and-how", the "do-and-don't" and, just like me, you will have come accross all kinds of sizing formulas explained by friendly fellow developers.

Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem est. Mel ex oporteat consectetuer.

calculate result using linear equation

'slope intercept' form

y = mx + b

y = (y2 - y1) / (x2 - x1) + (y1 - (y2 - y1) / (x2 - x1) * x1)

'point slope' form

y - y1 = m(x - x1) => y = y1 + m(x - x1)

y = y1 + (y2 - y1) / (x2 - x1) * (x - x1)

As the 'point slope' form is shortest, linearToCalc uses that equation to create the CSS calc()

for points

p1: (x1,y1)

x1 - minimum viewport size

y1 - size at minimum viewport

p2: (x2,y2)

x2 - maximum viewport size

y2 - size at maximum viewport

where

y: equation result

rise - how far up the line

m: (y2 - y1) / (x2 - x1)

slope - steepness of the line (delta Y / delta X) or (rise / run)

x: 100vmin

run - how far along the line (fixed 100 vmin, vh, vw or vmax)

b: y1 - m * x1

Y-intercept - where the line crosses the Y-axis (value at viewport size = 0)

x-scale:

viewport size (e.g. 100vmin: 0 to 1920px and grid step 10, 20, 40, 80 or 160)

y-scale:

element size (e.g. font size: 0 to 48 and grid step 1, 2, 4, 8 or 16)