From 6f6f6683ed47818d44864452a94dbb2bded9aab6 Mon Sep 17 00:00:00 2001
From: Rasmus Andersson <rasmus@notion.se>
Date: Sun, 30 Sep 2018 12:34:27 -0700
Subject: [PATCH] web: VF: slant axis instead of italic axis

---
 docs/inter-ui.css   |   7 ++-
 docs/lab/index.html |  51 ++++++++-------
 docs/lab/lab.css    |   8 +--
 docs/lab/var.html   | 149 +++++++++++++++++++++++++-------------------
 docs/res/base.css   |   2 +-
 5 files changed, 119 insertions(+), 98 deletions(-)

diff --git a/docs/inter-ui.css b/docs/inter-ui.css
index 27227a6b4..76bfc9379 100644
--- a/docs/inter-ui.css
+++ b/docs/inter-ui.css
@@ -101,7 +101,9 @@
 }
 
 /*
-Single variable font.
+------------------------------------------------------------------------------
+Alternative to the above: Single variable font.
+
 Note that you may want to do something like this to make sure you're serving
 constant fonts to older browsers:
 
@@ -117,7 +119,8 @@ html {
 */
 @font-face {
   font-family: 'Inter UI var';
-  font-weight: 400 900; /* safe weight range */
+  font-weight: 400 900;
+  font-style: oblique 0deg 10deg;
   src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
        url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2");
 }
diff --git a/docs/lab/index.html b/docs/lab/index.html
index 7d0a37198..2f5862ebf 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -1037,6 +1037,7 @@ for (const ch of uniqueChars) {
 @font-face {
   font-family: 'Inter-UI-var-VERSION';
   font-weight: 400 900;
+  font-style: oblique 0deg 10deg;
   src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations");
 }
 
@@ -1134,9 +1135,11 @@ for (const ch of uniqueChars) {
 }
 
 @font-face {
+  /* Note: Not hinted */
   font-family: 'Inter-UI-var-hinted-VERSION';
   font-weight: 400 900;
-  src: url('fonts/var-hinted/Inter-UI.var.woff2') format("woff2-variations");
+  font-style: oblique 0deg 10deg;
+  src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations");
 }
 
 /* ----------------------------------------------------------------------- */
@@ -1222,9 +1225,9 @@ document.head.appendChild(fontCSS)
           <input type="number" value="400" step="1" min="400" max="900" name="varWeightNum">
         </label>
         <label class="label-and-value">
-          <span>Italic:</span>
-          <input type="range" value="0" min="0" max="100" name="varItalic">
-          <input type="number" value="0" step="1" min="0" max="100" name="varItalicNum">
+          <span>Slant:</span>
+          <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
+          <input type="number" value="0" step="1" min="0" max="10" name="varSlantNum">
         </label>
       </div>
 
@@ -1781,9 +1784,9 @@ function main() {
   })
 
   let usingVarFont = false
-  var varWeightRange, varItalicRange
+  var varWeightRange, varSlantRange
   var varWeightSettingValueImpl = false
