31:[] 2f:{"title":"Clamp Based CSS Property Generator for Fluid Typography","cells":[{"id":0,"value":"# Clamp Based CSS Property Generator for Fluid Typography","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"Plot.plot({\n width: size,\n height: size / 2,\n x: {\n label: \"Viewport size →\"\n },\n y: {\n label: \"↑ Font size \",\n grid: true\n },\n marks: [\n Plot.line(pts),\n Plot.line([\n [0, Math.min(y1, y2)],\n [Math.min(x1, x2), Math.min(y1, y2)]\n ]),\n Plot.line([\n [Math.max(x1, x2), Math.max(y1, y2)],\n [Math.max(x1, x2) + Math.abs(x2 - x1), Math.max(y1, y2)]\n ]),\n Plot.ruleX([0, x1, x2])\n // Plot.ruleY([0])\n // Plot.dot(pts)\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"_All inputs are in pixels._","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"viewof xs = view`\n

Viewport

${[\"0\", Inputs.text({ label: \"Min\", value: 320 })]}

→

${[\"1\", Inputs.text({ label: \"Max\", value: 1140 })]}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof ys = view`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"## Result","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"md`\n\\`\\`\\`css\n:root {\n --font-size: clamp(${fixDecimal(y1 / remBase)}rem, calc(${fixDecimal(\n b / remBase\n)}rem + ${fixDecimal(m * 100)}vw), ${fixDecimal(y2 / remBase)}rem);\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"x1 = +xs[0]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"x2 = +xs[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"y1 = +ys[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"y2 = +ys[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"m = (y2 - y1) / (x2 - x1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"b = y1 - m * x1\n//b = (x1 * y2 - x2 * y1) / (x1 - x2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"fixDecimal = (num, decimals = 2) =>\n Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"remBase = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"size = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"pts = build_samples((x) => m * x + b, Math.min(x1, x2), Math.max(x1, x2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"tachyons","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"ns = Inputs.text().classList[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"import { build_samples } from \"@mcmcclur/adaptive-plotter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"import { tachyons } from \"@saneef/tachyons-css\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"## Credits\n\nBased on the article, [Modern Fluid Typography Using CSS Clamp](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}

Viewport

Font Size