archive/inter-font
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Rasmus Andersson 2018-09-17 10:33:56 -07:00
parent bf78d24ea1
commit 8fdcaa7e3e
2 changed files with 37 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/glyphs/glyphs.css
View file

@ -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;

23
docs/glyphs/glyphs.js
View file

@ -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'