Website
This commit is contained in:
Rasmus Andersson
parent
ca5fe60c99
commit
b116f9abdd
6 changed files with 169 additions and 444 deletions
|
|
@ -1,5 +1,5 @@
|
|||
h1 span.glyph-name {}
|
||||
h1 span.glyph-name:before {
|
||||
h1 .glyph-name {}
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
updateLocation()
|
||||
if (location.href != url) {
|
||||
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) {
|
||||
var cached = cachedSVGDataURIs[svg.id]
|
||||
function getSvgDataURI(svg, fill) {
|
||||
if (!fill) {
|
||||
fill = ''
|
||||
}
|
||||
var cached = cachedSVGDataURIs[svg.id + '-' + fill]
|
||||
if (!cached) {
|
||||
cached = 'data:image/svg+xml,' + svg.outerHTML.replace(/[\r\n]+/g, '')
|
||||
cachedSVGDataURIs[svg.id] = cached
|
||||
var src = svg.outerHTML.replace(/[\r\n]+/g, '')
|
||||
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(
|
||||
document.querySelectorAll('.kernpair.selected'),
|
||||
function(e) {
|
||||
e.classList.remove('selected')
|
||||
}
|
||||
)
|
||||
// deselect existing
|
||||
eachElement('.kernpair.selected', function(kernpair) {
|
||||
eachElement(kernpair, '.g', function (glyph) {
|
||||
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 (!directly) {
|
||||
el.scrollIntoViewIfNeeded()
|
||||
}
|
||||
|
||||
if (!el) {
|
||||
history.replaceState({}, '', location.search)
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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"> </span></li>
|
||||
<li><a class="svgFile">Download SVG file</a></li>
|
||||
<li><a class="svgFile">↓ Download SVG file</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -285,10 +285,10 @@ def genKerningInfo(font, glyphnames, nameToIdMap):
|
|||
|
||||
for lname in leftnames:
|
||||
for rname in rightnames:
|
||||
lnameId = nameToIdMap[lname]
|
||||
rnameId = nameToIdMap[rname]
|
||||
# print('%r' % [lnameId, rnameId, v])
|
||||
pairs.append([lnameId, rnameId, v])
|
||||
lnameId = nameToIdMap.get(lname)
|
||||
rnameId = nameToIdMap.get(rname)
|
||||
if lnameId and rnameId:
|
||||
pairs.append([lnameId, rnameId, v])
|
||||
|
||||
# print('pairs: %r' % pairs)
|
||||
return pairs
|
||||
|
|
|
|||
Reference in a new issue