Website

docs/glyphs/glyphs.css

@@ -1,5 +1,5 @@
-h1 span.glyph-name {}
+h1 .glyph-name {}
-h1 span.glyph-name:before {
+h1 .glyph-name:before {
   content: " / ";
   color: rgba(0,0,0,0.2);
   font-weight:400;
@@ -52,7 +52,7 @@ body.single #glyphs {
   .glyph .names {
     position: absolute;
     left:20px; right:20px; bottom:6px;
-    color:white;
+    color: white;
     text-align: center;
     font-size:1em;
   }
@@ -106,6 +106,10 @@ body.single .intro p {
 #single-info {
   max-width: 500px;
 }
+#single-info a {
+  background-image: none;
+  text-shadow: none;
+}
 #single-info ul {
   list-style: none;
 }
@@ -119,6 +123,9 @@ body.single .intro p {
   font-feature-settings: 'case' 1;
   padding-left:0.3em;
 }
+#single-info .svgFile {
+  font-feature-settings: 'case' 1;
+}
 #single-info .colorMark {
   display:inline-block;
   vertical-align:baseline;
@@ -177,13 +184,17 @@ body.single .row.kerning {
   background: white;
 }
 .kernpair:target, .kernpair.selected {
-  background: rgba(250, 240, 0, 0.9);
+  background: rgba(0, 0, 0, 0.9);
+  /*color: white;*/
+}
+.kernpair:target svg path, .kernpair.selected svg path {
+  fill: white;
 }
 .kernpair:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
 }
