web: wip display in lab

docs/lab/build-version.js

@@ -0,0 +1,4 @@
+---
+layout: none
+---
+const interBuildVersion = "{{site.data.fontinfo[0].version}}"

docs/lab/font-files.js

@@ -0,0 +1,144 @@
+var fontFamilyName,
+    fontFamilyNameHinted,
+    fontFamilyNameVar,
+    fontFamilyNameVarHinted,
+    fontFamilyNameDisplay,
+    fontFamilyNameDisplayHinted,
+    fontFamilyNameDisplayVar,
+    fontFamilyNameDisplayVarHinted;
+
+;(()=>{
+  let isLocalServer = (
+    document.location.hostname == "localhost" ||
+    document.location.hostname == "127.0.0.1"
+  );
+
+  const includeLabLocalFiles = isLocalServer
+
+  const fontVersion = (
+    isLocalServer || typeof interBuildVersion == "undefined" ?
+      Math.round(Date.now()).toString(36) :
+      interBuildVersion.replace(/\./g, "_")
+  );
+
+  fontFamilyName = 'Inter-v' + fontVersion
+  fontFamilyNameHinted = 'Inter-hinted-v' + fontVersion
+  fontFamilyNameVar = 'Inter-var-v' + fontVersion
+  fontFamilyNameVarHinted = 'Inter-var-hinted-v' + fontVersion
+  fontFamilyNameDisplay = 'InterDisplay-v' + fontVersion
+  fontFamilyNameDisplayHinted = 'InterDisplay-hinted-v' + fontVersion
+  fontFamilyNameDisplayVar = 'InterDisplay-var-v' + fontVersion
+  fontFamilyNameDisplayVarHinted = 'InterDisplay-var-hinted-v' + fontVersion
+
+  let outbuf = []
+  function w(s) { outbuf.push(s) }
+
+  function getStyleName(weight, isItalic) {
+    let style = ""
+    switch (weight) {
+      case 100: style = "Thin"; break
+      case 200: style = "ExtraLight"; break
+      case 300: style = "Light"; break
+      case 400: style = ""; break
+      case 500: style = "Medium"; break
+      case 600: style = "SemiBold"; break
+      case 700: style = "Bold"; break
+      case 800: style = "ExtraBold"; break
+      case 900: style = "Black"; break
+    }
+    return style + (isItalic ? "Italic" : "")
+  }
+
+  function genStaticFontFace(family, cssname, filepath, weight, isItalic) {
+    let styleName = getStyleName(weight, isItalic)
+    if (styleName == "") {
+      styleName = isItalic ? "Italic" : "Regular"
+    }
+    let filename = `${family}-${styleName}`
+    w(`@font-face {`)
+    w(`  font-family: ${cssname};`)
+    w(`  font-style:  ${isItalic ? "italic" : "normal"};`)
+    w(`  font-weight: ${weight};`)
+    w(`  font-display: block;`)
+    w(`  src:`)
+    if (includeLabLocalFiles) {
+      w(`  url("fonts/${filepath}/${filename}.woff2") format("woff2"),`)
+      w(`  url("fonts/${filepath}/${filename}.woff") format("woff"),`)
+    }
+    w(`  url("../font-files/${filename}.woff2") format("woff2"),`)
+    w(`  url("../font-files/${filename}.woff") format("woff2");`)
+    w(`}`)
+  }
+
+  let families = [
+    ["Inter",        "const",        fontFamilyName],
+    ["Inter",        "const-hinted", fontFamilyNameHinted],
+    ["InterDisplay", "const",        fontFamilyNameDisplay],
+    ["InterDisplay", "const-hinted", fontFamilyNameDisplayHinted],
+  ]
+
+  for (let [family, filepath, cssname] of families) {
+    for (let weight of [100,200,300,400,500,600,700,800,900]) {
+      for (let isItalic of [true,false]) {
+        genStaticFontFace(family, cssname, filepath, weight, isItalic)
+      }
+    }
+  }
+
+  for (let [family,cssname] of [
+    ["Inter",fontFamilyNameVar],
+    ["InterDisplay",fontFamilyNameDisplayVar],
+  ]) {
+    w(`@font-face {
+      font-family: '${cssname}';
+      font-style: oblique 0deg 10deg;
+      font-weight: 100 900;
+      font-display: block;
+      src:`)
+    if (includeLabLocalFiles) {
+      w(`  url('fonts/var/${family}.var.woff2') format("woff2-variations"),`)
+    }
+    w(`  url('../font-files/${family}.var.woff2') format("woff2-variations");`)
+    w(`}`)
+
+    w(`@font-face {
+      font-family: '${cssname} safari';
+      font-style: oblique 0deg 10deg;
+      font-display: block;
+      src:`)
+    if (includeLabLocalFiles) {
+      w(`  url('fonts/var/${family}.var.woff2') format("woff2-variations"),`)
+    }
+    w(`  url('../font-files/${family}.var.woff2') format("woff2-variations");`)
+    w(`}`)
+  }
+
+  let css = outbuf.join("\n")
+
+  // console.log(css)
+
+  const fontCSS = document.createElement("style")
+  fontCSS.setAttribute('type', 'text/css')
+  fontCSS.appendChild(document.createTextNode(css))
+  document.head.appendChild(fontCSS)
+
+  // update family names to include CSS fallbacks
+  fontFamilyName += ", 'Inter'"
+  fontFamilyNameHinted += ", 'Inter'"
+  fontFamilyNameVar += ", 'Inter var'"
+  fontFamilyNameVarHinted += ", 'Inter var'"
+
+})()
+
+// const fontCSSTemplate = document.querySelector('#font-css')
+// const fontCSS = fontCSSTemplate.cloneNode(true)
+// fontCSS.innerHTML = fontCSS.innerHTML
+//   .replace(/Inter-var-VERSION/g, fontFamilyNameVar)
+//   .replace(/Inter-var-hinted-VERSION/g, fontFamilyNameVarHinted)
+//   .replace(/Inter-hinted-VERSION/g, fontFamilyNameHinted)
+//   .replace(/Inter-VERSION/g, fontFamilyName)
+//   .replace(/(\.woff2?)/g, '$1?r='+fontVersion)
+// fontCSS.setAttribute('id', '')
+// fontCSS.setAttribute('type', 'text/css')
+// document.head.appendChild(fontCSS)
+

