diff options
Diffstat (limited to 'docs/samples')
-rw-r--r-- | docs/samples/bindings.js | 159 | ||||
-rw-r--r-- | docs/samples/index.css | 243 | ||||
-rw-r--r-- | docs/samples/index.html | 524 |
3 files changed, 392 insertions, 534 deletions
diff --git a/docs/samples/bindings.js b/docs/samples/bindings.js deleted file mode 100644 index cac29e417..000000000 --- a/docs/samples/bindings.js +++ /dev/null @@ -1,159 +0,0 @@ -// requires index.js - -function Binding(name){ - this.name = name - this.value = undefined - this.inputs = [] - this.listeners = [] - this.formatter = undefined -} - - -Binding.prototype.addInput = function(el) { - var binding = this - var _onInput = function(ev) { - binding.setValue(el.value, el) - } - var input = { - el: el, - _onInput: _onInput, - } - this.inputs.push(input) - if (this.value === undefined) { - this.value = el.value - } else { - input.el.value = this.value - } - el.addEventListener('input', _onInput, {passive:true}) -} - - -// listener signature: -// function(nextval string, prevval string, b Binding)void -// -Binding.prototype.addListener = function(listener) { - this.listeners.push(listener) -} - - -Binding.prototype.setValue = function(nextval, origin) { - // console.log('Binding.setValue nextval:', nextval, {origin}) - var prevval = this.value - if (this.formatter) { - nextval = this.formatter(nextval, prevval) - } - if (this.value === nextval) { - return - } - var binding = this - this.value = nextval - this.inputs.forEach(function(input) { - if (input.el !== origin) { - input.el.value = nextval - } - }) - this.listeners.forEach(function(listener) { - listener(nextval, prevval, this) - }) -} - - -function Bindings() { - this.bindings = {} -} - -Bindings.prototype.getBinding = function(name, input) { - var binding = this.bindings[name] - if (!binding) { - binding = new Binding(name) - this.bindings[name] = binding - } - return binding -} - -Bindings.prototype.bindInput = function(name, input) { - // console.log('bindInput', name, input) - var binding = this.getBinding(name) - binding.addInput(input) -} - -Bindings.prototype.bindAllInputs = function(queryOrInputElementList) { - var bindings = this - - var inputs = ( - typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) : - queryOrInputElementList - ) - - inputs.forEach(function(input) { - var bindingName = input.dataset.binding - if (bindingName) { - bindings.bindInput(bindingName, input) - } - }) -} - -// listener signature: -// function(nextval string, prevval string, b Binding)void -// -Bindings.prototype.addListener = function(name, listener) { - var binding = this.getBinding(name) - binding.addListener(listener) -} - -Bindings.prototype.setValue = function(name, value) { - var binding = this.getBinding(name) - binding.setValue(value) -} - - -Bindings.prototype.value = function(name, defaultValue) { - var binding = this.bindings[name] - return binding && binding.value !== undefined ? binding.value : defaultValue -} - - -function fmt_float(nextval, prevval) { - var n = parseFloat(nextval) - return isNaN(n) ? 0 : n -} - -function fmt_int(nextval, prevval) { - var n = parseInt(nextval) - return isNaN(n) ? 0 : n -} - - -// configure is convenience function for setting value, adding a -// listener and associating a formatter with a binding. -// If a listener and a value is provided, the value is set and the listener -// is immediately invoked. -// -Bindings.prototype.configure = function(name, value, formatter, listener) { - var binding = this.getBinding(name) - if (listener) { - binding.addListener(listener) - } - if (value !== undefined && value !== null) { - binding.setValue(value) - } - if (formatter) { - if (typeof formatter == 'string') { - switch (formatter) { - case 'number': - case 'float': - formatter = fmt_float; break; - - case 'int': - case 'integer': - formatter = fmt_int; break; - - default: - throw new Error('unknown formatter "' + formatter + '"') - } - } else if (typeof formatter != 'function') { - throw new Error('formatter should be a string or function') - } - binding.formatter = formatter - } -} diff --git a/docs/samples/index.css b/docs/samples/index.css new file mode 100644 index 000000000..2203be989 --- /dev/null +++ b/docs/samples/index.css @@ -0,0 +1,243 @@ +body { + padding-bottom: 0; + background: white; +} + +.row.footer h2 { + margin:0; + text-align:center; +} + +livesample { + display: block; + color: #111; + outline: none; + padding-left: 20px; + border-left: 2px solid transparent; + margin-left:-22px; + margin-top: 1em; + margin-bottom: 1.6em; +} +livesample:hover { + /*color: rgb(3, 102, 214);*/ + border-left-color: rgb(3, 102, 214); +} +livesample:focus { + border-left-color: #eee; +} +livesample > p { + margin-top: 0; +} +livesample.s1 { + padding-left: 16px; + letter-spacing: -0.01em; + font-size: 5em; + font-weight: 600; + line-height: 1.1; + margin-top: 0; + margin-bottom: 0.3em; +} +livesample.s2 { + max-width: 400px; + font-size: 1em; +} +livesample.s3 { + font-size: 13px; + line-height: 18px; +} + livesample.s3 b, livesample.s3 strong { + font-weight:500; + color: black; + } + +livesample.col3 { + -moz-column-width: 20em; + -moz-columns: 20em; + -webkit-columns: 20em; + columns: 20em; + + -moz-column-gap: 2em; + -webkit-column-gap: 2em; + column-gap: 2em; +} +livesample.col2 { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; +} + +.font-style-regular { font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-weight:400 !important; font-style:italic !important; } +.font-style-medium { font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; } +.font-style-bold { font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-weight:700 !important; font-style:italic !important; } +.font-style-black { font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-weight:900 !important; font-style:italic !important; } + +div.live { + margin-top:1em; + margin-bottom:100px; + padding-bottom:20px; + border-bottom: 1px solid #ddd; +} + div.live .learn-more { + margin-top:40px; + user-select: none; + } + div.controls { + position: absolute; + right: 0; + top: 150px; + width: 250px; + padding: 10px 0; + /*background:#eee;*/ + opacity:0.3; + transition: 90ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93); + /*border:1px solid #bbb;*/ + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-right:none; + display: flex; + flex-direction: column; + overflow: hidden; + font-size: 13px; + } + div.controls:hover { + opacity:1; + background:#f5f5f5; + border-color: transparent; + } + div.controls .control { + display: flex; + justify-content: space-between; + align-items: center; + overflow: hidden; + min-height: 30px; + margin: 0 16px; + } + div.controls .control > * { + 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: inherit; + /*border-radius: 2px;*/ + } + div.controls .control > input[type="number"] { + max-width: 48px; + text-align: right; + -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="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; + color: black; + width: 16px; + height: 16px; + flex: 0 0 auto; + margin-right: 16px; + opacity: 0.6; + } + div.controls canvas { + height: 200px; + } + div.controls .control.info, + div.controls canvas { + transition: 390ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93); + opacity: 0; + } + div.controls:hover .control.info, + div.controls:hover canvas { + opacity: 1; + } + + +/* narrow windows */ +@media only screen and (max-width: 1200px) { + div.controls { + width: 210px; + font-size: 12px; + } +} +@media only screen and (max-width: 1024px) { + div.controls { + width: 140px; + font-size: 11px; + } + div.controls canvas { + display: none; + } + div.controls .control.info { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + div.controls .control > input[type="range"] { + width: 0; + flex: 0 1 0%; + display: none; + } + div.controls .control > input[type="number"] { + max-width: 100%; + flex: 1 1 auto; + } +} +@media only screen and (max-width: 740px) { + livesample.s1 { + font-size:4.5em; + } + div.controls { + display: none; + } +} +@media only screen and (max-width: 565px) { + livesample.s1 { + font-size:4em; + } +} +@media only screen and (max-width: 414px) { + livesample.s1 { + font-size:3.4em; + } +} + +.sample-images img, .sample-images svg { + margin: 100px 0; +} +.sample-images > img:first-child, .sample-images > svg:first-child { + margin-top:50px; +} diff --git a/docs/samples/index.html b/docs/samples/index.html index 08de84f72..a56b6aa60 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -1,300 +1,73 @@ -<!DOCTYPE HTML> -<html lang="en" prefix="og: http://ogp.me/ns#"> - <head> - <meta charset="utf-8"> - <title>Inter UI font family</title> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta property="og:title" content="Inter UI font family"> - <meta property="twitter:title" content="Inter UI font family"> - <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces"> - <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces"> - <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces"> - <meta property="twitter:card" content="summary"> - <meta property="twitter:site" content="@rsms"> - <meta property="twitter:creator" content="@rsms"> - <meta property="og:image" content="https://rsms.me/inter/res/poster.png"> - <meta property="twitter:image" content="https://rsms.me/inter/res/poster.png"> - <meta property="fb:app_id" content="38027689216"> - <meta property="og:url" content="https://rsms.me/inter/"> - <meta property="og:site_name" content="rsms.me"> - <meta property="og:type" content="product"> - <meta property="og:locale" content="en_US" /> - <meta name="format-detection" content="telephone=no"> - <link rel="icon" type="image/png" href="../favicon.png" /> - <link href="../inter-ui.css?v=2.5" rel="stylesheet"> - <link href="../index.css?v=5" rel="stylesheet"> - <style type="text/css"> -body { - padding-bottom: 0; - background: white; -} - -.row.footer h2 { - margin:0; - text-align:center; -} - -/*.row.menu { - background: white; -}*/ - -livesample { - display: block; - color: #111; - outline: none; - padding-left: 20px; - border-left: 2px solid transparent; - margin-left:-22px; - margin-top: 1em; - margin-bottom: 1.6em; -} -livesample:hover { - /*color: rgb(3, 102, 214);*/ - border-left-color: rgb(3, 102, 214); -} -livesample:focus { - border-left-color: #eee; -} -livesample > p { - margin-top: 0; -} -livesample.s1 { - padding-left: 16px; - letter-spacing: -0.005em; - font-size: 5em; - font-weight: 600; - line-height: 1.1; - margin-top: 0; - margin-bottom: 0.3em; -} -livesample.s2 { - max-width: 400px; - font-size: 1em; -} -livesample.s3 { - font-size: 13px; - line-height: 18px; -} - livesample.s3 b, livesample.s3 strong { - font-weight:500; - color: black; - } - -livesample.col3 { - -moz-column-width: 20em; - -moz-columns: 20em; - -webkit-columns: 20em; - columns: 20em; - - -moz-column-gap: 2em; - -webkit-column-gap: 2em; - column-gap: 2em; -} -livesample.col2 { - -moz-column-count: 2; - -webkit-column-count: 2; - column-count: 2; -} - -.font-style-regular { font-weight:400 !important; font-style:normal !important; } -.font-style-italic { font-weight:400 !important; font-style:italic !important; } -.font-style-medium { font-weight:500 !important; font-style:normal !important; } -.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; } -.font-style-bold { font-weight:700 !important; font-style:normal !important; } -.font-style-bold-italic { font-weight:700 !important; font-style:italic !important; } -.font-style-black { font-weight:900 !important; font-style:normal !important; } -.font-style-black-italic { font-weight:900 !important; font-style:italic !important; } - -div.live { - margin-top:1em; - margin-bottom:100px; - padding-bottom:100px; - border-bottom: 1px solid #ddd; -} - div.controls { - position: absolute; - right: 0; - top: 150px; - width: 220px; - padding: 10px 16px; - /*background:#eee;*/ - opacity:0.3; - border:1px solid #bbb; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - border-right:none; - display: flex; - flex-direction: column; - overflow: hidden; - } - div.controls:hover { - opacity:1; - background:#f5f5f5; - border-color: transparent; - } - div.controls .control { - display: flex; - justify-content: space-between; - align-items: center; - overflow: hidden; - height:30px; - } - 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; - /*border-radius: 2px;*/ - } - div.controls .control > input[type="number"] { - max-width: 60px; - text-align: right; - -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="range"] { - /*max-width: 80%;*/ - flex: 1 1 auto; - display: block; - } - div.controls .control > img.icon { - width: 16px; - height: 16px; - flex: 0 0 auto; - margin-right: 16px; - opacity: 0.8; - } - - /*div.controls .control > input.foo { - background-color: hotpink; - border:none; - border-radius: 90px; - }*/ - - -/* narrow windows */ -@media only screen and (max-width: 1200px) { - div.live div.controls { - width: 200px; - } -} -@media only screen and (max-width: 1024px) { - div.live div.controls { - width: 100px; - } - div.controls .control > input[type="range"] { - width: 0; - flex: 0 1 0%; - display: none; - } - div.controls .control > input[type="number"] { - max-width: 100%; - flex: 1 1 auto; - } -} -@media only screen and (max-width: 740px) { - livesample.s1 { - font-size:4.5em; - } - div.live div.controls { - display: none; - } -} -@media only screen and (max-width: 565px) { - livesample.s1 { - font-size:4em; - } -} -@media only screen and (max-width: 414px) { - livesample.s1 { - font-size:3.4em; - } -} - </style> - </head> - <body> - - <div class="row menu"> - <ul class="menu"> - <li class="home"><a href="../">Inter UI</a></li> - <li><a class="download-link" - href="https://github.com/rsms/inter/releases/latest/" - >Download</a></li> - <li><a href="/inter/samples/" class="active">Samples</a></li> - <li><a href="../lab/">Playground</a></li> - <li><a href="https://github.com/rsms/inter/">Source</a></li> - </ul> +--- +layout: default +title: Samples +--- +{% + +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 == "/samples/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"><div> + <div class="live"> + + <div class="controls"> + <div class="control"> + <img title="Style" class="icon" src="icons/style.svg"> + <select data-binding="style"> + <option value="regular" default>Regular</option> + <option value="italic">Italic</option> + <option value="medium" default>Medium</option> + <option value="medium-italic">Medium Italic</option> + <option value="bold" default>Bold</option> + <option value="bold-italic">Bold Italic</option> + <option value="black" default>Black</option> + <option value="black-italic">Black Italic</option> + </select> + </div> + <div class="control"> + <img title="Size" class="icon" src="icons/font-size.svg"> + <input type="range" min="8" max="100" step="1" data-binding="font-size"> + <input type="number" min="4" max="400" step="1" data-binding="font-size"> + </div> + <div class="control"> + <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg"> + <input type="range" min="-0.05" max="0.06" step="0.001" data-binding="letter-spacing"> + <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing"> + </div> + <canvas class="graphplot">Canvas not Supported</canvas> + <div class="control info"> + <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a> + </div> </div> - <div class="row white"><div> - <div class="live"> - - <div class="controls"> - <div class="control"> - <img title="Style" class="icon" src="icons/style.svg"> - <select data-binding="style"> - <option value="regular" default>Regular</option> - <option value="italic">Italic</option> - <option value="medium" default>Medium</option> - <option value="medium-italic">Medium Italic</option> - <option value="bold" default>Bold</option> - <option value="bold-italic">Bold Italic</option> - <option value="black" default>Black</option> - <option value="black-italic">Black Italic</option> - </select> - </div> - <div class="control"> - <img title="Size" class="icon" src="icons/font-size.svg"> - <input type="range" min="8" max="100" step="1" data-binding="font-size"> - <input type="number" min="4" max="400" step="1" data-binding="font-size"> - </div> - <div class="control"> - <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg"> - <input type="range" min="-0.05" max="0.06" step="0.001" data-binding="letter-spacing"> - <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing"> - </div> - <!-- <div class="control"> - <img class="icon" src="icons/font-size.svg"> - <input type="text" class="foo" data-binding="foo"> - <input type="text" class="foo" data-binding="foo"> - </div> --> - </div> + <livesample contenteditable class="s1"> + Fabulous typography encountering spring + </livesample> - <livesample contenteditable class="s1"> - Fabulous typography encountering spring - </livesample> + <livesample contenteditable class="s2"> + The user interface (UI), in the industrial design field of human-computer + interaction, is the space where interactions between humans and machines occur. + </livesample> - <livesample contenteditable class="s2"> - The user interface (UI), in the industrial design field of human-computer - interaction, is the space where interactions between humans and machines occur. - </livesample> - - <livesample contenteditable class="s3 col3"> + <livesample contenteditable class="s3 col3"> <p><b>Fire Island Beach</b> is a barrier of sand, stretching for twenty miles along the south coast of Long Island, and separating the Great South Bay from the Atlantic ocean. @@ -350,89 +123,67 @@ When the tide is on the right moon and the wind has blown a gale from the southeast, the strand is entirely submerged, and people upon the main shore three miles away can see the surf breaking over the Beach hills. -</p><p> -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. -</p><p> -“The Captain” knew all this and had patrolled that Beach scores of -times. -</p><p> -Ten years had passed since the first time which laid the habit of -wandering along the surf-shore apparently in search of whatever the sea -had cast up. Sometimes a spar, sometimes sheets of copper torn from a -wreck and carried by a high surf far along the strand, sometimes a -vessel’s gilded name, at other times only scattered drift-wood were the -rewards of these lonely walks. </p> - </livesample> - </div> - - <p class="sample-images"> - <img src="img/01.png" srcset="img/01@2x.png 2x" width="888"> - <img src="img/02.png" srcset="img/02@2x.png 2x" width="888"> - <!-- <img src="img/02.svg" width="888"> --> - <img src="img/03.png" srcset="img/03@2x.png 2x" width="888"> - <img src="img/04.png" srcset="img/04@2x.png 2x" width="888"> - <img src="img/05.png" srcset="img/05@2x.png 2x" width="888"> - <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888"> - <img src="img/06.png" srcset="img/06@2x.png 2x" width="888"> - <img src="img/07.png" srcset="img/07@2x.png 2x" width="888"> - <img src="img/08.png" srcset="img/08@2x.png 2x" width="888"> - <img src="img/09.png" srcset="img/09@2x.png 2x" width="888"> - <img src="img/10.png" srcset="img/10@2x.png 2x" width="888"> - <img src="img/11.png" srcset="img/11@2x.png 2x" width="888"> - <img src="img/12.png" srcset="img/12@2x.png 2x" width="888"> - <img src="img/13.png" srcset="img/13@2x.png 2x" width="888"> - <img src="img/14.png" srcset="img/14@2x.png 2x" width="888"> - <img src="img/15.png" srcset="img/15@2x.png 2x" width="888"> - </p> - <p style="text-align:center"> - <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain">Open these samples in Figma</a> - </p> - </div></div> - - <script src="../index.js?v=2"></script> - <script src="bindings.js"></script> - <script type="text/javascript">(function(){ - - - -// InterUIDynamicTracking takes the font size in points or pixels and returns -// the compensating tracking in EM. + </livesample> + <p class="learn-more"> + + <!-- <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a> --> + </p> + </div> + + <p class="sample-images"> + <img src="img/01.png" srcset="img/01@2x.png 2x" width="888"> + <img src="img/02.png" srcset="img/02@2x.png 2x" width="888"> + <!-- <img src="img/02.svg" width="888"> --> + <img src="img/03.png" srcset="img/03@2x.png 2x" width="888"> + <img src="img/04.png" srcset="img/04@2x.png 2x" width="888"> + <img src="img/05.png" srcset="img/05@2x.png 2x" width="888"> + <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888"> + <img src="img/06.png" srcset="img/06@2x.png 2x" width="888"> + <img src="img/07.png" srcset="img/07@2x.png 2x" width="888"> + <img src="img/08.png" srcset="img/08@2x.png 2x" width="888"> + <img src="img/09.png" srcset="img/09@2x.png 2x" width="888"> + <img src="img/10.png" srcset="img/10@2x.png 2x" width="888"> + <img src="img/11.png" srcset="img/11@2x.png 2x" width="888"> + <img src="img/12.png" srcset="img/12@2x.png 2x" width="888"> + <img src="img/13.png" srcset="img/13@2x.png 2x" width="888"> + <img src="img/14.png" srcset="img/14@2x.png 2x" width="888"> + <img src="img/15.png" srcset="img/15@2x.png 2x" width="888"> + </p> + <p style="text-align:center"> + <a + href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" + class="plain">Open these samples in Figma</a> + </p> +</div></div> + +<script type="text/javascript">(function(){ + + + +// InterUIDynamicTracking produces tracking in EM for the given font size // function InterUIDynamicTracking(fontSize, weightClass) { // if (!weightClass) { -- currently unused // weightClass = 400 // } // - // 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 -0.01021241 + 0.3720623 * Math.pow(Math.E, (-0.2808687 * fontSize)) - - // y = 0.025 - (ln(x) * 0.01) - // return 0.025 - Math.log(fontSize) * 0.01 + var a = -0.0149, b = 0.298, c = -0.23; + return a + b * Math.pow(Math.E, (c * fontSize)) } - -function InterUIDynamicLeading(fontSize, weightClass) { - var lineHeight = Math.round(fontSize * 1.4) - // - // TODO - // - // console.log( - // 'lineHeight:', lineHeight, - // `(${Math.round(fontSize * 1.45)})`, - // ) - - return lineHeight +// InterUIDynamicLineHeight produces the line height for the given font size +// +function InterUIDynamicLineHeight(fontSize, weightClass) { + var l = 1.4 + return Math.round(fontSize * l) } var bindings = new Bindings() +var graph = new GraphPlot($('canvas.graphplot')) +graph.setOrigin(-0.2, 0.8) +graph.setScale(0.049, 5) var s2 = $('livesample.s2') @@ -443,22 +194,39 @@ function updateWidth() { s2.style.maxWidth = Math.round(w) + 'px' } +function updateTracking() { + var fontSize = bindings.value('font-size', 0) + var letterSpacing = InterUIDynamicTracking(fontSize, 400) + bindings.setValue('letter-spacing', letterSpacing) +} + +function updateGraph() { + graph.clear() + var fontSize = bindings.value('font-size', 0) + var letterSpacing = bindings.value('letter-spacing') + graph.plotf(function(x) { + return InterUIDynamicTracking(x, 400) + }) + var graphedFontSize = Math.min(24, fontSize) // clamp to [-inf,24] + graph.plotPoints([[graphedFontSize, letterSpacing]], '#000') +} + bindings.configure('letter-spacing', 0, 'float', function (letterSpacing) { s2.style.letterSpacing = letterSpacing + 'em' updateWidth() + updateGraph() +}) +bindings.setFormatter('letter-spacing', function(v) { + return v.toFixed(3) }) -bindings.configure('font-size', 18, 'int', function(fontSize, prevval) { +bindings.configure('font-size', 16, 'float', function(fontSize, prevval) { s2.style.fontSize = fontSize + 'px' updateWidth() + updateTracking() - var letterSpacing = InterUIDynamicTracking(fontSize, 400) - letterSpacing = parseFloat(letterSpacing.toFixed(3)) // lower precision - - var lineHeight = InterUIDynamicLeading(fontSize, 400) + var lineHeight = InterUIDynamicLineHeight(fontSize, 400) s2.style.lineHeight = lineHeight + 'px' - - bindings.setValue('letter-spacing', letterSpacing) }) bindings.configure('style', null, null, function (style) { @@ -478,8 +246,14 @@ bindings.configure('style', null, null, function (style) { bindings.bindAllInputs('div.live .control input') bindings.bindAllInputs('div.live .control select') - - - })();</script> - </body> -</html> +// resize canvas when window resizes +var resizeDebounceTimer = null +window.addEventListener('resize', function(){ + clearTimeout(resizeDebounceTimer) + resizeDebounceTimer = setTimeout(function(){ + graph.autosize() + updateGraph() + }, 500) +}, {passive:true, capture:false}) + +})();</script> |