website: glyphs: don't clip glyphs spilling outside the EM square in single-view mode. Also, adds x-height and cap height guide lines to previews

2 files changed, 37 insertions, 10 deletions

diff --git a/docs/glyphs/glyphs.css b/docs/glyphs/glyphs.css
index 08be80427..aff0e4b67 100644
--- a/docs/glyphs/glyphs.css
+++ b/docs/glyphs/glyphs.css
@@ -27,6 +27,7 @@ body.single #glyphs {
   max-width:888px;
   margin:0 auto;
   padding-left: 0;
+  overflow: visible;
 }
   .glyph {
     height: 346px;
@@ -41,14 +42,26 @@ body.single #glyphs {
     position: relative;
     text-shadow: none;
   }
-  .glyph .baseline {
-    background: rgba(0,90,230,.6);
+  .glyph .line {
+    background: rgba(0,0,0,.1);
     position: absolute;
-    left:0; right:0; bottom:64px;
+    left:0; right:0;
     height: 1px;
     z-index:0;
     visibility: hidden;
   }
+  .glyph .line.baseline {
+    background: rgba(0,90,230,.6);
+    bottom: 64px;
+  }
+  .glyph .line.x-height {
+    background: rgba(230,60,10,.6);
+    top: 128px;
+  }
+  .glyph .line.cap-height {
+    background: rgba(60,130,20,.6);
+    top: 76px;
+  }
   .glyph .names {
     position: absolute;
     left:20px; right:20px; bottom:6px;
@@ -74,7 +87,7 @@ body.single #glyphs {
     background: transparent;
     border-left: 1px dashed transparent;
   }
-  .glyph:hover .baseline {
+  .glyph:hover .line {
     visibility: visible;
   }
   .glyph:hover .advance {
@@ -95,6 +108,9 @@ body.single #glyphs {
     z-index:1;
     opacity:0.95;
   }
+  body.single .glyph svg {
+    overflow: visible;
+  }
   .glyph .advancez {
     display: block;
     background: salmon;
diff --git a/docs/glyphs/glyphs.js b/docs/glyphs/glyphs.js
index e3e61e0e7..63b5ae2d7 100644
--- a/docs/glyphs/glyphs.js
+++ b/docs/glyphs/glyphs.js
@@ -130,7 +130,7 @@ fetchAll(render)
 
 
 var styleSheet = document.styleSheets[document.styleSheets.length-1]
-var glyphRule, baselineRule, zeroWidthAdvRule
+var glyphRule, lineRule, zeroWidthAdvRule
 var currentScale = 0
 var defaultSingleScale = 1
 var currentSingleScale = 1
@@ -183,7 +183,7 @@ function setScale(scale) {
 
   if (!glyphRule) {
     glyphRule = styleSheet.cssRules[styleSheet.insertRule('#glyphs .glyph {}', styleSheet.cssRules.length)]
-    baselineRule = styleSheet.cssRules[styleSheet.insertRule('#glyphs .glyph .baseline {}', styleSheet.cssRules.length)]
+    lineRule = styleSheet.cssRules[styleSheet.insertRule('#glyphs .glyph .line {}', styleSheet.cssRules.length)]
     zeroWidthAdvRule = styleSheet.cssRules[styleSheet.insertRule('#glyphs .glyph.zero-width .advance {}', styleSheet.cssRules.length)]
   }
 
@@ -197,7 +197,7 @@ function setScale(scale) {
       glyphRule.style.marginBottom = Math.ceil(16 / scale) + 'px';
     }
   }
-  baselineRule.style.height = hairline + 'px'
+  lineRule.style.height = hairline + 'px'
   zeroWidthAdvRule.style.borderWidth = (hairline) + 'px'
 
   updateLayoutAfterChanges()
@@ -474,9 +474,20 @@ function renderGlyphGraphicG(g, lastGlyphName, lastGlyphEl, singleGlyph) {
     glyph.title = name
   }
 
-  var baseline = document.createElement('div')
-  baseline.className = 'baseline'
-  glyph.appendChild(baseline)
+  var line = document.createElement('div')
+  line.className = 'line baseline'
+  line.title = "Baseline"
+  glyph.appendChild(line)
+
+  line = document.createElement('div')
+  line.className = 'line x-height'
+  line.title = "x-height"
+  glyph.appendChild(line)
+
+  line = document.createElement('div')
+  line.className = 'line cap-height'
+  line.title = "Cap height"
+  glyph.appendChild(line)
 
   names = document.createElement('div')
   names.className = 'names'