new v4 website
This commit is contained in:
Rasmus Andersson
parent
c2452dee3a
commit
2f9a256e6e
274 changed files with 6316 additions and 330038 deletions
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 321 B |
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 304 B |
|
|
@ -1 +0,0 @@
|
|||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 203 B |
|
|
@ -1,278 +0,0 @@
|
|||
body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
const {
|
||||
display: inline;
|
||||
font-size: 1.2em;
|
||||
font-style: italic;
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
sup {
|
||||
/*background:lightpink;*/
|
||||
display: inline-block;
|
||||
font-size:0.92em;
|
||||
position: relative;
|
||||
top:-0.4em;
|
||||
letter-spacing: 0.001em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.row.first {
|
||||
padding-bottom:1em;
|
||||
}
|
||||
|
||||
formula {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 0 1em;
|
||||
line-height: 3em;
|
||||
height: 3em;
|
||||
overflow: hidden;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row.white formula {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
formula:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
formula.code {
|
||||
white-space: pre;
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
|
||||
font-size:0.96em;
|
||||
}
|
||||
formula > * {
|
||||
margin: 0 0.2em 0 0.2em;
|
||||
}
|
||||
formula > g {
|
||||
display: inline-block;
|
||||
}
|
||||
formula > const {
|
||||
margin-bottom: 0.11em;
|
||||
}
|
||||
formula > sup {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.samples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
padding: 50px 0 0 50px; /* note: samples have 50px right margin */
|
||||
}
|
||||
.samples .sample {
|
||||
color: #111;
|
||||
flex: 0 1 auto;
|
||||
outline: none;
|
||||
margin-right: 50px;
|
||||
margin-bottom: 50px;
|
||||
min-width: 50px;
|
||||
}
|
||||
.samples .sample > * {
|
||||
display: block;
|
||||
outline: none;
|
||||
}
|
||||
.samples .sample .content {
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid transparent;
|
||||
margin-left: -12px;
|
||||
}
|
||||
.samples .sample.selected .content {
|
||||
border-left-color: rgb(45, 143, 255);
|
||||
}
|
||||
.samples .sample .di {
|
||||
background-color: #ccc;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.samples .sample .di > span {
|
||||
display: block;
|
||||
background-color: #333;
|
||||
height: 100%;
|
||||
}
|
||||
.samples .sample .di.match > span {
|
||||
background-color: #0d3;
|
||||
}
|
||||
.samples .sample .di.unavailable {
|
||||
background-color: #eee;
|
||||
}
|
||||
.samples .sample .di.unavailable > span {
|
||||
visibility: hidden;
|
||||
}
|
||||
.samples .sample .info {
|
||||
display: block;
|
||||
font-size: 11px !important;
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 400;
|
||||
line-height: 11px;
|
||||
margin-bottom: 9px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
|
||||
.row.with-sidebar {
|
||||
padding: 0;
|
||||
}
|
||||
.row.with-sidebar > *:first-child {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.row.with-sidebar > .sidebar {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
div.controls {
|
||||
box-sizing: border-box;
|
||||
width: 250px;
|
||||
max-width: 250px;
|
||||
flex: 0 0 auto;
|
||||
padding: 10px 0;
|
||||
border-left: 4px solid #f4f4f4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.controls hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: #f4f4f4;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
div.controls hr.without-bottom-margin { margin-bottom: 0; }
|
||||
div.controls hr.without-top-margin { margin-top: 0; }
|
||||
div.controls hr.without-margins { margin: 0; }
|
||||
div.controls .control {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
div.controls > h3 {
|
||||
margin: 0 16px;
|
||||
}
|
||||
div.controls > textarea {
|
||||
border: none;
|
||||
padding:16px;
|
||||
height: 240px;
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
color: #999;
|
||||
}
|
||||
div.controls > textarea:focus {
|
||||
color: inherit;
|
||||
}
|
||||
div.controls textarea#code-output {
|
||||
height: 50px;
|
||||
}
|
||||
div.controls .control > * {
|
||||
/*max-width: 50%;*/
|
||||
flex: 1 1 auto;
|
||||
margin:0;
|
||||
margin-right: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
div.controls .control > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
div.controls .control > select {
|
||||
min-width: 6em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
div.controls .control > input,
|
||||
div.controls .control > select {
|
||||
width: 0;
|
||||
outline: none;
|
||||
}
|
||||
div.controls .control > input[type="number"],
|
||||
div.controls .control > input[type="text"] {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
div.controls .control > input[type="number"] {
|
||||
max-width: 60px;
|
||||
-moz-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
}
|
||||
div.controls .control > input[type=number]::-webkit-inner-spin-button,
|
||||
div.controls .control > input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
div.controls .control > input[type="number"][readonly] {
|
||||
max-width: 40px;
|
||||
}
|
||||
div.controls .control > input.wide[type="number"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
div.controls .control > input[type="range"] {
|
||||
/*max-width: 80%;*/
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
}
|
||||
div.controls .control > img.icon,
|
||||
div.controls .control > label {
|
||||
font-family: georgia, serif;
|
||||
font-style: italic;
|
||||
line-height: 16px;
|
||||
color: black;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
div.controls canvas {
|
||||
height: 200px;
|
||||
}
|
||||
div.controls .when-selection {
|
||||
display: none;
|
||||
}
|
||||
div.controls.has-selected-sample .when-selection {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.row.narrow-window {
|
||||
margin-top:0;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 565px) {
|
||||
.row.with-sidebar {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.row.with-sidebar {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* small devices (<= iPhone 6+) */
|
||||
@media only screen and (max-device-width: 414px) {
|
||||
.samples {
|
||||
padding-left: 20px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,683 +1,17 @@
|
|||
---
|
||||
layout: default
|
||||
title: Dynamic Metrics
|
||||
title: 404 not found
|
||||
custom_html_header: |
|
||||
<link rel="canonical" href="https://d.rsms.me/inter-website/v3/dynmetrics/">
|
||||
<meta name="robots" content="noindex">
|
||||
---
|
||||
{%
|
||||
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif %}{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/dynmetrics/index.css" %}{%
|
||||
assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/bindings.js" %}{%
|
||||
assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/graphplot.js" %}{%
|
||||
assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}
|
||||
<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
|
||||
<script src="{{url_root}}res/bindings.js?v={{ bindings_js_v }}"></script>
|
||||
<script src="{{url_root}}res/graphplot.js?v={{ graphplot_js_v }}"></script>
|
||||
|
||||
<div class="row first"><div>
|
||||
<h1>Dynamic Metrics</h1>
|
||||
<div class="row"><div>
|
||||
<h1>404 not found</h1>
|
||||
<p>
|
||||
There's of course no absolute right or wrong when it comes to expressing
|
||||
yourself with typography, but Inter Dynamic Metrics provides guidelines
|
||||
for how to best use Inter.
|
||||
You simply provide the optical font size,
|
||||
and the tracking and line height is calculated for you through the following
|
||||
formula:
|
||||
This page used to exist, but is no longer.<br>
|
||||
</p>
|
||||
<p>
|
||||
<formula>
|
||||
tracking =
|
||||
<const>a</const> + <const>b</const> ×
|
||||
<const title="Base of natural logarithm; ≈2.718">e</const><sup>(<const>c</const> × <const>z</const>)</sup>
|
||||
</formula>
|
||||
<!--formula>
|
||||
line height = <num data-binding="var-l">1.4</num> × <const>z</const>
|
||||
</formula-->
|
||||
<formula title="Values for Inter">
|
||||
<g><const title="Constant a">a</const> = <num data-binding="var-a">-0.0223</num></g>
|
||||
<g><const title="Constant b">b</const> = <num data-binding="var-b">0.185</num></g>
|
||||
<g><const title="Constant c">c</const> = <num data-binding="var-c">-0.1745</num></g>
|
||||
<g><const>z</const> = font size</g>
|
||||
</formula>
|
||||
</p>
|
||||
<p class="wide-window">
|
||||
The controls below can be used to play around with the
|
||||
<const>a</const>, <const>b</const> and <const>c</const> constants to discover
|
||||
how they affect tracking.
|
||||
</p>
|
||||
<p class="narrow-window">
|
||||
<small>View this on a larger screen to enable interactive control.</small>
|
||||
You can visit an archived version of the old website:
|
||||
<a href="https://d.rsms.me/inter-website/v3/dynmetrics/">https://d.rsms.me/inter-website/v3/dynmetrics/</a>
|
||||
</p>
|
||||
</div></div>
|
||||
|
||||
<div class="white full-width row with-sidebar">
|
||||
|
||||
<div class="samples">
|
||||
<p class="sample">
|
||||
<span class="di"><span></span></span>
|
||||
<span class="info"
|
||||
title="size, tracking, (ideal tracking) — progress bar shows distance from ideal"
|
||||
>15 0.0 ( 0.0 )</span>
|
||||
<span contenteditable spellcheck="false" class="content">
|
||||
Such a riot of sea and wind strews the whole extent of beach with whatever has been lost or thrown overboard, or torn out of sunken ships. Many a man has made a good week’s work in a single day by what he has found while walking along the Beach when the surf was down.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar controls">
|
||||
|
||||
<div class="control">
|
||||
<img title="Style" class="icon" src="icons/style.svg">
|
||||
<select data-binding="style">
|
||||
<option value="thin">Thin</option>
|
||||
<option value="extra-light">Extra Light</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="regular" default selected>Regular</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="semi-bold">Semi Bold</option>
|
||||
<option value="bold">Bold</option>
|
||||
<option value="extra-bold">Extra Bold</option>
|
||||
<option value="black">Black</option>
|
||||
<option disabled>————————————</option>
|
||||
<option value="thin-italic">Thin Italic</option>
|
||||
<option value="extra-light-italic">Extra Light Italic</option>
|
||||
<option value="light-italic">Light Italic</option>
|
||||
<option value="italic">Italic</option>
|
||||
<option value="medium-italic">Medium Italic</option>
|
||||
<option value="semi-bold-italic">Semi Bold Italic</option>
|
||||
<option value="bold-italic">Bold Italic</option>
|
||||
<option value="extra-bold-italic">Extra Bold Italic</option>
|
||||
<option value="black-italic">Black Italic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control">
|
||||
<img title="Base tracking" class="icon" src="icons/letter-spacing.svg">
|
||||
<input type="range" min="-0.05" max="0.06" step="0.001" data-binding="base-tracking">
|
||||
<input type="number" min="-0.15" max="1" step="0.001" data-binding="base-tracking">
|
||||
</div>
|
||||
<div class="control">
|
||||
<img title="Line height" class="icon" src="icons/line-height.svg">
|
||||
<input type="range" min="1" max="2" step="0.01" data-binding="var-l">
|
||||
<input type="number" min="1" max="2" step="0.01" data-binding="var-l">
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="control">
|
||||
<label title="Constant a">a</label>
|
||||
<input type="range" min="-0.05" max="0" step="0.001" data-binding="var-a">
|
||||
<input type="number" min="-0.05" max="0" step="0.0001" data-binding="var-a">
|
||||
</div>
|
||||
<div class="control">
|
||||
<label title="Constant b">b</label>
|
||||
<input type="range" min="0" max="1" step="0.01" data-binding="var-b">
|
||||
<input type="number" min="0" max="1" step="0.001" data-binding="var-b">
|
||||
</div>
|
||||
<div class="control">
|
||||
<label title="Constant c">c</label>
|
||||
<input type="range" min="-1" max="0" step="0.01" data-binding="var-c">
|
||||
<input type="number" min="-1" max="0" step="0.001" data-binding="var-c">
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="control">
|
||||
<label title="Number of ideal matches">ni</label>
|
||||
<input title="Number of ideal matches" type="number" readonly data-binding="ideal-count">
|
||||
<label title="Distance from ideal">di</label>
|
||||
<input title="Distance from ideal" type="number" class="wide" readonly data-binding="ideal-distance">
|
||||
</div>
|
||||
|
||||
<hr class="without-bottom-margin">
|
||||
|
||||
<canvas class="graphplot">Canvas not Supported</canvas>
|
||||
|
||||
<hr class="when-selection without-top-margin">
|
||||
<h3 class="when-selection">CSS</h3>
|
||||
<textarea class="when-selection" readonly id="code-output"></textarea>
|
||||
|
||||
<hr class="without-top-margin">
|
||||
<h3>Ideal values</h3>
|
||||
<textarea id="ideal-values"></textarea>
|
||||
<hr class="without-top-margin">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">(function(){
|
||||
|
||||
// internal variables that are user-controllable, but are not part of
|
||||
// Dynamic Metrics
|
||||
var baseTracking = 0
|
||||
var weightClass = 400
|
||||
|
||||
function round(num, prec) {
|
||||
return parseFloat(num.toFixed(prec))
|
||||
}
|
||||
|
||||
// Ideal values designed one by one, by hand.
|
||||
// font size => tracking
|
||||
var idealValues = {}
|
||||
var idealValuesList = []
|
||||
var idealValuesTextArea = $('textarea#ideal-values')
|
||||
|
||||
function setIdealValues(valueMap) {
|
||||
idealValues = valueMap
|
||||
idealValuesList = []
|
||||
Object.keys(idealValues).forEach(function(fontSize) {
|
||||
idealValuesList.push([fontSize, idealValues[fontSize]])
|
||||
})
|
||||
if (idealValuesTextArea.value == '') {
|
||||
idealValuesTextArea.value = idealValuesList.map(function(t){
|
||||
return t[0] + '\t' + t[1]
|
||||
}).join('\n')
|
||||
}
|
||||
}
|
||||
|
||||
function parseValues(s) {
|
||||
var values = {}
|
||||
s = s.replace(/^[\s\r\t\n]+|[\s\r\t\n]+$/g, '') // trim whitespace
|
||||
s.split(/\s*\r?\n\s*/).map(function(line) {
|
||||
var t = line.split(/\s+/)
|
||||
if (t.length == 2) {
|
||||
t[0] = parseInt(t[0])
|
||||
t[1] = parseFloat(t[1])
|
||||
values[t[0]] = t[1]
|
||||
}
|
||||
})
|
||||
return values
|
||||
}
|
||||
|
||||
setIdealValues({
|
||||
// // 2018
|
||||
// 6: 0.021,
|
||||
// 7: 0.017,
|
||||
// 8: 0.013,
|
||||
// 9: 0.01,
|
||||
// 10: 0.007,
|
||||
// 11: 0.005,
|
||||
// 12: 0.002,
|
||||
// 13: 0,
|
||||
// 14: -0.002,
|
||||
// 15: -0.004,
|
||||
// 16: -0.005,
|
||||
// 17: -0.007,
|
||||
// 18: -0.008,
|
||||
// 20: -0.01,
|
||||
// 24: -0.013,
|
||||
// 30: -0.016,
|
||||
// 40: -0.02,
|
||||
// 80: -0.02,
|
||||
|
||||
// 2019-02-02
|
||||
// 6: 0.066,
|
||||
// 7: 0.05,
|
||||
// 8: 0.036,
|
||||
// 9: 0.025,
|
||||
// 10: 0.015,
|
||||
// 11: 0.007,
|
||||
// 12: 0,
|
||||
// 13: -0.005,
|
||||
// 14: -0.01,
|
||||
// 15: -0.014,
|
||||
// 16: -0.017,
|
||||
// 17: -0.02,
|
||||
// 18: -0.022,
|
||||
// 20: -0.026,
|
||||
// 24: -0.03,
|
||||
// 30: -0.033,
|
||||
// 40: -0.034,
|
||||
// 80: -0.034,
|
||||
|
||||
// // 2019-02-06
|
||||
// 6: 0.04,
|
||||
// 7: 0.032,
|
||||
// 8: 0.024,
|
||||
// 9: 0.017,
|
||||
// 10: 0.01,
|
||||
// 11: 0.005,
|
||||
// 12: 0,
|
||||
// 13: -0.004,
|
||||
// 14: -0.008,
|
||||
// 15: -0.011,
|
||||
// 16: -0.014,
|
||||
// 17: -0.017,
|
||||
// 18: -0.019,
|
||||
// 20: -0.023,
|
||||
// 24: -0.029,
|
||||
// 30: -0.034,
|
||||
// 40: -0.037,
|
||||
// 80: -0.038,
|
||||
|
||||
// 2019-02-07
|
||||
6: 0.043,
|
||||
7: 0.032,
|
||||
8: 0.024,
|
||||
9: 0.016,
|
||||
10: 0.01,
|
||||
11: 0.005,
|
||||
12: 0,
|
||||
13: -0.0025,
|
||||
14: -0.006,
|
||||
15: -0.009,
|
||||
16: -0.011,
|
||||
17: -0.013,
|
||||
18: -0.014,
|
||||
20: -0.017,
|
||||
24: -0.019,
|
||||
30: -0.021,
|
||||
40: -0.022,
|
||||
80: -0.022,
|
||||
})
|
||||
|
||||
|
||||
// Variables for constants involved in Dynamic Metrics
|
||||
|
||||
// var a = -0.012, b = 0.23, c = -0.21; // di=0.002514 on set-2018-02-18
|
||||
// var a = -0.013, b = 0.251, c = -0.222 // di=0.001742 on set-2018-02-18
|
||||
// var a = -0.015, b = 0.283, c = -0.23; // di=0.00221 on set-2018-02-18
|
||||
// var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19
|
||||
// var a = -0.018, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
|
||||
// var a = -0.017, b = 0.202, c = -0.175; // 2018-09-28
|
||||
// var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02
|
||||
// var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06
|
||||
var a = -0.0223, b = 0.185, c = -0.1745 // 2019-02-07
|
||||
|
||||
|
||||
var l = 1.4
|
||||
|
||||
|
||||
// _InterDynamicTracking is a version of InterDynamicTracking that
|
||||
// uses some global variables that are adjustable.
|
||||
//
|
||||
function _InterDynamicTracking(fontSize, weightClass) {
|
||||
// Note: weightClass is currently unused
|
||||
//
|
||||
// y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x)
|
||||
// [6-35] 0.05877 .. -0.0101309 (13==0; stops growing around 30-35)
|
||||
// See https://gist.github.com/rsms/8efdbca5f8145a584ed08a7c3d6e5788
|
||||
//
|
||||
return a + b * Math.pow(Math.E, c * fontSize)
|
||||
}
|
||||
|
||||
|
||||
function InterDynamicLineHeight(fontSize, weightClass) {
|
||||
return Math.round(fontSize * l)
|
||||
}
|
||||
|
||||
|
||||
var NPOS = Number.MAX_SAFE_INTEGER
|
||||
|
||||
function Sample(fontSize) {
|
||||
this.rootEl = sampleTemplate.cloneNode(true)
|
||||
this.infoEl = $('.info', this.rootEl)
|
||||
this.contentEl = $('.content', this.rootEl)
|
||||
this.diEl = $('.di', this.rootEl)
|
||||
this.diEl.classList.add('unavailable')
|
||||
this.style = this.rootEl.style
|
||||
this.maxBoxWidth = 0
|
||||
this.fontSize = 0
|
||||
this.tracking = 0
|
||||
this.lineHeight = 0
|
||||
this.idealTracking = NPOS
|
||||
this.matchesIdeal = false
|
||||
this.setFontSize(fontSize)
|
||||
this.render()
|
||||
|
||||
// listen for focus events on the editable content
|
||||
var s = this
|
||||
this.contentEl.addEventListener(
|
||||
'focus',
|
||||
function(){ s.onReceivedFocus() },
|
||||
{passive:true, capture:false}
|
||||
)
|
||||
this.contentEl.addEventListener(
|
||||
'blur',
|
||||
function(){ s.onLostFocus() },
|
||||
{passive:true, capture:false}
|
||||
)
|
||||
}
|
||||
|
||||
Sample.prototype.onReceivedFocus = function() {}
|
||||
Sample.prototype.onLostFocus = function() {}
|
||||
|
||||
Sample.prototype.idealDistance = function(fontSize) {
|
||||
// returns the distance from the ideal (or NPOS if no "ideal" data available)
|
||||
if (this.idealTracking == NPOS) {
|
||||
return NPOS
|
||||
}
|
||||
return (
|
||||
Math.max(this.tracking, this.idealTracking) -
|
||||
Math.min(this.tracking, this.idealTracking)
|
||||
)
|
||||
}
|
||||
|
||||
Sample.prototype.setFontSize = function(fontSize) {
|
||||
this.fontSize = fontSize
|
||||
this.tracking = baseTracking + _InterDynamicTracking(fontSize, weightClass)
|
||||
this.lineHeight = InterDynamicLineHeight(fontSize, weightClass)
|
||||
this.maxBoxWidth = Math.round(fontSize * (this.tracking + 1) * 25)
|
||||
|
||||
var idealTracking = idealValues[this.fontSize]
|
||||
if (idealTracking === undefined) {
|
||||
if (this.idealTracking != NPOS) {
|
||||
this.diEl.classList.add('unavailable')
|
||||
}
|
||||
this.idealTracking = NPOS
|
||||
this.matchesIdeal = false
|
||||
} else {
|
||||
if (this.idealTracking == NPOS) {
|
||||
this.diEl.classList.remove('unavailable')
|
||||
}
|
||||
this.idealTracking = idealTracking
|
||||
// match to a precision of 3
|
||||
this.matchesIdeal = this.tracking.toFixed(3) == idealTracking.toFixed(3)
|
||||
var di = 1
|
||||
if (this.matchesIdeal) {
|
||||
this.diEl.classList.add('match')
|
||||
} else {
|
||||
this.diEl.classList.remove('match')
|
||||
di = 1 - Math.min(1, this.idealDistance() * 50)
|
||||
}
|
||||
this.diEl.firstChild.style.width = (di * this.maxBoxWidth) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
Sample.prototype.cssProperties = function() {
|
||||
return [
|
||||
['font-size', round(this.fontSize, 3) + 'px'],
|
||||
['letter-spacing', round(this.tracking, 3) + 'em'],
|
||||
['line-height', round(this.lineHeight, 3) + 'px'],
|
||||
]
|
||||
}
|
||||
|
||||
Sample.prototype.setText = function(text) {
|
||||
this.contentEl.innerText = text
|
||||
this.render()
|
||||
}
|
||||
|
||||
Sample.prototype.render = function() {
|
||||
this.style.fontSize = this.fontSize + 'px'
|
||||
this.style.letterSpacing = this.tracking + 'em'
|
||||
this.style.lineHeight = this.lineHeight + 'px'
|
||||
|
||||
var SP = '\u00A0\u00A0\u00A0'
|
||||
this.infoEl.innerText = (
|
||||
this.fontSize +
|
||||
SP + this.tracking.toFixed(3) +
|
||||
// SP + this.lineHeight.toFixed(3) +
|
||||
(
|
||||
this.idealTracking != NPOS ? (
|
||||
SP + '( ' + this.idealTracking +
|
||||
(this.matchesIdeal ? ' \u2713' : '') +
|
||||
' )'
|
||||
) : ''
|
||||
)
|
||||
)
|
||||
|
||||
this.style.maxWidth = this.maxBoxWidth + 'px'
|
||||
}
|
||||
|
||||
|
||||
var bindings = new Bindings()
|
||||
var samplesEl = $('.samples')
|
||||
var sampleTemplate
|
||||
var samples = [] // Sample[]
|
||||
var focusedSample = null // Sample | null
|
||||
var graph = new GraphPlot($('canvas.graphplot'))
|
||||
graph.setOrigin(-0.2, 0.8)
|
||||
graph.setScale(0.049, 5)
|
||||
|
||||
function addChildren(targetNode, children) {
|
||||
targetNode.style.visibility = 'hidden'
|
||||
var i = 0;
|
||||
for (; i < children.length; i++) {
|
||||
targetNode.appendChild(children[i])
|
||||
}
|
||||
targetNode.style.visibility = null
|
||||
}
|
||||
|
||||
function initSamples() {
|
||||
sampleTemplate = $('.sample', samplesEl)
|
||||
samplesEl.removeChild(sampleTemplate)
|
||||
|
||||
// small and medium sizes
|
||||
var i, fontSize = 6, endFontSize = 16
|
||||
for (; fontSize <= endFontSize; fontSize++) {
|
||||
samples.push(new Sample(fontSize))
|
||||
}
|
||||
|
||||
// a few select large samples
|
||||
samples.push(new Sample(17))
|
||||
samples.push(new Sample(18))
|
||||
samples.push(new Sample(20))
|
||||
samples.push(new Sample(24))
|
||||
samples.push(new Sample(30))
|
||||
samples.push(new Sample(40))
|
||||
samples.push(new Sample(80))
|
||||
|
||||
// connect focus events
|
||||
var onSampleReceivedFocus = function() { setSelectedSample(this) }
|
||||
samples.forEach(function(s) {
|
||||
s.onReceivedFocus = onSampleReceivedFocus
|
||||
})
|
||||
|
||||
// add to dom in one go
|
||||
addChildren(samplesEl, samples.map(function(s) { return s.rootEl }))
|
||||
}
|
||||
|
||||
function setSelectedSample(sample) {
|
||||
if (focusedSample !== sample) {
|
||||
if (focusedSample) {
|
||||
focusedSample.rootEl.classList.remove('selected')
|
||||
}
|
||||
if (sample) {
|
||||
sample.rootEl.classList.add('selected')
|
||||
}
|
||||
focusedSample = sample
|
||||
updateSelection()
|
||||
}
|
||||
}
|
||||
|
||||
function updateSample(sample) {
|
||||
sample.setFontSize(sample.fontSize) // updates derived values
|
||||
sample.render()
|
||||
}
|
||||
|
||||
function updateSamples() {
|
||||
samples.forEach(updateSample)
|
||||
updateIdealMatches()
|
||||
updateGraphPlot()
|
||||
updateCodeView()
|
||||
}
|
||||
|
||||
function updateIdealMatches() {
|
||||
// ideal-distance
|
||||
var idealCount = 0
|
||||
var distance = 0
|
||||
var ndistances = 0
|
||||
samples.forEach(function(sample) {
|
||||
if (sample.matchesIdeal) {
|
||||
idealCount++
|
||||
}
|
||||
var di = sample.idealDistance()
|
||||
if (di != NPOS) {
|
||||
distance += di
|
||||
ndistances++
|
||||
}
|
||||
})
|
||||
|
||||
distance = distance / ndistances
|
||||
|
||||
bindings.setValue('ideal-distance', distance.toFixed(6))
|
||||
bindings.setValue('ideal-count', idealCount)
|
||||
}
|
||||
|
||||
function updateGraphPlot() {
|
||||
graph.clear()
|
||||
graph.plotLine(idealValuesList, '#0d3')
|
||||
graph.plotf(
|
||||
x => _InterDynamicTracking(x, weightClass),
|
||||
'rgba(0, 0, 0, 0.5)'
|
||||
)
|
||||
if (focusedSample) {
|
||||
var graphedFontSize = Math.min(24, focusedSample.fontSize) // clamp to [-inf,24]
|
||||
graph.plotPoints([
|
||||
[graphedFontSize, focusedSample.tracking]
|
||||
], 'rgb(45, 143, 255)')
|
||||
}
|
||||
}
|
||||
|
||||
var codeOutput = $('#code-output')
|
||||
codeOutput.addEventListener('focus', function(ev) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
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 props = focusedSample.cssProperties()
|
||||
props.forEach(function(prop, i) {
|
||||
var name = prop[0], value = prop[1]
|
||||
s += name + ': ' + value + ';'
|
||||
if (i != props.length-1) {
|
||||
s += '\n'
|
||||
}
|
||||
})
|
||||
}
|
||||
codeOutput.value = s
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
var controlsEl = $('.controls')
|
||||
if (focusedSample) {
|
||||
controlsEl.classList.add('has-selected-sample')
|
||||
} else {
|
||||
controlsEl.classList.remove('has-selected-sample')
|
||||
}
|
||||
|
||||
updateGraphPlot()
|
||||
updateCodeView()
|
||||
}
|
||||
|
||||
|
||||
bindings.configure('base-tracking', 0, 'float', function (tracking) {
|
||||
baseTracking = tracking
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-a', a, 'float', function (v) {
|
||||
a = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-b', b, 'float', function (v) {
|
||||
b = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-c', c, 'float', function (v) {
|
||||
c = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-l', l, 'float', function (v) {
|
||||
l = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('ideal-count', 0, 'int', function (v) {})
|
||||
bindings.configure('ideal-distance', 0, 'float', function (v) {})
|
||||
|
||||
bindings.configure('style', null, null, function (style) {
|
||||
var cl = samplesEl.classList
|
||||
cl.remove('font-style-regular')
|
||||
cl.remove('font-style-italic')
|
||||
cl.remove('font-style-medium')
|
||||
cl.remove('font-style-medium-italic')
|
||||
cl.remove('font-style-semi-bold')
|
||||
cl.remove('font-style-semi-bold-italic')
|
||||
cl.remove('font-style-bold')
|
||||
cl.remove('font-style-bold-italic')
|
||||
cl.remove('font-style-extra-bold')
|
||||
cl.remove('font-style-extra-bold-italic')
|
||||
cl.remove('font-style-black')
|
||||
cl.remove('font-style-black-italic')
|
||||
cl.add('font-style-' + style)
|
||||
weightClass = (
|
||||
style.indexOf('black') != -1 ? 900 :
|
||||
style.indexOf('bold') != -1 ? 700 :
|
||||
style.indexOf('medium') != -1 ? 500 :
|
||||
400
|
||||
)
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
|
||||
bindings.bindAllInputs('[data-binding]')
|
||||
|
||||
// double-click base tracking to reset
|
||||
$('input[type="range"][data-binding="base-tracking"]').addEventListener(
|
||||
'dblclick',
|
||||
function(ev) { bindings.setValue('base-tracking', 0) }
|
||||
)
|
||||
|
||||
;[
|
||||
['var-a',a],
|
||||
['var-b',b],
|
||||
['var-c',c],
|
||||
['var-l',l],
|
||||
['base-tracking', 0]
|
||||
].forEach(p => {
|
||||
let bindname = p[0], defval = p[1]
|
||||
$$('input[type="range"][data-binding="'+bindname+'"]').forEach(e => {
|
||||
e.addEventListener('dblclick', ev =>
|
||||
bindings.setValue(bindname, defval))
|
||||
})
|
||||
})
|
||||
|
||||
// allow editing of ideal values
|
||||
idealValuesTextArea.addEventListener('input', function(ev) {
|
||||
setIdealValues(parseValues(idealValuesTextArea.value))
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
// listen for clicks onto "background", to deselect any selected sample
|
||||
document.body.addEventListener('pointerdown', function(ev){
|
||||
if (
|
||||
ev.target === document.body ||
|
||||
ev.target === samplesEl ||
|
||||
ev.target.classList && ev.target.classList.contains('row')
|
||||
) {
|
||||
setSelectedSample(null)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// start
|
||||
initSamples()
|
||||
updateSamples()
|
||||
|
||||
})();</script>
|
||||
|
|
|
|||
Reference in a new issue