docs/lab/lab.css

@@ -54,18 +54,22 @@
   --bgColor: white;
   --fgColor: black;
   --fgColorDimmed: rgba(0,0,0,0.4);
+  --focus-color: #18A0FB;
 
   --input-color-bg: white;
-  --input-color-focus: black;
   --input-slider-color-bg: rgba(0,0,0,0.2);
   --input-slider-color-fg: var(--fgColor);
   --input-slider-color-focus: rgb(0, 130, 255);
   --input-slider-knob-size: 8px;
   --input-slider-track-size: 6px;
-  --input-slider-track-hit-size: 12px;
+  --input-slider-track-hit-size: 16px;
+  --checkbox-bg: var(--input-slider-color-bg);
+  --checkbox-fg: var(--input-color-bg);
+  --checkbox-on-bg: var(--fgColor);
+  --checkbox-on-fg: var(--checkbox-fg);
 
   --surface1-color-bg: #f4f4f4;
-  --surface1-color-fg: #222;
+  --surface1-color-fg: #444;
 
   --surface2-color-bg: white;
   --surface2-color-fg: #222;
@@ -88,9 +92,12 @@
   --fgColorDimmed: rgba(255,255,255,0.4);
 
   --input-color-bg: #2c2c2c;
-  --input-color-focus: rgba(255,255,255,0.7);
-  --input-slider-color-bg: rgba(255,255,255,0.2);
+  --input-slider-color-bg: rgba(255,255,255,0.3);
   --input-slider-color-fg: var(--fgColor);
+  --checkbox-bg: rgba(255,255,255,0.3);
+  --checkbox-fg: rgba(0,0,0,0.7);
+  --checkbox-on-bg: white;
+  --checkbox-on-fg: black;
 
   --surface1-color-bg: #1b1b1b;
   --surface1-color-fg: #aaa;
@@ -151,13 +158,14 @@ h2 {
 i, cite, em, var, address, dfn {
   font-style: italic;
 }
-body.varfont i, body.varfont cite, body.varfont em, body.varfont var,
+/*body.varfont i, body.varfont cite, body.varfont em, body.varfont var,
 body.varfont address, body.varfont dfn {
   font-style: oblique -10deg;
-}
+}*/
 
 label {
-  display: block;
+  display: flex;
+  align-items: center;
   margin: 2px 0;
 }
 
@@ -192,26 +200,95 @@ input[type="number"]:focus,
 input[type="text"]:focus,
 select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--input-color-focus);
+  box-shadow: 0 0 0 2px var(--focus-color);
 }
 
