diff --git a/docs/dynmetrics/index.css b/docs/dynmetrics/index.css index bf21139ce..f4328c6b2 100644 --- a/docs/dynmetrics/index.css +++ b/docs/dynmetrics/index.css @@ -119,15 +119,6 @@ formula.code { } -.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; } - .row.with-sidebar { padding: 0; } diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index 2ffa7c8b5..a5e91569b 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -89,8 +89,12 @@ endfor + + + + @@ -183,62 +187,26 @@ function parseValues(s) { } setIdealValues({ - // set-2018-02-20 - 6: 0.055, - 7: 0.044, - 8: 0.034, - 9: 0.024, - 10: 0.018, - 11: 0.012, - 12: 0.007, - 13: 0.003, - 14: 0.001, - 15: -0.002, - 16: -0.004, - 17: -0.006, - 18: -0.008, - 20: -0.01, - 24: -0.013, + // 2018-09-28 + 6: 0.054, + 7: 0.042, + 8: 0.033, + 9: 0.025, + 10: 0.018, + 11: 0.012, + 12: 0.008, + 13: 0.004, + 14: 0, + 15: -0.002, + 16: -0.005, + 17: -0.007, + 18: -0.008, + 20: -0.011, + 24: -0.014, + 30: -0.016, + 40: -0.017, }) -// setIdealValues({ -// // set-2018-02-19 -// 6: 0.059, -// 7: 0.043, -// 8: 0.032, -// 9: 0.022, -// 10: 0.014, -// 11: 0.009, -// 12: 0.004, -// 13: 0, -// 14: -0.003, -// 15: -0.005, -// 16: -0.0075, -// 17: -0.0084, -// 18: -0.0095, -// 20: -0.012, -// 24: -0.014, -// }) - -// setIdealValues({ -// // set-2018-02-18 -// 6: 0.06, -// 7: 0.04, -// 8: 0.03, -// 9: 0.02, -// 10: 0.01, -// 11: 0.005, -// 12: 0.002, -// 13: 0.001, -// 14: 0, -// 15: -0.002, -// 16: -0.005, -// 17: -0.007, -// 18: -0.009, -// 20: -0.011, -// 24: -0.011, -// }) - // Variables for constants involved in Dynamic Metrics @@ -246,7 +214,8 @@ setIdealValues({ // 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.016, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20 +// 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; // di=0.000247 on 2018-09-28 var l = 1.4 @@ -567,8 +536,12 @@ bindings.configure('style', null, null, function (style) { 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) @@ -590,6 +563,20 @@ $('input[type="range"][data-binding="base-tracking"]').addEventListener( 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)) diff --git a/docs/res/base.css b/docs/res/base.css index 555bf4fa6..e4c5ec082 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -107,6 +107,11 @@ num { /* number */ white-space: pre; } +em, i, .italic { + font-style: italic; + font-variation-settings: 'ital' 100; +} + small { font-size: 11px; letter-spacing: 0.013em; @@ -177,6 +182,20 @@ h1 > a, h2 > a, h3 > a { background: none; } +/* font style classifiers used by samples and dynmetrics */ +.font-style-regular { font-variation-settings: "wght" 400, "ital" 0 !important; font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; } +.font-style-medium { font-variation-settings: "wght" 500, "ital" 0 !important; font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; } +.font-style-semi-bold { font-variation-settings: "wght" 600, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } +.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } +.font-style-bold { font-variation-settings: "wght" 700, "ital" 0 !important; font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; } +.font-style-extra-bold { font-variation-settings: "wght" 800, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } +.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } +.font-style-black { font-variation-settings: "wght" 900, "ital" 0 !important; font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; } + .row { padding: 50px; display: flex; diff --git a/docs/res/base.js b/docs/res/base.js index 859b8d56f..0d4b12add 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -82,7 +82,8 @@ var HUDNotification = { // function InterUIDynamicTracking(fontSize) { // tracking = a + b * e ^ (c * fontSize) - return -0.016 + 0.21 * Math.pow(Math.E, -0.18 * fontSize) + var a = -0.017, b = 0.202, c = -0.175; + return a + b * Math.pow(Math.E, c * fontSize) } diff --git a/docs/samples/index.css b/docs/samples/index.css index 53b89b17c..2cd3f6556 100644 --- a/docs/samples/index.css +++ b/docs/samples/index.css @@ -31,7 +31,7 @@ livesample.s1 { padding-left: 16px; letter-spacing: -0.015em; font-size: 5em; - font-weight: 600; + font-weight: 700; line-height: 1.1; margin-top: 0; margin-bottom: 0.3em; @@ -65,19 +65,6 @@ livesample.col2 { column-count: 2; } -.font-style-regular { font-variation-settings: "wght" 400, "ital" 0 !important; font-weight:400 !important; font-style:normal !important; } -.font-style-italic { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; } -.font-style-medium { font-variation-settings: "wght" 500, "ital" 0 !important; font-weight:500 !important; font-style:normal !important; } -.font-style-medium-italic { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; } -.font-style-semi-bold { font-variation-settings: "wght" 600, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } -.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } -.font-style-bold { font-variation-settings: "wght" 700, "ital" 0 !important; font-weight:700 !important; font-style:normal !important; } -.font-style-bold-italic { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; } -.font-style-extra-bold { font-variation-settings: "wght" 800, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } -.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } -.font-style-black { font-variation-settings: "wght" 900, "ital" 0 !important; font-weight:900 !important; font-style:normal !important; } -.font-style-black-italic { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; } - div.live { margin-top:1em; margin-bottom:100px;