diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-02-21 23:20:04 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-02-21 23:20:04 +0300 |
commit | 2e929794e7095cb9a4552f9a8a53917fcbfe06e6 (patch) | |
tree | eaf5afe1b5015e6bd60798fdd06c95cadd7f49f7 /docs | |
parent | bd425b8fb85efebfae31e45b0c30b521ecd82a79 (diff) | |
download | inter-2e929794e7095cb9a4552f9a8a53917fcbfe06e6.tar.xz |
website
Diffstat (limited to 'docs')
-rw-r--r-- | docs/_layouts/default.html | 1 | ||||
-rw-r--r-- | docs/dynmetrics/index.html | 43 | ||||
-rw-r--r-- | docs/index.css | 61 | ||||
-rw-r--r-- | docs/index.html | 166 | ||||
-rw-r--r-- | docs/res/base.css | 33 | ||||
-rw-r--r-- | docs/res/base.js | 38 |
6 files changed, 300 insertions, 42 deletions
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 63f0a4eb7..dbd245320 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -60,6 +60,7 @@ endfor <meta property="og:locale" content="en_US" /> </head> <body> + <div id="hud-notification"><div class="msg">Hello</div></div> <script src="{{url_root}}res/base.js?v={{ base_js_v }}"></script> <div class="row menu"> diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index 24ace9ad3..2ffa7c8b5 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -39,16 +39,16 @@ endfor <formula> tracking = <const>a</const> + <const>b</const> × - <const>e</const><sup>(<const>c</const> × fontSize)</sup> + <const title="Base of natural logarithm; ≈2.718">e</const><sup>(<const>c</const> × <const>z</const>)</sup> </formula> <formula> - leading = <num>1.4</num> × fontSize + leading = round(<num data-binding="var-l">1.4</num> × <const>z</const>) </formula> <formula title="Values for Inter UI"> <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.016</num></g> <g><const title="Constant b">b</const> = <num data-binding="var-b">0.21</num></g> <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.18</num></g> - <g class="wide-window"><const title="Base of natural logarithm">e</const> ≈ <num>2.718</num></g> + <g><const>z</const> = font size</g> </formula> </p> <p class="wide-window"> @@ -251,10 +251,10 @@ var a = -0.016, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20 var l = 1.4 -// InterUIDynamicTracking takes the font size in points or pixels and returns -// the compensating tracking in EM. +// _InterUIDynamicTracking is a version of InterUIDynamicTracking that +// uses some global variables that are adjustable. // -function InterUIDynamicTracking(fontSize, weightClass) { +function _InterUIDynamicTracking(fontSize, weightClass) { // Note: weightClass is currently unused // // y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x) @@ -263,7 +263,7 @@ function InterUIDynamicTracking(fontSize, weightClass) { // return a + b * Math.pow(Math.E, c * fontSize) // [6 - 38] 0.05798 .. -0.01099 (midpoint = 12.533) - + // // y = 0.025 - (ln(x) * 0.01) // return 0.025 - Math.log(fontSize) * 0.01 } @@ -322,7 +322,7 @@ Sample.prototype.idealDistance = function(fontSize) { Sample.prototype.setFontSize = function(fontSize) { this.fontSize = fontSize - this.tracking = baseTracking + InterUIDynamicTracking(fontSize, weightClass) + this.tracking = baseTracking + _InterUIDynamicTracking(fontSize, weightClass) this.lineHeight = InterUIDynamicLineHeight(fontSize, weightClass) this.maxBoxWidth = Math.round(fontSize * (this.tracking + 1) * 25) @@ -352,11 +352,11 @@ Sample.prototype.setFontSize = function(fontSize) { } Sample.prototype.cssProperties = function() { - return { - fontSize: round(this.fontSize, 3) + 'px', - letterSpacing: round(this.tracking, 3) + 'em', - lineHeight: round(this.lineHeight, 3) + 'px', - } + return [ + ['font-size', round(this.fontSize, 3) + 'px'], + ['letter-spacing', round(this.tracking, 3) + 'em'], + ['line-height', round(this.lineHeight, 3) + 'px'], + ] } Sample.prototype.render = function() { @@ -479,7 +479,7 @@ function updateGraphPlot() { graph.clear() graph.plotLine(idealValuesList, '#0d3') graph.plotf(function(x) { - return InterUIDynamicTracking(x, weightClass) + return _InterUIDynamicTracking(x, weightClass) }) if (focusedSample) { var graphedFontSize = Math.min(24, focusedSample.fontSize) // clamp to [-inf,24] @@ -496,13 +496,22 @@ codeOutput.addEventListener('focus', function(ev) { codeOutput.select() }, {passive:false,capture:true}) +codeOutput.addEventListener('pointerdown', function(ev) { + // TODO: don't do this if codeOutput is focused + ev.preventDefault() + ev.stopPropagation() + codeOutput.select() + document.execCommand("copy") + HUDNotification.show('Copied to clipboard') +}, {passive:false,capture:true}) + function updateCodeView() { var s = '' if (focusedSample) { - var cssprops = focusedSample.cssProperties() - var props = Object.keys(cssprops) + var props = focusedSample.cssProperties() props.forEach(function(prop, i) { - s += prop + ': ' + cssprops[prop] + ';' + var name = prop[0], value = prop[1] + s += name + ': ' + value + ';' if (i != props.length-1) { s += '\n' } diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 000000000..9fb3c5d45 --- /dev/null +++ b/docs/index.css @@ -0,0 +1,61 @@ + +#hidden-text-input { + position: absolute; + left:0; + top:0; + background: none; + border: none; + opacity: 0; + pointer-events: none; +} + +.dynmet-calc { + font-size: 18px; + line-height: 26px; + user-select: text; +} + .dynmet-calc input { + border: none; + box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.3); + background: transparent; + font: inherit; + color: inherit; + outline: none; + margin: 0 0.2em; + width: 40px; + text-align: center; + line-height: inherit; + color: #eee; + user-select: text; + } + .dynmet-calc input:focus { + color: #fff; + box-shadow: inset 0 -2px 0 0 rgb(43, 139, 247); + } + .dynmet-calc input[type=number]::-webkit-inner-spin-button, + .dynmet-calc input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + .dynmet-calc .arrow { + margin: 0 0.8em; + color: #eee; + } + + .dynmet-calc #dynmet-tracking { + box-shadow: none; + width: 57px; + margin-right: 0.1em; + color: #eee; + } + .dynmet-calc #dynmet-tracking.percent { + width: 34px; + } + + .dynmet-calc #dynmet-unit:hover { + color: rgb(43, 139, 247); + } + .dynmet-calc #dynmet-unit:active { + color: white; + } diff --git a/docs/index.html b/docs/index.html index fb2345fc9..a2f4e8dd7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,6 +1,23 @@ --- layout: default --- +{% + +capture url_root + %}{% if site.safe == false %}/{% else %}/inter/{% endif +%}{% +endcapture %}{% + +for file in site.static_files %}{% + assign _path = file.path | remove_first: "/inter" %}{% + if _path == "/index.css" %}{% + assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% + endif %}{% +endfor + +%} +<link rel="stylesheet" href="index.css?v={{ index_css_v }}"> +<input type="text" id="hidden-text-input"> <div class="row"><div> <h1>The Inter UI font family</h1> @@ -46,8 +63,17 @@ layout: default <p> </p> <h2><a href="{{url_root}}dynmetrics/">Dynamic Metrics</a></h2> + <p class="dynmet-calc"> + Font size + <input id="dynmet-font-size" type="number" value="12" + ><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span> + <span class="arrow">—></span> + letter spacing + <input id="dynmet-tracking" type="number" value="0.008"> + <span id="dynmet-unit">em</span> + </p> <p> - There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter UI <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results. + There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter UI <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.<br> <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics —></a> </p> @@ -297,30 +323,124 @@ layout: default — <a href="https://twitter.com/rsms" class="plain">@rsms</a> </div></div> -<script>(function(){ - - // FAQ anchors - var av = document.querySelectorAll('ul.faq > li.q'), a, i, e, id, tn - for (i = 0; i < av.length; ++i) { - e = av[i] - tn = document.createTextNode('Q ') - e.insertBefore(tn, e.firstChild) - id = e.id - if (id) { - a = document.createElement('a') - // a.id = id - a.href = '#' + id - a.className = 'plain' - a.innerHTML = e.innerHTML - e.innerText = '' - e.appendChild(a) +<script> + +// FAQ anchors +(function(){ + +var av = document.querySelectorAll('ul.faq > li.q'), a, i, e, id, tn +for (i = 0; i < av.length; ++i) { + e = av[i] + tn = document.createTextNode('Q ') + e.insertBefore(tn, e.firstChild) + id = e.id + if (id) { + a = document.createElement('a') + // a.id = id + a.href = '#' + id + a.className = 'plain' + a.innerHTML = e.innerHTML + e.innerText = '' + e.appendChild(a) + } +} +av = document.querySelectorAll('ul.faq > li.a') +for (i = 0; i < av.length; ++i) { + e = av[i] + tn = document.createTextNode('A ') + e.insertBefore(tn, e.firstChild) +} + +})(); + + +// dynamic metrics calculator +(function(){ + +var hiddenTextInput = $('#hidden-text-input') +var fontSizeEl = $('#dynmet-font-size') +var trackingEl = $('#dynmet-tracking') +var unitEl = $('#dynmet-unit') + +var unitFormatters = [ + ['em', 'em', function(fontSize, tracking) { + return tracking.toFixed(3) + }], + ['px', 'px', function(fontSize, tracking) { + return (fontSize * tracking).toFixed(3) + }], + ['%', 'percent', function(fontSize, tracking) { + return (tracking * 100).toFixed(1) + }], +] +var unitFormatter = unitFormatters[0][2] + +function updateTracking() { + var fontSize = parseFloat(fontSizeEl.value) + if (isNaN(fontSize) || fontSize < 1) { + fontSizeEl.value = fontSize = 1 + } else if (fontSize > 999) { + fontSizeEl.value = fontSize = 999 + } + var tracking = InterUIDynamicTracking(fontSize) + trackingEl.value = unitFormatter(fontSize, tracking) +} + +function toggleUnit() { + var unit = unitEl.innerText + var u, x = -1 + for (var i = 0; i < unitFormatters.length; i++) { + if (x == -1) { + u = unitFormatters[i] + if (u[0] == unit) { + x = i + 1 + if (x == unitFormatters.length) { + x = 0 + } + u = unitFormatters[x] + } } + trackingEl.classList.remove(unitFormatters[i][1]) // class name } - av = document.querySelectorAll('ul.faq > li.a') - for (i = 0; i < av.length; ++i) { - e = av[i] - tn = document.createTextNode('A ') - e.insertBefore(tn, e.firstChild) + unit = u[0] + trackingEl.classList.add(u[1]) + unitFormatter = u[2] + unitEl.innerText = unit + updateTracking() +} + +function onPointerdownUnit(ev) { + toggleUnit() + if (ev) { + ev.preventDefault() + ev.stopPropagation() } +} + +function onPointerdownTracking(ev) { + if (ev) { + ev.preventDefault() + ev.stopPropagation() + } + hiddenTextInput.value = trackingEl.value + unitEl.innerText + hiddenTextInput.select() + document.execCommand("copy") + trackingEl.select() + HUDNotification.show('Copied to clipboard') +} + +var passiveListener = { passive: true, capture: false } +var activeListener = { capture: true } + +fontSizeEl.addEventListener('input', updateTracking, passiveListener) +fontSizeEl.addEventListener('change', updateTracking, passiveListener) + +unitEl.addEventListener('pointerdown', onPointerdownUnit, activeListener) +unitEl.addEventListener('mousedown', onPointerdownUnit, activeListener) + +trackingEl.addEventListener('pointerdown', onPointerdownTracking, activeListener) +trackingEl.addEventListener('mousedown', onPointerdownTracking, activeListener) + +updateTracking() })();</script> diff --git a/docs/res/base.css b/docs/res/base.css index bf0c440b7..555bf4fa6 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -269,8 +269,8 @@ h1 > a, h2 > a, h3 > a { color: #aaa; } .row.dark a:hover { - color: rgba(160, 190, 255, 1); - text-decoration: underline rgba(164, 188, 255, 0.6); + color: rgb(95, 170, 255); + text-decoration: underline rgb(95, 170, 255); } .row.dark h2, .row.dark h2 > a { color: #ccc; @@ -467,6 +467,35 @@ box h3 { margin-bottom:0.8em; } +#hud-notification { + position: fixed; + bottom: 20px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 9; + pointer-events: none; +} + #hud-notification .msg { + background: #000; + color: white; + height: 50px; + line-height: 50px; + font-size: 22px; + letter-spacing: -0.012em; + padding: 0 0.7em; + border-radius: 4px; + opacity: 0.1; + transition: 250ms all ease-in; + transform: translate3d(0, 71px, 0); /* height + bottom offset + 1 */ + } + #hud-notification.visible .msg { + transform: translate3d(0, 0, 0); + transition: 120ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); + opacity: 1; + } + /* ------------------------------------------------------ */ diff --git a/docs/res/base.js b/docs/res/base.js index 3ef970cc3..859b8d56f 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -48,6 +48,44 @@ var timeNow = ( ) +var HUDNotification = { + el: $('#hud-notification'), + timer: null, + visible: false, + + show: function(message, duration) { + var n = this + n.el.firstChild.innerText = message + n.el.classList.add('visible') + if (n.visible) { + n.hide() + setTimeout(function(){ n.show(message, duration) }, 120) + return + } + n.visible = true + clearTimeout(n.timer) + n.timer = setTimeout(function(){ n.hide() }, duration || 1200) + }, + + hide: function() { + var n = this + if (n.visible) { + n.el.classList.remove('visible') + n.visible = false + } + } +} + + +// InterUIDynamicTracking takes the font size in points or pixels and returns +// the compensating tracking in EM. +// +function InterUIDynamicTracking(fontSize) { + // tracking = a + b * e ^ (c * fontSize) + return -0.016 + 0.21 * Math.pow(Math.E, -0.18 * fontSize) +} + + // Mac or not? Maybe even a buggy Safari? var isMac = false if (!window.MSStream && |