-input[type=range]::-moz-focus-outer {
+input[type="range"]::-moz-focus-outer {
   border: 0;
 }
 
+/* checkbox ———————————————————————————————————————————————————————————————————————————— */
+
+input[type="checkbox"] {
+  --checkbox-size:12px;
+  --checkbox-handle-size: 10px;
+  --checkbox-border: 0px;
+
+  flex: 0 0 auto;
+  margin: 4px 0;
+  appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;
+  user-select: none; -moz-user-select: none; -webkit-user-select:none;
+  background: none;
+  border: none;
+
+  background-color: var(--checkbox-bg);
+
+  border: var(--checkbox-border) solid var(--checkbox-bg);
+  box-sizing: border-box;
+
+  width: calc(var(--checkbox-size) * 2);
+  height:var(--checkbox-size);
+  border-radius: var(--checkbox-size);
+  position:relative;
+  transition: all 168ms ease-out;
+}
+input[type="checkbox"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bgColor), 0 0 0 4px var(--focus-color);
+}
+input[type="checkbox"]:active {
+  /* trick to avoid flickering outline */
+  box-shadow: none;
+}
+input[type="checkbox"]::after {
+  --padding: calc(
+    calc(
+      calc(var(--checkbox-size) - var(--checkbox-handle-size))
+      / 2
+    )
+    - var(--checkbox-border)
+  );
+  content: "";
+  background: var(--checkbox-fg);
+  display:block;
+  position:absolute;
+  left: var(--padding);
+  top: var(--padding);
+  width:var(--checkbox-handle-size);
+  height:var(--checkbox-handle-size);
+  border-radius:var(--checkbox-handle-size);
+  transform: translate(0, 0);
+  transition: all 168ms ease-out; /*cubic-bezier(0.09, 0.49, 0.71, 0.98);*/
+}
+input[type="checkbox"][checked] {
+  background-color: var(--checkbox-on-bg);
+}
+input[type="checkbox"][checked]::after {
+  background-color: var(--checkbox-on-fg);
+  transform: translate(calc(var(--checkbox-size)), 0);
+  /*transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);*/
+}
+input[type="checkbox"][checked] + * {
+  color: var(--fgColorMax);
+}
+* + input[type="checkbox"] {
+  margin-left: 8px;
+}
+
 /* range slider ———————————————————————————————————————————————————————————————————————————— */
 
-input[type=range] {
+input[type="range"] {
   -webkit-appearance: none;
   width: 100%;
   background: transparent;
   cursor: default;
+  margin-left: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / -2);
 }
-input[type=range]:focus {
+input[type="range"]:focus {
   outline: none;
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: 0;
   height: var(--input-slider-knob-size);
@@ -221,7 +298,7 @@ input[type=range]::-webkit-slider-thumb {
   box-shadow: 0 0 0 2px var(--surface1-color-bg);
   margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2);
 }
-input[type=range]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb {
   border: 0;
   height: var(--input-slider-knob-size);
   width: var(--input-slider-knob-size);
@@ -232,7 +309,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
   /* Note: hit testing is done on this element so we make it large enough
      to easily hit with --input-slider-track-hit-size and a border that matches the
      background color. This is not portable, unfortunately. */
@@ -240,11 +317,11 @@ input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: var(--input-slider-track-hit-size);
   background: var(--input-slider-color-bg);
-  border-radius: var(--input-slider-track-size);
+  border-radius: var(--input-slider-track-hit-size);
   --border-w: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / 2);
   border: var(--border-w) solid var(--surface1-color-bg);
 }
