Negative slant angle changes to website

docs/index-var.css

@@ -108,5 +108,5 @@
   font-size: var(--var-size);
   letter-spacing: var(--var-letterSpacing);
   line-height: var(--var-lineHeight);
-  font-variation-settings: 'wght' var(--var-weight), 'slnt' var(--var-slant);
+  font-variation-settings: 'wght' var(--var-weight), 'slnt' calc(-1 * var(--var-slant));
 }

docs/index-var.js

@@ -90,7 +90,12 @@ var ui = {
     let s = sample.style
     for (let k in this.state) {
       let f = this.formatters[k]
-      s.setProperty(`--var-${k}`, f ? f(this.state[k]) : this.state[k])
+      let v = this.state[k]
+      if (k == "slant") {
+        // negate slant value (negative values causes positive grades)
+        v = -v
+      }
+      s.setProperty(`--var-${k}`, f ? f(v) : v)
     }
   },
 }

docs/lab/index.html

@@ -262,8 +262,8 @@ b \t \u1d47 \t U+1D47 \t |   b \t
 c \t \u1d9c \t U+1D9C \t |   c \t
 d \t \u1d48 \t U+1D48 \t |   d \t
 e \t \u1d49 \t U+1D49 \t |   e \t \u2091 \t U+2091
-f \t \u1da0 \t U+1DA0 \t |   f \t 
+f \t \u1da0 \t U+1DA0 \t |   f \t
-g \t \u1d4d \t U+1D4D \t |   g \t 
+g \t \u1d4d \t U+1D4D \t |   g \t
 h \t \u02b0 \t U+02B0 \t |   h \t \u2095 \t U+2095
 i \t \u1da6 \t U+1DA6 \t |   i \t \u1D62 \t U+1D62
 j \t \u02b2 \t U+02B2 \t |   j \t \u2C7C \t U+2C7C
@@ -273,16 +273,16 @@ m \t \u1d50 \t U+1D50 \t |   m \t \u2098 \t U+2098
 n \t \u207f \t U+207F \t |   n \t \u2099 \t U+2099
 o \t \u1d52 \t U+1D52 \t |   o \t \u2092 \t U+2092
 p \t \u1d56 \t U+1D56 \t |   p \t \u209A \t U+209A
-q \t \u146b \t U+146B \t |   q \t 
+q \t \u146b \t U+146B \t |   q \t
 r \t \u02b3 \t U+02B3 \t |   r \t \u1D63 \t U+1D63
 s \t \u02e2 \t U+02E2 \t |   s \t \u209B \t U+209B
 t \t \u1d57 \t U+1D57 \t |   t \t \u209C \t U+209C
 u \t \u1d58 \t U+1D58 \t |   u \t \u1D64 \t U+1D64
 v \t \u1d5b \t U+1D5B \t |   v \t \u1D65 \t U+1D65
-w \t \u02b7 \t U+02B7 \t |   w \t 
+w \t \u02b7 \t U+02B7 \t |   w \t
 x \t \u02e3 \t U+02E3 \t |   x \t \u2093 \t x \t U+2093