-  var varItalicSettingValueImpl = false
+  var varSlantSettingValueImpl = false
 
   let currentBodyWeightClass = null
   vars.bind('weight', (e, v) => {
@@ -1796,32 +1799,32 @@ function main() {
 
   var italicVar = vars.bind('italic', (e, on) => {
     document.body.classList[on ? 'add' : 'remove']('italic')
-    if (usingVarFont && !varItalicSettingValueImpl) {
-      if (varItalicRange) {
-        varItalicRange.setValue(on ? 100 : 0)
+    if (usingVarFont && !varSlantSettingValueImpl) {
+      if (varSlantRange) {
+        varSlantRange.setValue(on ? 100 : 0)
       }
       updateVarFont()
     }
   })
 
   let varState = {
-    weight: 400,
-    italic: 0,
+    weight: 400, // 400-900
+    slant: 0,    // 0-10
   }
 
   function updateVarFont() {
     if (usingVarFont) {
-      varItalicSettingValueImpl = true
-      if (varState.italic <= 0.1) {
-        varState.italic = 0
+      varSlantSettingValueImpl = true
+      if (varState.slant <= 0.1) {
+        varState.slant = 0
         italicVar.setValue(false)
       } else {
         italicVar.setValue(true)
       }
-      varItalicSettingValueImpl = false
+      varSlantSettingValueImpl = false
       setCSSProp(
         "font-variation-settings",
-        `"wght" ${varState.weight}, "ital" ${varState.italic}`
+        `"wght" ${varState.weight}, "slnt" ${varState.slant}`
       )
     } else {
       setCSSProp("font-variation-settings", null)
@@ -1851,9 +1854,9 @@ function main() {
     }
   })
 
-  let varItalicNum = vars.bind('varItalicNum', (e, v) => {
-    if (varItalicRange && !varItalicSettingValueImpl) {
-      varItalicRange.setValue(v)
+  let varSlantNum = vars.bind('varSlantNum', (e, v) => {
+    if (varSlantRange && !varSlantSettingValueImpl) {
+      varSlantRange.setValue(v)
     }
   })
 
@@ -1870,11 +1873,11 @@ function main() {
     return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
   })
 
-  varItalicRange = vars.bind('varItalic', (e, v) => {
-    varState.italic = v
-    varItalicSettingValueImpl = true
-    varItalicNum.setValue(v)
-    varItalicSettingValueImpl = false
+  varSlantRange = vars.bind('varSlant', (e, v) => {
+    varState.slant = v
+    varSlantSettingValueImpl = true
+    varSlantNum.setValue(v)
+    varSlantSettingValueImpl = false
     updateVarFont()
   }, (e, prevValue, ev) => {
     if (prevValue === undefined) {
diff --git a/docs/lab/lab.css b/docs/lab/lab.css
index 719bc949c..7c799feec 100644
--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@@ -154,16 +154,10 @@ samples, boxes {
 samples {
   display: flex;
   padding: 24px 0;
-  width:100%;
+  width: 100%;
 }
 body.italic samples {
   font-style: italic;
-}
-body.varfont.italic samples {
-  /* [BUG] (Safari 11.1) font-style:italic and ital axis is not
-     mutually exclusive, meaning we have to set either or. */
-  font-style: normal;
-  font-variation-settings: 'ital' 100;
 }
   sample {
     margin: 0;
diff --git a/docs/lab/var.html b/docs/lab/var.html
index 0ed45c444..6f95b9a2c 100644
--- a/docs/lab/var.html
+++ b/docs/lab/var.html
@@ -8,6 +8,7 @@
 @font-face {
   font-family: 'Inter UI var';
   font-weight: 400 900;
+  font-style: oblique 0deg 10deg;
   src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"),
        url('../font-files/Inter-UI.var.woff2') format("woff2-variations");
 }
@@ -24,9 +25,9 @@ body {
 
 .sample {
   padding: 40px 40px 40px 35px;
-  font-size: 96px;
+  font-size: var(--size);
   letter-spacing: -0.03em;
-  /*font-variation-settings: 'wght' 400, 'ital' 0;*/
+  font-variation-settings: 'wght' var(--weight), 'slnt' var(--slant);
 }
 
 @supports (font-variation-settings: normal) {
@@ -61,58 +62,62 @@ label {
 </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>Weight: <input type="range" value="400" min="400" max="900" name="weight"></label>
+  <label>Slant: <input type="range" value="0" min="0" max="10" step="0.01" name="slant"></label>
+  <label>Size: <input type="range" value="96" min="6" max="400" name="size"></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>
+Inter UI 3.0 is variable and flexible<br>
+Variable weight axis<br>
+Variable slant/oblique axis<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+1234567890?!()[]{}&*^%$#@~&lt;&gt;<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"]')
+var slantInput = document.querySelector('[name="slant"]')
+var sizeInput = document.querySelector('[name="size"]')
 
-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}`
-  }
+var ui = {
+  weight: parseFloat(weightInput.value),
+  slant:  parseFloat(slantInput.value),
+  size:   parseFloat(sizeInput.value),
+
+  setState(props) {
+    for (let k in props) {
+      if (k in this) {
+        this[k] = props[k]
+      }
+    }
+    this.update()
+  },
+
+  update() {
+    let s = document.body.style
+    s.setProperty(`--weight`, this.weight)
+    s.setProperty(`--slant`, this.slant)
+    s.setProperty(`--size`, `${this.size}px`)
+    // for (let i = 0; i < samples.length; i++) {
+    //   let sample = samples[i]
+    //   // sample.style.fontVariationSettings =
+    //   //   `'wght' ${ui.weight}, 'ital' ${ui.slant}`
+    //   sample.style.fontVariationSettings =
+    //     `'wght' ${ui.weight}, 'slnt' ${ui.slant}`
+    // }
+  },
 }
 
-function setWeight(weight) {
-  state.weight = weight
-  updateFontVariationSettings()
-}
-
-function setItalic(italic) {
-  state.italic = italic
-  updateFontVariationSettings()
-}
+ui.update()
 
 // monotime() :float  milliseconds
 //
@@ -133,13 +138,13 @@ function startAnimation() {
     return
   }
   weightInput.disabled = true
-  italicInput.disabled = true
+  slantInput.disabled = true
   isAnimating = true
   let v = 0
   let wmin = parseFloat(weightInput.min)
     , wmax = parseFloat(weightInput.max)
-    , imin = parseFloat(italicInput.min)
-    , imax = parseFloat(italicInput.max)
+    , imin = parseFloat(slantInput.min)
+    , imax = parseFloat(slantInput.max)
     , wspeed = 200    // lower is faster; time divisor
     , ispeed = 800
     , clamp = 0.001
@@ -150,15 +155,17 @@ function startAnimation() {
     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)
+    ui.weight = 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
-    
+    ui.slant = v
+    slantInput.value = v
+
+    ui.update()
+
     if (isAnimating) {
       requestAnimationFrame(update)
     }
@@ -169,28 +176,42 @@ function startAnimation() {
 function stopAnimation() {
   isAnimating = false
   weightInput.disabled = false
-  italicInput.disabled = false
-  weightInput.value = String(state.weight)
-  italicInput.value = String(state.italic)
+  slantInput.disabled = false
+  weightInput.value = String(ui.weight)
+  slantInput.value = String(ui.slant)
 }
 
-// UI control: weight slider
-weightInput.addEventListener('input',
-  weightInput.valueAsNumber !== undefined ? ev => {
-    setWeight(weightInput.valueAsNumber)
-  } : ev => {
-    setWeight(parseFloat(weightInput.value))
-  }
-)
+function bindRangeControl(rangeInput, handler) {
+  rangeInput.addEventListener('input',
+    rangeInput.valueAsNumber !== undefined ? ev => {
+      handler(rangeInput.valueAsNumber)
+    } : ev => {
+      handler(parseFloat(rangeInput.value))
+    }
+  )
+}
 
-// UI control: italic slider
-italicInput.addEventListener('input',
-  italicInput.valueAsNumber !== undefined ? ev => {
-    setItalic(italicInput.valueAsNumber)
-  } : ev => {
-    setItalic(parseFloat(italicInput.value))
-  }
-)
+// UI controls
+bindRangeControl(weightInput, weight => ui.setState({ weight }) )
+bindRangeControl(slantInput, slant => ui.setState({ slant }) )
+bindRangeControl(sizeInput, size => ui.setState({ size }) )
+
+// weightInput.addEventListener('input',
+//   weightInput.valueAsNumber !== undefined ? ev => {
+//     setWeight(weightInput.valueAsNumber)
+//   } : ev => {
+//     setWeight(parseFloat(weightInput.value))
+//   }
+// )
+
+// UI control: slant slider
+// slantInput.addEventListener('input',
+//   slantInput.valueAsNumber !== undefined ? ev => {
+//     setSlant(slantInput.valueAsNumber)
+//   } : ev => {
+//     setSlant(parseFloat(slantInput.value))
+//   }
+// )
 
 // UI control: animate
 var animateInput = document.querySelector('[name="animate"]')
diff --git a/docs/res/base.css b/docs/res/base.css
index c0e677ae3..464d3db56 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -109,7 +109,7 @@ num { /* number */
 
 em, i, .italic {
   font-style: italic;
-  font-variation-settings: 'ital' 100;
+  /*font-variation-settings: 'slnt' 10;*/
 }
 
 small {