-  .kernpair .left, .kernpair .right {
+  .kernpair .g.left, .kernpair .g.right {
     width:100px;
     height:100px;
     /*background:rgba(40,240,90,0.3);*/
@@ -191,16 +202,15 @@ body.single .row.kerning {
     background-repeat: no-repeat;
     opacity:0.8;
   }
-  .kernpair:hover .left, .kernpair:hover .right {
+  .kernpair:hover .g.left, .kernpair:hover .g.right {
     opacity:0.9;
   }
-  .kernpair.selected .left, .kernpair.selected .right {
+  .kernpair.selected .g.left, .kernpair.selected .g.right {
     opacity:1;
   }
-  /*.kernpair .left { background-color:rgba(120,90,140,0.3); }*/
+  /*.kernpair .g.left { background-color:rgba(120,90,140,0.3); }*/
   .kernpair .kern {
     position: absolute;
-    /*background-color: blue;*/
     background-color: rgba(255,0,0,0.1);
     right:0; top:0; bottom:0;
     z-index:9;
@@ -209,7 +219,7 @@ body.single .row.kerning {
     background-color: rgba(36,207,128,0.3);
   }
   .kernpair:hover .kern, .kernpair.selected .kern {
-    background-color: rgba(255,0,0,0.5);
+    background-color: rgba(255,100,100,0.5);
   }
   .kernpair:hover .kern.pos, .kernpair.selected .kern.pos {
     background-color: rgba(36,207,128,0.5);
@@ -219,17 +229,60 @@ body.single .row.kerning {
     white-space: nowrap;
     opacity:0.9;
     height: 20px;
-    right:-8px; bottom:-20px;
+    right:-6px; bottom:-20px;
     z-index:1;
     text-align: center;
     color: rgba(255,0,0,0.8);
     visibility:hidden;
+    pointer-events: none;
+    font-size:11px;
   }
   .kernpair .kern.pos .label {
-    color: rgba(36,207,128,0.8);
+    color: rgba(1,163,88,0.8);
   }
   .kernpair:hover .kern .label,
   .kernpair.selected .kern .label {
     visibility:visible;
   }
+  .kernpair .link {
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    /*background: yellow;*/
+    left:0; right:0; bottom:-22px;
+    height: 20px;
+    padding-top:2px;
+    user-select: none;
+    opacity: 0;
+    z-index:0;
+  }
+  .kernpair:hover .link {
+    opacity: 1;
+  }
+    .kernpair .link a {
+      background: none;
+      box-sizing: border-box;
+      color: rgba(0,0,0,0.2);
+      /*border: 1px solid #aaa;*/
+      text-shadow: none;
+      display: block;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      width: 16px; /* sync with JS kLinkAWidth */
+      height: 16px;
+      line-height: 14px;
+      padding-top:3px;
+      border-radius: 50%;
+    }
+    .kernpair .link:hover {
+      z-index:999;
+    }
+    .kernpair .link a:hover {
+      color: white;
+      background: #222;
+    }
+  .kernpair.right .link {
+    justify-content: flex-start;
+  }
 

docs/glyphs/glyphs.js

@@ -3,8 +3,25 @@ var kSVGScale  = 0.1 // how bmuch metrics are scaled in the SVGs
 var kGlyphSize = 346 // at kSVGScale. In sync with CSS and SVGs
 var kUPM       = 2816
 
+
+function pxround(n) {
+  return Math.round(n * 2) / 2
+}
+
+// forEachElement(selector, fun)
+// forEachElement(parent, selector, fun)
+function eachElement(parent, selector, fun) {
+  if (typeof selector == 'function') {
+    fun = selector
+    selector = parent
+    parent = document
+  }
+  Array.prototype.forEach.call(parent.querySelectorAll(selector), fun)
+}
+
+
 if (!isMac) {
-  Array.prototype.forEach.call(document.querySelectorAll('kbd'), function(e) {
+  eachElement('kbd', function(e) {
     if (e.innerText == '\u2318') {
       e.innerText = 'Ctrl'
     }
@@ -226,7 +243,9 @@ function updateLocation() {
   var h1 = document.querySelector('h1')
   if (queryString.g) {
     if (!glyphNameEl) {
-      glyphNameEl = document.createElement('span')
+      glyphNameEl = document.createElement('a')
+      glyphNameEl.href = '?g=' + encodeURIComponent(queryString.g)
+      wrapIntLink(glyphNameEl)
       glyphNameEl.className = 'glyph-name'
     }
     document.title = queryString.g + ' – ' + baseTitle
@@ -260,8 +279,10 @@ window.onpopstate = function(ev) {
 }
 
 function navto(url) {
-  history.pushState({}, "Glyphs", url)
+  if (location.href != url) {
-  updateLocation()
+    history.pushState({}, "Glyphs", url)
+    updateLocation()
+  }
   window.scrollTo(0,0)
 }
 
@@ -497,6 +518,8 @@ function renderSingleInfo(g) {
   var unicode = e.querySelector('.unicode')
 
   function configureUnicodeView(el, g) {
+    var a = el.querySelector('a')
+    a.href = "https://codepoints.net/U+" + fmthex(g.unicode, 4)
     setv(el, 'unicodeCodePoint', g.unicode ? 'U+' + fmthex(g.unicode, 4) : '–')
     setv(el, 'unicodeName', g.unicodeName || '')
   }
@@ -553,35 +576,51 @@ function renderSingleInfo(g) {
 
 var cachedSVGDataURIs = {}
 
-function getSvgDataURI(svg) {
+function getSvgDataURI(svg, fill) {
-  var cached = cachedSVGDataURIs[svg.id]
+  if (!fill) {
+    fill = ''
+  }
+  var cached = cachedSVGDataURIs[svg.id + '-' + fill]
   if (!cached) {
-    cached = 'data:image/svg+xml,' + svg.outerHTML.replace(/[\r\n]+/g, '')
+    var src = svg.outerHTML.replace(/[\r\n]+/g, '')
-    cachedSVGDataURIs[svg.id] = cached
+    if (fill) {
+      src = src.replace(/<path /g, '<path fill="' + fill + '" ')
+    }
+    cached = 'data:image/svg+xml,' + src
+    cachedSVGDataURIs[svg.id + '-' + fill] = cached
   }
   return cached
 }
 
 
-function pxround(n) {
-  return Math.round(n * 2) / 2
-}
-
 
 function selectKerningPair(id, directly) {
-  Array.prototype.forEach.call(
+  // deselect existing
-    document.querySelectorAll('.kernpair.selected'),
+  eachElement('.kernpair.selected', function(kernpair) {
-    function(e) {
+    eachElement(kernpair, '.g', function (glyph) {
-      e.classList.remove('selected')
+      var svgURI = getSvgDataURI(svgRepository[glyph.dataset.name])
-    }
+      glyph.style.backgroundImage = "url('" + svgURI + "')"
-  )
+    })
+    kernpair.classList.remove('selected')
+  })
+
   var el = document.getElementById(id)
-  if (el) {
+  
-    el.classList.add('selected')
+  if (!el) {
-    if (!directly) {
+    history.replaceState({}, '', location.search)
-      el.scrollIntoViewIfNeeded()
+    return
-    }
   }
+  
+  el.classList.add('selected')
+  eachElement(el, '.g', function (glyph) {
+    var svgURI = getSvgDataURI(svgRepository[glyph.dataset.name], 'white')
+    glyph.style.backgroundImage = "url('" + svgURI + "')"
+  })
+
+  if (!directly) {
+    el.scrollIntoViewIfNeeded()
+  }
+  
   history.replaceState({}, '', location.search + '#' + id)
 }
 
@@ -632,7 +671,8 @@ function renderSingleKerning(g) {
     leftMargin = leftMargin * kSVGScale * lilScale
     rightMargin = rightMargin * kSVGScale * lilScale
 
-    el.className = side
+    el.dataset.name = glyphName
+    el.className = 'g ' + side
     el.style.backgroundImage = "url('" + svgURI + "')"
     el.style.backgroundSize = svgWidth + 'px ' + lilGlyphSize + 'px'
     el.style.width = svgWidth + 'px'
@@ -653,7 +693,7 @@ function renderSingleKerning(g) {
       var otherSvg = svgRepository[glyphName]
 
       var pair = document.createElement('a')
-      pair.className = 'kernpair'
+      pair.className = 'kernpair ' + side
       pair.title = (
         asLeftSide ? selfName + '/' + glyphName + '  ' + kerningValue :
         glyphName + '/' + selfName + '  ' + kerningValue
@@ -701,6 +741,34 @@ function renderSingleKerning(g) {
       label.innerText = kerningValue
       kern.appendChild(label)
 
+      if (glyphName != selfName) {
+        var link = document.createElement('div')
+        link.className = 'link'
+        var linkA = document.createElement('a')
+        linkA.href = '?g=' + encodeURIComponent(glyphName)
+        linkA.title = 'View ' + glyphName
+        linkA.innerText = '\u2197'
+        linkA.tabIndex = -1
+        wrapIntLink(linkA)
+        link.appendChild(linkA)
+
+        var kLinkAWidth = 16 // sync with CSS .kernpair .link a
+
+        if (asLeftSide) {
+          var rightMetrics = glyphMetrics.metrics[asLeftSide ? glyphName : selfName]
+          linkA.style.marginRight = pxround(
+            ((rightMetrics.advance / 2) * kSVGScale * lilScale) - (kLinkAWidth / 2)
+          ) + 'px'
+        } else {
+          linkA.style.marginLeft = pxround(
+            ((leftMetrics.advance / 2) * kSVGScale * lilScale) - (kLinkAWidth / 2)
+          ) + 'px'
+        }
+
+        pair.appendChild(link)
+      }
+      
+
       kerningList.appendChild(pair)
     })
 
@@ -710,7 +778,9 @@ function renderSingleKerning(g) {
   var selfLeft = mkpairGlyph(g.name, 'left', 0, thisSvgURI)
   var selfRight = mkpairGlyph(g.name, 'right', 0, thisSvgURI)
 
-  if (mkpairs(kerningAsLeft, g.name, selfLeft, 'left')) {
+  if (mkpairs(kerningAsLeft, g.name, selfLeft, 'left') &&
+      kerningAsRightKeys.length != 0)
+  {
     var div = document.createElement('div')
     div.className = 'divider'
     kerningList.appendChild(div)

docs/glyphs/index.html

@@ -3182,12 +3182,12 @@
       <div id="single-info" style="display:none">
         <ul>
           <li>Glyph name: <span class="name"></span></li>
-          <li class="unicode">Unicode: <span class="unicodeCodePoint num"></span> <span class="unicodeName"></span></li>
+          <li class="unicode">Unicode: <a><span class="unicodeCodePoint num"></span> <span class="unicodeName"></span></a></li>
           <li>Advance width: <span class="advanceWidth num"></span></li>
           <li>Left margin: <span class="marginLeft num"></span></li>
           <li>Right margin: <span class="marginRight num"></span></li>
           <li>Color mark: <span class="colorMark">&nbsp;</span></li>
-          <li><a class="svgFile">Download SVG file</a></li>
+          <li><a class="svgFile">&darr; Download SVG file</a></li>
         </ul>
       </div>
     </div>

docs/index.html

@@ -44,7 +44,7 @@
     <div class="row white" style="padding-bottom:0"><div>
       <h2><a id="sample" href="#sample">Sample</a></h2>
       <p style="margin-bottom:0">
-        <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/Interface-samples" class="plain"><img src="res/sample.png" style="width:100%;display:block"></a>
+        <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/Interface-samples" class="plain"><img src="res/sample.png" width="888" style="width:100%;display:block"></a>
       </p>
     </div></div>
 

misc/gen-metrics-and-svgs.py

@@ -285,10 +285,10 @@ def genKerningInfo(font, glyphnames, nameToIdMap):
 
     for lname in leftnames:
       for rname in rightnames:
-        lnameId = nameToIdMap[lname]
+        lnameId = nameToIdMap.get(lname)
-        rnameId = nameToIdMap[rname]
+        rnameId = nameToIdMap.get(rname)
-        # print('%r' % [lnameId, rnameId, v])
+        if lnameId and rnameId:
-        pairs.append([lnameId, rnameId, v])
+          pairs.append([lnameId, rnameId, v])
 
   # print('pairs: %r' % pairs)
   return pairs