-input[type=range]::-moz-range-track {
+input[type="range"]::-moz-range-track {
   box-sizing: border-box;
   width: 100%;
   height: var(--input-slider-track-hit-size);
@@ -254,18 +331,18 @@ input[type=range]::-moz-range-track {
   border: var(--border-w) solid var(--surface1-color-bg);
 }
 
-/*input[type=range]:focus::-webkit-slider-thumb { background-color: var(--blue) }
-input[type=range]:focus::-moz-range-thumb     { background-color: var(--blue) }*/
+/*input[type="range"]:focus::-webkit-slider-thumb { background-color: var(--blue) }
+input[type="range"]:focus::-moz-range-thumb     { background-color: var(--blue) }*/
 
-input[type=range]:focus::-webkit-slider-runnable-track {
-  box-shadow: 0 0 0 1px var(--input-color-focus);
+input[type="range"]:focus::-webkit-slider-runnable-track {
+  box-shadow: 0 0 0 2px var(--focus-color);
 }
-input[type=range]:focus::-moz-range-track {
-  box-shadow: 0 0 0 1px var(--input-color-focus);
+input[type="range"]:focus::-moz-range-track {
+  box-shadow: 0 0 0 2px var(--focus-color);
 }
 
 /* TODO: MS Edge
-input[type=range]::-ms-thumb {
+input[type="range"]::-ms-thumb {
   height: var(--input-slider-knob-size);
   width: var(--input-slider-knob-size);
   border-radius: var(--input-slider-knob-size);
@@ -273,7 +350,7 @@ input[type=range]::-ms-thumb {
   box-shadow: 0 0 0 2px var(--surface1-color-bg);
   margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2);
 }
-input[type=range]::-ms-track {
+input[type="range"]::-ms-track {
   width: 100%;
   height: 8.4px;
   background: transparent;
@@ -281,22 +358,22 @@ input[type=range]::-ms-track {
   border-width: 16px 0;
   color: transparent;
 }
-input[type=range]::-ms-fill-lower {
+input[type="range"]::-ms-fill-lower {
   background: #2a6495;
   border: 0.2px solid #010101;
   border-radius: 2.6px;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
-input[type=range]:focus::-ms-fill-lower {
+input[type="range"]:focus::-ms-fill-lower {
   background: #3071a9;
 }
-input[type=range]::-ms-fill-upper {
+input[type="range"]::-ms-fill-upper {
   background: #3071a9;
   border: 0.2px solid #010101;
   border-radius: 2.6px;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
-input[type=range]:focus::-ms-fill-upper {
+input[type="range"]:focus::-ms-fill-upper {
   background: #367ebd;
 }*/
 
@@ -359,9 +436,9 @@ body.sidebar-minimized #sidebar-button {
   position:fixed;
   top:0; right:0; bottom:0;
   background: var(--bgColor);
-  padding: 24px;
+  padding: 16px 24px 24px 24px;
   user-select:none; -moz-user-select: none; -webkit-user-select:none;
-  font-family: sans-serif !important;
+  font-family: var(--font-family), sans-serif;
   overflow: auto;
   letter-spacing:0.012em;
   transform-origin:100% 0%;
@@ -402,6 +479,16 @@ body.sidebar-minimized .options {
     font-family: inherit;
     color: inherit;
   }
+  .options select {
+    min-width:50px;
+    max-width:100%;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /*.options select[name="sample"] {
+    width:225px;
+  }*/
   .options input::placeholder {
     color: var(--fgColor);
     opacity: 0.4;
@@ -416,32 +503,24 @@ body.sidebar-minimized .options {
     align-items: center;
     height: var(--fieldHeight);
   }
-  .options .label-and-value span {
-    /*flex: 1 1 auto;*/
-    /*background:salmon;*/
+  .options .label-and-value > *:first-child {
+    flex: 0 0 auto;
+    width:90px;
     text-align: left;
     margin-right:6px;
-    width:90px;
   }
   .options .label-and-value input {
     width: 50px;
     max-height: var(--fieldHeight);
     box-sizing: border-box;
   }
-  .options select {
-    min-width:50px;
-    max-width:130px;
-  }
-  .options select[name="sample"] {
-    width:225px;
-  }
   .options label input[type="checkbox"] + * {
     display: inline-block;
     min-width:50%;
   }
-  .options label input[type="checkbox"] + *:hover {
+  /*.options label input[type="checkbox"] + *:hover {
     color: var(--fgColorMax);
-  }
+  }*/
   .options label.rasterizePhrase {
     margin-left:20px;
     margin-bottom:20px;
@@ -514,6 +593,10 @@ body.sidebar-minimized .options {
     display:flex;
     width: 18px;
   }
+  .options .italic-setting > span {
+    font-feature-settings: "cv08" 1;
+    font-style: italic;
+  }
 
 
 .img-button {
@@ -536,7 +619,7 @@ body.sidebar-minimized .options {
   background-color: rgba(0,0,0,0.2);
 }
 .img-button:focus {
-  box-shadow: 0 0 0 2px var(--input-color-focus);
+  box-shadow: 0 0 0 2px var(--focus-color);
 }
 .img-button.disabled {
   opacity:0.4;
@@ -569,6 +652,7 @@ body.italic samples {
   font-style: italic;
 }
   sample {
+    flex: 1 1 50%;
     margin: 0;
     /*white-space: pre;*/
     padding: 2rem;
@@ -579,6 +663,7 @@ body.italic samples {
     overflow-wrap: break-word;
     color: var(--fgColor);
   }
+  /*body.secondarySampleDisabled sample { flex-basis: auto; }*/
     sample p {
       white-space: pre-wrap;
     }