-y \t \u02b8 \t U+02B8 \t |   y \t 
+y \t \u02b8 \t U+02B8 \t |   y \t
-z \t \u1dbb \t U+1DBB \t |   z \t 
+z \t \u1dbb \t U+1DBB \t |   z \t
 `)
 
 
@@ -332,16 +332,16 @@ AO AU AT AY BT BY CT ET Ec
 ",x," ',x,' ‘,x,’ “,x,” x,‛ x,‟
 L" L' L’ L” L‛ L‟
 aufkauf aufhalt aufbleib
-ver/fl ixt auflassen 
+ver/fl ixt auflassen
 ho/f_f e auffassen
 /fi le aufißt raufjagen fıne
 auf/fi nden Tief/fl ieger
 Sto/f_f los Mu/f_f on Sto/f_f igel O/f_f zier
-Ra/f_f band Tu/f_f höhle Su/f_f kopp 
+Ra/f_f band Tu/f_f höhle Su/f_f kopp
 führen fördern fähre
 wegjagen Bargfeld
 kyrie afro arte axe luvwärts
-Gevatter wann 
+Gevatter wann
 ever gewettet severe
 davon gewonnen down
 wichtig recken
@@ -411,7 +411,7 @@ nun (...) und ([...] sein
 «sie». «das», «an»; «ich»:
 »sie.« »das,« »an!« »ich?«
 «sie.» «das,» «an!» «ich?»
-›sie‹. ›da‹, ›an‹; ›ich‹: 
+›sie‹. ›da‹, ›an‹; ›ich‹:
 ‹sie›. ‹das›, ‹an›; ‹ich›:
 ›sie.‹ ›das,‹ ›an!‹ ›ich?‹
 ‹sie.› ‹das,› ‹an!› ‹ich?›
@@ -427,7 +427,7 @@ auf//fall den//im den//ärger
 da//leider auf//aber I//I
 etwa 50% haben 37° im
 £50 und ¥20 sind $30 und €60
-den §235 sowie #35 
+den §235 sowie #35
 4mal Seite 3f und 12/f_f .
 Der §45a in den 20ern
 von 18:30 bis 20:15 Uhr
@@ -678,7 +678,7 @@ function getGlyphInfo(cb) {
   fetch('glyphinfo.json').then(r => r.json()).then(glyphinfo => {
     console.log('loaded glyphinfo.json')
     // { "glyphs": [
-    //     [name :string, isEmpty: 1|0, unicode? :string|null, 
+    //     [name :string, isEmpty: 1|0, unicode? :string|null,
     //      unicodeName? :string, color? :string|null],
     //     ["A", 0, 65, "LATIN CAPITAL LETTER A", "#dbeaf7"],
     //     ...
@@ -866,7 +866,7 @@ samples.set('Word mix (combo pairs)', {
       return '<em>loading words...</em>'
     }
 
-    // TODO: randomize order, or maybe better to zip on 
+    // TODO: randomize order, or maybe better to zip on
     // let combs1 = combs.filter(c => c.indexOf(ch) != -1)
     // or sometihng like that
 
@@ -1581,7 +1581,7 @@ document.head.appendChild(fontCSS)
       <box contenteditable spellcheck="false" class="primaryFont positive"><span>Rectangle</span></box>
       <box contenteditable spellcheck="false" class="primaryFont positive tight"><span>Rectangle</span></box>
       <box contenteditable spellcheck="false" class="primaryFont centered positive"><span>Rectangle</span></box>
-      
+
       <sep></sep>
 
       <box contenteditable spellcheck="false" class="secondaryFont showOnlyWithSecondarySample"><span>Rectangle</span></box>
@@ -2051,8 +2051,8 @@ function main() {
   })
 
   let varState = {
-    weight: 400, // 400-900
+    weight: 400, // 400..900
-    slant: 0,    // 0-10
+    slant: 0,    // 0..-10
   }
 
   function updateVarFont() {
@@ -2067,7 +2067,7 @@ function main() {
       varSlantSettingValueImpl = false
       setCSSProp(
         "font-variation-settings",
-        `"wght" ${varState.weight}, "slnt" ${varState.slant}`
+        `"wght" ${varState.weight}, "slnt" ${-varState.slant}`
       )
     } else {
       setCSSProp("font-variation-settings", null)
@@ -2200,7 +2200,7 @@ function main() {
     ev.preventDefault()
   }, {passive:false,capture:true})
 
-  
+
   vars.bind('lineHeight', lineHeightInput, (e, v) => {
     setCSSProp('line-height', v ? v + 'px' : null)
   }, (e, prevValue, ev) => {

docs/lab/var.html

@@ -33,7 +33,7 @@ body {
   padding: 40px 40px 40px 35px;
   font-size: var(--size);
   letter-spacing: -0.03em;
-  font-variation-settings: 'wght' var(--weight), 'slnt' var(--slant);
+  font-variation-settings: 'wght' var(--weight), 'slnt' calc(-1 * var(--slant));
 }
 
 @supports (font-variation-settings: normal) {
@@ -84,7 +84,7 @@ label {
   </select>
 </div>
 <div class="sample" contenteditable>
-Inter 3.0<br>
+Inter Typeface Family<br>
 Variable weight axis<br>
 Variable slant/oblique axis<br>
 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>

docs/var-test.html

@@ -1,18 +1,39 @@
-<!DOCTYPE HTML>
+---
+layout: none
+---
+{%
+
+for file in site.static_files %}{%
+  assign _path = file.path | remove_first: "/inter" %}{%
+  if _path == "/font-files/Inter.var.woff2" %}{%
+    assign inter_var_woff2_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  endif %}{%
+endfor
+
+%}<!DOCTYPE HTML>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
 
+/*
+
+Note on font file URLs:
+- The "v" parameter is used to ensure that the latest font file is used,
+  and not a past cached version.
+- The "t" parameters can be used to debug which of the "format(...)" the
+  web browser chose (i.e. by using a web browser's developer tools.)
+
+*/
+
 @font-face {
   font-family: 'Inter var experimental';
   font-weight: 100 900;
-  font-style: oblique 0deg 10deg;
+  font-style: oblique 0deg -10deg;
   font-named-instance: 'Regular';
-  src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"),
+  src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
-       url("font-files/Inter.var.woff2") format("woff2-variations"),
+       url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
-       url("font-files/Inter.var.woff2") format("woff2");
 }
 
 /* Fix for Safari where defining font-weight range casues regular style
@@ -20,11 +41,10 @@
 @font-face {
   font-family: 'Inter var experimental safari';
   /* DISABLE font-weight: 400 900; */
-  font-style: oblique 0deg 10deg;
+  font-style: oblique 0deg -10deg;
   font-named-instance: 'Regular';
-  src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"),
+  src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
-       url("font-files/Inter.var.woff2") format("woff2-variations"),
+       url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
-       url("font-files/Inter.var.woff2") format("woff2");
 }
 
 /* Alternate two-file setup used for italic where oblique degrees are not
@@ -34,18 +54,16 @@
   font-weight: 100 900;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("font-files/Inter-upright.var.woff2") format("woff2 supports variations(gvar)"),
+  src: url("font-files/Inter-upright.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
-       url("font-files/Inter-upright.var.woff2") format("woff2-variations"),
+       url("font-files/Inter-upright.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
-       url("font-files/Inter-upright.var.woff2") format("woff2");
 }
 @font-face {
   font-family: 'Inter var single-axis';
-  font-weight: 100 900;
+  /*font-weight: 100 900;*/
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("font-files/Inter-italic.var.woff2") format("woff2 supports variations(gvar)"),
+  src: url("font-files/Inter-italic.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
-       url("font-files/Inter-italic.var.woff2") format("woff2-variations"),
+       url("font-files/Inter-italic.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
-       url("font-files/Inter-italic.var.woff2") format("woff2");
 }
 
 
@@ -78,14 +96,28 @@ body {
   }
 }
 
+.single-axis {
+  font-family: 'Inter var single-axis', sans-serif;
+}
+
 .samples {
   display: flex;
   flex-wrap: wrap;
 }
-
+.samples > h2 {
+  flex: 1 0 100%;
+  padding-left:20px;
+  line-height:2;
+  padding-top: 1em;
+  border-top:1px solid #ccc;
+  margin-top: 1em;
+}
 .weightset {
   /*background: pink;*/
-  margin: 10px;
+  margin: 20px;
+  width: 200px;
+  overflow:hidden;
+  white-space: nowrap;
 }
 
 .intro {
@@ -108,12 +140,14 @@ body {
 }
 
 h1, h2 {
-  margin:0;
+  margin: 0;
-  font-size: 2em;
+  font-size: 2.5em;
+  font-weight: 700;
+  letter-spacing: -0.025em;
 }
 h2 {
-  font-size: 1.2em;
+  font-size: 1.5em;
-  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 ul {
   padding-left: 1.2em;
@@ -157,51 +191,108 @@ if (
   <p>
     Effective <tt>font-family: </tt><tt id="family-in-use"></tt>
   </p>
-  <h2>Known issues:</h2>
+  <h2>Known issues with variable fonts:</h2>
   <ul>
     <li>
-      <b>Safari 12.0:</b>
+      <b>Most browsers as of August 2019:</b>
-      Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes
+      <ul>
-      slnt axis to be maxed out by default, causing <tt>font-style:normal</tt>
+        <li>
-      to be fully slanted/oblique/italic. This is counter-acted by using a
+          Mapping of negative slant axis to <tt>font-style:italic</tt> has no effect.<br>
-      specific <tt>@font-face</tt> for Safari that doesn't define
+        </li>
-      <tt>font-weight.</tt>
+        <li>
+          Mapping of negative slant axis to <tt>font-style:oblique</tt> has no effect.
+        </li>
+        <li>
+          All current stable versions of major web browser supports
+          <tt>format("woff2-variations")</tt>
+          for font url format in <tt>@font-face</tt> declarations.
+      </ul>
     </li>
     <li>
-      <b>Safari 12.0:</b>
+      <b>Safari:</b>
-      <tt>font-synthesis:none</tt> is required or else
+      <ul>
-      <tt>font-style:italic</tt> causes "double-slant" —
+        <li>
-      the slnt axis gets maxed out as expected, but then faux oblique is
+          Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes
-      applied on top of it, causing an overly extreme slant.
+          slnt axis to be maxed out by default, causing <tt>font-style:normal</tt>
-      This means that <tt>font-style:italic</tt> can't be used in Safari,
+          to be fully slanted/oblique/italic. This is counter-acted by using a
-      and instead we use <tt>font-style:oblique</tt> which works in all
+          specific <tt>@font-face</tt> for Safari that doesn't define
-      major browsers. Note that this effects <tt>&lt;em&gt;</tt> and
+          <tt>font-weight.</tt>
-      <tt>&lt;i&gt;</tt> which in Safari implicitly has
+          (Last confirmed version: Safari 12.1)
-      <tt>font-style:italic</tt>.
+        </li>
+        <li>
+          <tt>font-synthesis:none</tt> is required or else
+          <tt>font-style:italic</tt> causes "double-slant" —
+          the slnt axis gets maxed out as expected, but then faux oblique is
+          applied on top of it, causing an overly extreme slant.
+          This means that <tt>font-style:italic</tt> can't be used in Safari,
+          and instead we use <tt>font-style:oblique</tt> which works in all
+          major browsers. Note that this effects <tt>&lt;em&gt;</tt> and
+          <tt>&lt;i&gt;</tt> which in Safari implicitly has
+          <tt>font-style:italic</tt>.
+          (Last confirmed version: Safari 12.1)
+        </li>
+      </ul>
     </li>
     <li>
-      <b>Chrome 69+:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
+      <b>Chrome:</b>
-      is not supported.
+      <ul>
+        <li>
+          Rendering of overlapping shapes causes "blobs" or "ink bleed".
+          Overlapping shapes, like the angle + horizontal stem of "A" are
+          rendered in separate MSAA passes and later combined as bitmaps,
+          causing a multiplication effect on the alpha channel.
+        </li>
+        <li>
+          Passing explicit degrees to oblique (e.g. <tt>font-style:oblique -5deg</tt>)
+          is not supported. (Last confirmed version: Chrome 75)
+        </li>
+        <li>
+          For fonts with negative <tt>slnt</tt> values, as per the OT spec,
+          <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.)
+          (Last confirmed version: Chrome 75)
+        </li>
+        <li>
+          Mapping of negative-value <tt>ital</tt> and <tt>slnt</tt> axis
+          to <tt>font-style:italic</tt> is not supported.
+        </li>
+        <li>
+          <b>Version &lt;75:</b> Mapping of positive-value <tt>ital</tt> and <tt>slnt</tt> axis
+          to <tt>font-style:italic</tt> is not supported.
+        </li>
+        <li>
+          <b>Windows only:</b> kerning is incorrect and
+          there are issues with ClearType where for example a lower-case "r"
+          (without hints) might be rendered much lower than a lower-case "n".
+          (Last confirmed version: Chrome 69)
+        </li>
+      </ul>
     </li>
     <li>
-      <b>Chrome 69+:</b> Rendering of overlapping shapes causes "blobs" or "ink bleed".
+      <b>Firefox:</b>
-      Overlapping shapes, like the angle + horizontal stem of "A" are
+      <ul>
-      rendered in separate MSAA passes and later combined as bitmaps,
+        <li>
-      causing a multiplication effect on the alpha channel.
+          For fonts with negative <tt>slnt</tt> values, as per the OT spec,
+          <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.)
+          (Last confirmed version: Firefox 68)
+        </li>
+        <li>
+          <b>Version &lt;68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
+          is not supported.
+        </li>
+      </ul>
     </li>
     <li>
-      <b>Chrome 69+ (Windows):</b> kerning is incorrect and
+      <b>Edge:</b>
-      there are issues with ClearType where for example a lower-case "r"
+      <ul>
-      (without hints) might be rendered much lower than a lower-case "n".
+        <li>
-    <li>
+          Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
-      <b>Firefox 62:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
+          is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>.
-      is not supported.
+          Note: We use separate italic and upright font files for Edge in this
-    </li>
+          test, which is why intermediate oblique degrees are displayed as either
-    <li>
+          fully slanted or not slanted at all when viewing this in Edge.
-      <b>Edge 42:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
+          (Last confirmed version: Edge 42)
-      is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>. Note: We use separate italic and upright font files for Edge in this
+        </li>
-      test, which is why intermediate oblique degrees are displayed as either
+      </ul>
-      fully slanted or not slanted at all when viewing this in Edge.
     </li>
   </ul>
 </div>
@@ -222,65 +313,92 @@ if (docstyle.fontFamily.indexOf('Inter var') == -1) {
 }
 
 var samples = document.querySelector('div.samples')
-var weight = 100, weightMax = 900, weightStep = 20
-var slant = 0, slantMax = 10, slantStep = 5
 
-while (weight <= weightMax) {
+for (let className of ["multi-axis", "single-axis"]) {
-  slant = 0
-  let weightSet = document.createElement('div')
-  weightSet.className = 'weightset'
 
-  while (slant <= slantMax) {
+  let h2 = document.createElement('h2')
-    let e = document.createElement('div')
+  h2.innerText = className
+  samples.appendChild(h2)
+
+  var weight = 100, weightMax = 900, weightStep = 20
+  var slant = 0, slantMax = 10, slantStep = 5
+
+  while (weight <= weightMax) {
+    slant = 0
+    let weightSet = document.createElement('div')
+    weightSet.className = 'weightset ' + className
+
+    if (className == "multi-axis") {
+      while (slant <= slantMax) {
+        let e = document.createElement('div')
+        if (weight != 400) {
+          e.style.fontWeight = String(weight)
+        }
+        if (slant != 0) {
+          e.style.fontStyle = `oblique ${-slant}deg`
+          e.innerText = `I ${weight} oblique ${-slant}`
+        } else {
+          e.innerText = `I ${weight} normal`
+        }
+        weightSet.appendChild(e)
+        slant += slantStep
+      }
+    } else {
+      e = document.createElement('div')
+      if (weight != 400) {
+        e.style.fontWeight = String(weight)
+      }
+      e.innerText = `I ${weight} normal`
+      weightSet.appendChild(e)
+    }
+
+    e = document.createElement('div')
     if (weight != 400) {
       e.style.fontWeight = String(weight)
     }
-    if (slant != 0) {
+    e.style.fontStyle = 'oblique'
-      e.style.fontStyle = `oblique ${slant}deg`
+    e.innerText = `I ${weight} oblique`
-      e.innerText = `I ${weight} oblique ${slant}`
-    } else {
-      e.innerText = `I ${weight}`
-    }
     weightSet.appendChild(e)
-    slant += slantStep
-  }
 
-  e = document.createElement('div')
+    e = document.createElement('div')
-  if (weight != 400) {
+    if (weight != 400) {
-    e.style.fontWeight = String(weight)
+      e.style.fontWeight = String(weight)
-  }
+    }
-  e.style.fontStyle = 'oblique'
+    e.style.fontStyle = 'italic'
-  e.innerText = `I ${weight} oblique`
+    e.innerText = `I ${weight} italic`
-  weightSet.appendChild(e)
+    weightSet.appendChild(e)
 
-  e = document.createElement('div')
+    e = document.createElement('div')
-  if (weight != 400) {
+    if (weight != 400) {
-    e.style.fontWeight = String(weight)
+      e.style.fontWeight = String(weight)
-  }
+    }
-  e.style.fontStyle = 'italic'
+    let em = document.createElement('em')
-  e.innerText = `I ${weight} italic`
+    em.innerText = `I ${weight} <em>`
-  weightSet.appendChild(e)
+    e.appendChild(em)
+    weightSet.appendChild(e)
 
-  e = document.createElement('div')
+    e = document.createElement('div')
-  if (weight != 400) {
+    if (weight != 400) {
-    e.style.fontWeight = String(weight)
+      e.style.fontWeight = String(weight)
-  }
+    }
-  let em = document.createElement('em')
+    em = document.createElement('i')
-  em.innerText = `I ${weight} <em>`
+    em.innerText = `I ${weight} <i>`
-  e.appendChild(em)
+    e.appendChild(em)
-  weightSet.appendChild(e)
+    weightSet.appendChild(e)
 
-  e = document.createElement('div')
+    if (className == "multi-axis") {
-  if (weight != 400) {
+      e = document.createElement('div')
-    e.style.fontWeight = String(weight)
+      if (weight != 400) {
-  }
+        e.style.fontWeight = String(weight)
-  em = document.createElement('i')
+      }
-  em.innerText = `I ${weight} <i>`
+      e.style.fontVariationSettings = `'wght' ${weight}, 'slnt' -${slantMax}`
-  e.appendChild(em)
+      e.innerText = `I ${weight} slnt -${slantMax}`
-  weightSet.appendChild(e)
+      weightSet.appendChild(e)
+    }
 
-  samples.appendChild(weightSet)
+    samples.appendChild(weightSet)
-  weight += weightStep
+    weight += weightStep
+  }
 }