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; max-width:888px;
margin:0 auto; margin:0 auto;
padding-left: 0; padding-left: 0;
overflow: visible;
} }
.glyph { .glyph {
height: 346px; height: 346px;
@ -41,14 +42,26 @@ body.single #glyphs {
position: relative; position: relative;
text-shadow: none; text-shadow: none;
} }
.glyph .baseline { .glyph .line {
background: rgba(0,90,230,.6); background: rgba(0,0,0,.1);
position: absolute; position: absolute;
left:0; right:0; bottom:64px; left:0; right:0;
height: 1px; height: 1px;
z-index:0; z-index:0;
visibility: hidden; 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 { .glyph .names {
position: absolute; position: absolute;
left:20px; right:20px; bottom:6px; left:20px; right:20px; bottom:6px;
@ -74,7 +87,7 @@ body.single #glyphs {
background: transparent; background: transparent;
border-left: 1px dashed transparent; border-left: 1px dashed transparent;
} }
.glyph:hover .baseline { .glyph:hover .line {
visibility: visible; visibility: visible;
} }
.glyph:hover .advance { .glyph:hover .advance {
@ -95,6 +108,9 @@ body.single #glyphs {
z-index:1; z-index:1;
opacity:0.95; opacity:0.95;
} }
body.single .glyph svg {
overflow: visible;
}
.glyph .advancez { .glyph .advancez {
display: block; display: block;
background: salmon; background: salmon;

23
docs/glyphs/glyphs.js
View file

@ -130,7 +130,7 @@ fetchAll(render)
var styleSheet = document.styleSheets[document.styleSheets.length-1] var styleSheet = document.styleSheets[document.styleSheets.length-1]
var glyphRule, baselineRule, zeroWidthAdvRule var glyphRule, lineRule, zeroWidthAdvRule
var currentScale = 0 var currentScale = 0
var defaultSingleScale = 1 var defaultSingleScale = 1
var currentSingleScale = 1 var currentSingleScale = 1
@ -183,7 +183,7 @@ function setScale(scale) {
if (!glyphRule) { if (!glyphRule) {
glyphRule = styleSheet.cssRules[styleSheet.insertRule('#glyphs .glyph {}', styleSheet.cssRules.length)] 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)] 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'; glyphRule.style.marginBottom = Math.ceil(16 / scale) + 'px';
} }
} }
baselineRule.style.height = hairline + 'px' lineRule.style.height = hairline + 'px'
zeroWidthAdvRule.style.borderWidth = (hairline) + 'px' zeroWidthAdvRule.style.borderWidth = (hairline) + 'px'
updateLayoutAfterChanges() updateLayoutAfterChanges()
@ -474,9 +474,20 @@ function renderGlyphGraphicG(g, lastGlyphName, lastGlyphEl, singleGlyph) {
glyph.title = name glyph.title = name
} }
var baseline = document.createElement('div') var line = document.createElement('div')
baseline.className = 'baseline' line.className = 'line baseline'
glyph.appendChild(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 = document.createElement('div')
names.className = 'names' names.className = 'names'