From b116f9abdd12876fc4c1bda79957803b1b3e8d6d Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Mon, 28 Aug 2017 11:31:42 -0700 Subject: Website --- docs/glyphs/glyphs.css | 79 ++++++++-- docs/glyphs/glyphs.js | 122 +++++++++++---- docs/glyphs/index.html | 4 +- docs/glyphs/metrics.json | 398 ----------------------------------------------- docs/index.html | 2 +- 5 files changed, 165 insertions(+), 440 deletions(-) (limited to 'docs') diff --git a/docs/glyphs/glyphs.css b/docs/glyphs/glyphs.css index 636211aa1..c2af47a2d 100644 --- a/docs/glyphs/glyphs.css +++ b/docs/glyphs/glyphs.css @@ -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; + } diff --git a/docs/glyphs/glyphs.js b/docs/glyphs/glyphs.js index d2212424b..fccd1bce8 100644 --- a/docs/glyphs/glyphs.js +++ b/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) - 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(/