diff options
| author | Rasmus Andersson <rasmus@notion.se> | 2018-09-10 20:21:55 +0300 |
|---|---|---|
| committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:37:35 +0300 |
| commit | 045c98c1c7441fb0f2c4e6dfe866fe5e3f78defe (patch) | |
| tree | fbb9310e5863473a29aa0c2576a66f382ed8a31b /docs/lab/var.html | |
| parent | 69d824fc5bf9ba28f664f6d20fe0da91b82bd1a5 (diff) | |
| download | inter-045c98c1c7441fb0f2c4e6dfe866fe5e3f78defe.tar.xz | |
website
Diffstat (limited to 'docs/lab/var.html')
| -rw-r--r-- | docs/lab/var.html | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/docs/lab/var.html b/docs/lab/var.html new file mode 100644 index 000000000..947b8d6c5 --- /dev/null +++ b/docs/lab/var.html @@ -0,0 +1,208 @@ +<!DOCTYPE HTML> +<html lang="en"> +<head> +<meta charset="utf-8"> +<link href="../inter-ui.css" rel="stylesheet"> +<style type="text/css"> + +@font-face { + font-family: 'Inter UI var'; + font-weight: 400 900; + src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"), + url('../font-files/Inter-UI.var.woff2') format("woff2-variations"); +} + +html { + font-family: 'Inter UI', sans-serif; + font-size: 14px; + letter-spacing: 0.001em; +} +body { + margin: 0; + padding: 0; +} + +.sample { + padding: 40px 40px 40px 35px; + font-size: 96px; + letter-spacing: -0.03em; + /*font-variation-settings: 'wght' 400, 'ital' 0;*/ +} + +@supports (font-variation-settings: normal) { + html { + font-family: 'Inter UI var', sans-serif; + } +} + +label { + user-select: none; +} + +.ctrl { + display: flex; + /*justify-content:center;*/ + align-items:center; + background: #e5e5e5; + color: #333; + padding:20px 20px 20px 40px; +} + .ctrl input { + margin:0 8px; + } + .ctrl label { + display: flex; + /*justify-content:center;*/ + align-items:center; + margin-right:20px; + } + +</style> +</head> +<body> +<div class="ctrl"> + <label> + Weight: + <input type="range" value="400" min="400" max="900" name="weight"> + </label> + <label> + Italic: + <input type="range" value="0" min="0" max="100" name="italic"> + </label> + <label> + <input type="checkbox" name="animate"> + Animate + </label> +</div> +<div class="sample" contenteditable> +Inter UI 2.6 coming soon <br> +Refined glyphs & kerning <br> +Variable weight axis <br> +Major overhaul 123ABC! <br> +</div> +<script type="text/javascript"> + +var state = { + weight: 400, + italic: 0, +} + +var samples = document.querySelectorAll('div.sample') +var weightInput = document.querySelector('[name="weight"]') +var italicInput = document.querySelector('[name="italic"]') + +weightInput.value = String(state.weight) +italicInput.value = String(state.italic) + +function updateFontVariationSettings() { + for (let i = 0; i < samples.length; i++) { + let sample = samples[i] + // sample.style.fontVariationSettings = + // `'wght' ${state.weight}, 'ital' ${state.italic}` + sample.style.fontVariationSettings = + `'wght' ${state.weight}, 'ital' ${state.italic}` + } +} + +function setWeight(weight) { + state.weight = weight + updateFontVariationSettings() +} + +function setItalic(italic) { + state.italic = italic + updateFontVariationSettings() +} + +// monotime() :float milliseconds +// +var monotime = ( + window.performance !== undefined && window.performance.now ? function() { + return window.performance.now() + } : Date.now ? function() { + return Date.now() + } : function() { + return (new Date()).getTime() + } +) + + +var isAnimating = false +function startAnimation() { + if (isAnimating) { + return + } + weightInput.disabled = true + isAnimating = true + let v = 0 + let wmin = parseFloat(weightInput.min) + , wmax = parseFloat(weightInput.max) + , imin = parseFloat(italicInput.min) + , imax = parseFloat(italicInput.max) + , wspeed = 200 // lower is faster; time divisor + , ispeed = 800 + , clamp = 0.001 + , startTime = monotime() + function update() { + let r = 0, v = 0 + + r = (1 + Math.sin((monotime() - startTime) / wspeed)) * 0.5 + v = (wmin * (1 - clamp)) + (((wmax * (1 + clamp)) - (wmin * (1 - clamp))) * r) + v = Math.max(wmin, Math.min(wmax, v)) + setWeight(v) + weightInput.value = v + + r = (1 + Math.sin((monotime() - startTime) / ispeed)) * 0.5 + v = (imin * (1 - clamp)) + (((imax * (1 + clamp)) - (imin * (1 - clamp))) * r) + v = Math.max(imin, Math.min(imax, v)) + setItalic(v) + italicInput.value = v + + if (isAnimating) { + requestAnimationFrame(update) + } + } + update() +} + +function stopAnimation() { + isAnimating = false + weightInput.disabled = false + weightInput.value = String(state.weight) +} + +// UI control: weight slider +weightInput.addEventListener('input', + weightInput.valueAsNumber !== undefined ? ev => { + setWeight(weightInput.valueAsNumber) + } : ev => { + setWeight(parseFloat(weightInput.value)) + } +) + +// UI control: italic slider +italicInput.addEventListener('input', + italicInput.valueAsNumber !== undefined ? ev => { + setItalic(italicInput.valueAsNumber) + } : ev => { + setItalic(parseFloat(italicInput.value)) + } +) + +// UI control: animate +var animateInput = document.querySelector('[name="animate"]') +if (!window.requestAnimationFrame) { + animateInput.disabled = true +} else { + animateInput.addEventListener('change', ev => { + if (animateInput.checked) { + startAnimation() + } else { + stopAnimation() + } + }) +} + +</script> + </body> +</html>
\ No newline at end of file |