website

1 files changed, 151 insertions, 22 deletions

diff --git a/docs/lab/index.html b/docs/lab/index.html
index 8c1295516..9deb630d3 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -753,78 +753,95 @@ for (const ch of uniqueChars) {
   font-family: 'Inter-UI-VERSION';
   font-style:  normal;
   font-weight: 400;
-  src: url("fonts/Inter-UI-Regular.woff2") format("woff2"),
-       url("fonts/Inter-UI-Regular.woff") format("woff");
+  src: url("fonts/const/Inter-UI-Regular.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-Regular.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  italic;
   font-weight: 400;
-  src: url("fonts/Inter-UI-Italic.woff2") format("woff2"),
-       url("fonts/Inter-UI-Italic.woff") format("woff");
+  src: url("fonts/const/Inter-UI-Italic.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-Italic.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  normal;
   font-weight: 500;
-  src: url("fonts/Inter-UI-Medium.woff2") format("woff2"),
-       url("fonts/Inter-UI-Medium.woff") format("woff");
+  src: url("fonts/const/Inter-UI-Medium.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-Medium.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  italic;
   font-weight: 500;
-  src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
-       url("fonts/Inter-UI-MediumItalic.woff") format("woff");
+  src: url("fonts/const/Inter-UI-MediumItalic.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-MediumItalic.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  normal;
   font-weight: 700;
-  src: url("fonts/Inter-UI-Bold.woff2") format("woff2"),
-       url("fonts/Inter-UI-Bold.woff") format("woff");
+  src: url("fonts/const/Inter-UI-Bold.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-Bold.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  italic;
   font-weight: 700;
-  src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
-       url("fonts/Inter-UI-BoldItalic.woff") format("woff");
+  src: url("fonts/const/Inter-UI-BoldItalic.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-BoldItalic.woff") format("woff");
 }
 
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  normal;
   font-weight: 900;
-  src: url("fonts/Inter-UI-Black.woff2") format("woff2"),
-       url("fonts/Inter-UI-Black.woff") format("woff");
+  src: url("fonts/const/Inter-UI-Black.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-Black.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter-UI-VERSION';
   font-style:  italic;
   font-weight: 900;
-  src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"),
-       url("fonts/Inter-UI-BlackItalic.woff") format("woff");
+  src: url("fonts/const/Inter-UI-BlackItalic.woff2") format("woff2"),
+       url("fonts/const/Inter-UI-BlackItalic.woff") format("woff");
 }
 
-.inter-ui, .inter-ui input, .inter-ui select {
+.inter-ui,
+.inter-ui input,
+.inter-ui select {
   font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important;
 }
 
+@font-face {
+  font-family: 'Inter-UI-var-VERSION';
+  font-weight: 400 900;
+  src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations");
+}
+
+body.varfont .inter-ui,
+body.varfont .inter-ui input,
+body.varfont .inter-ui select {
+  font-family: 'Inter-UI-var-VERSION', 'Inter UI var', serif !important;
+}
+
     </style>
     <link href="lab.css" rel="stylesheet">
     <script type="text/javascript">
 
 const fontVersion = Math.round(Date.now()).toString(36)
 let fontFamilyName = 'Inter-UI-v' + fontVersion
+let fontFamilyNameVar = 'Inter-UI-var-v' + fontVersion
 const fontCSSTemplate = document.querySelector('#font-css')
 const fontCSS = fontCSSTemplate.cloneNode(true)
 fontCSS.innerHTML = fontCSS.innerHTML
+  .replace(/Inter-UI-var-VERSION/g, fontFamilyNameVar)
   .replace(/Inter-UI-VERSION/g, fontFamilyName)
   .replace(/(\.woff2?)/g, '$1?r='+fontVersion)
 fontFamilyName += ", 'Inter UI'"
+fontFamilyNameVar += ", 'Inter UI var'"
 fontCSS.setAttribute('id', '')
 fontCSS.setAttribute('type', 'text/css')
 document.head.appendChild(fontCSS)
@@ -833,19 +850,47 @@ document.head.appendChild(fontCSS)
   </head>
   <body>
     <div class="options inter-ui">
-      <select name="sample"></select>
 
-      <label>
-        <input type="number" value="13" step="1" min="4" max="1024" name="size">
-        <select name="weight" style="max-width:120px">
+      <label class="style">
+        <select name="weight" style="max-width:100px">
           <!--option value="200">Thin (200)</option>
           <option value="300">Light (300)</option-->
           <option value="400" selected>Regular (400)</option>
           <option value="500">Medium (500)</option>
           <option value="700">Bold (700)</option>
+          <option value="800">Extra Bold (800)</option>
           <option value="900">Black (900)</option>
         </select>
         <label style="display:inline-block; margin-left:4px"><input type="checkbox" name="italic"> <em>Italic</em></label>
+        <label>
+          <input type="checkbox" class="featopt" name="varfont"
+          title="Enable variable font (experimental!)">
+          <span>Variable</span>
+        </label>
+      </label>
+
+      <div class="checkbox-group varfontControl">
+        <span>Variable axes:</span>
+        <label class="label-and-value">
+          <span>Weight:</span>
+          <input type="range" value="400" min="400" max="900" name="varWeight">
+          <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">
+        </label>
+      </div>
+
+      <label class="label-and-value">
+        <span>Size:</span>
+        <input type="number" value="13" step="1" min="4" max="1024" name="size">
+      </label>
+
+      <label class="label-and-value">
+        <span>Sample text:</span>
+        <select name="sample"></select>
       </label>
 
       <div class="checkbox-group repertoireControl">
@@ -1336,6 +1381,11 @@ function main() {
     // setCSSProp('line-height', Math.ceil(v * 1.5) + 'px')
   })
 
+  let usingVarFont = false
+  var varWeightRange, varItalicRange
+  var varWeightSettingValueImpl = false
+  var varItalicSettingValueImpl = false
+
   let currentBodyWeightClass = null
   vars.bind('weight', (e, v) => {
     setCSSProp('font-weight', v)
@@ -1345,8 +1395,87 @@ function main() {
     document.body.classList.add(currentBodyWeightClass = 'font-weight-'+v)
   })
 
-  vars.bind('italic', (e, on) => {
+  var italicVar = vars.bind('italic', (e, on) => {
     document.body.classList[on ? 'add' : 'remove']('italic')
+    if (usingVarFont && !varItalicSettingValueImpl) {
+      if (varItalicRange) {
+        varItalicRange.setValue(on ? 100 : 0)
+      }
+      updateVarFont()
+    }
+  })
+
+  let varState = {
+    weight: 400,
+    italic: 0,
+  }
+
+  function updateVarFont() {
+    if (usingVarFont) {
+      varItalicSettingValueImpl = true
+      if (varState.italic <= 0.1) {
+        varState.italic = 0
+        italicVar.setValue(false)
+      } else {
+        italicVar.setValue(true)
+      }
+      varItalicSettingValueImpl = false
+      setCSSProp(
+        "font-variation-settings",
+        `"wght" ${varState.weight}, "ital" ${varState.italic}`
+      )
+    } else {
+      setCSSProp("font-variation-settings", null)
+    }
+  }
+
+  vars.bind('varfont', (e, on) => {
+    usingVarFont = on
+    document.body.classList[on ? 'add' : 'remove']('varfont')
+    document.body.style.fontFamily = on ? fontFamilyNameVar : fontFamilyName;
+    updateVarFont()
+  })
+
+  let varWeightNum = vars.bind('varWeightNum', (e, v) => {
+    if (varWeightRange && !varWeightSettingValueImpl) {
+      varWeightRange.setValue(v)
+    }
+  })
+
+  let varItalicNum = vars.bind('varItalicNum', (e, v) => {
+    if (varItalicRange && !varItalicSettingValueImpl) {
+      varItalicRange.setValue(v)
+    }
+  })
+
+  varWeightRange = vars.bind('varWeight', (e, v) => {
+    varState.weight = v
+    varWeightSettingValueImpl = true
+    varWeightNum.setValue(v)
+    varWeightSettingValueImpl = false
+    updateVarFont()
+  }, (e, prevValue, ev) => {
+    if (prevValue === undefined) {
+      return 400
+    }
+    return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+  })
+
+  varItalicRange = vars.bind('varItalic', (e, v) => {
+    varState.italic = v
+    varItalicSettingValueImpl = true
+    varItalicNum.setValue(v)
+    varItalicSettingValueImpl = false
+    updateVarFont()
+  }, (e, prevValue, ev) => {
+    if (prevValue === undefined) {
+      return 0
+    }
+    return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+  })
+
+  vars.bind('varItalic', (e, v) => {
+    console.log('varItalic', v)
   })