diff options
author | Rasmus Andersson <rasmus@notion.se> | 2019-08-03 20:36:10 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2019-08-03 20:36:10 +0300 |
commit | 164e53bb58909927b83c4b23736f24802c78aeb6 (patch) | |
tree | c4fcdb4795389cfc1c30ad33ad811332f92e0349 /docs | |
parent | 862cd438ed1613cfd2585faf0b70bfe4f176a335 (diff) | |
download | inter-164e53bb58909927b83c4b23736f24802c78aeb6.tar.xz |
Negative slant angle changes to website
Diffstat (limited to 'docs')
-rw-r--r-- | docs/index-var.css | 2 | ||||
-rw-r--r-- | docs/index-var.js | 7 | ||||
-rw-r--r-- | docs/lab/index.html | 36 | ||||
-rw-r--r-- | docs/lab/var.html | 4 | ||||
-rw-r--r-- | docs/var-test.html | 328 |
5 files changed, 250 insertions, 127 deletions
diff --git a/docs/index-var.css b/docs/index-var.css index 6b82b6355..f50b1d259 100644 --- a/docs/index-var.css +++ b/docs/index-var.css @@ -108,5 +108,5 @@ font-size: var(--var-size); letter-spacing: var(--var-letterSpacing); line-height: var(--var-lineHeight); - font-variation-settings: 'wght' var(--var-weight), 'slnt' var(--var-slant); + font-variation-settings: 'wght' var(--var-weight), 'slnt' calc(-1 * var(--var-slant)); } diff --git a/docs/index-var.js b/docs/index-var.js index f85ca4126..19f4aeaa2 100644 --- a/docs/index-var.js +++ b/docs/index-var.js @@ -90,7 +90,12 @@ var ui = { let s = sample.style for (let k in this.state) { let f = this.formatters[k] - s.setProperty(`--var-${k}`, f ? f(this.state[k]) : this.state[k]) + let v = this.state[k] + if (k == "slant") { + // negate slant value (negative values causes positive grades) + v = -v + } + s.setProperty(`--var-${k}`, f ? f(v) : v) } }, } diff --git a/docs/lab/index.html b/docs/lab/index.html index 4e13cc194..1e84d46a9 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -262,8 +262,8 @@ b \t \u1d47 \t U+1D47 \t | b \t c \t \u1d9c \t U+1D9C \t | c \t d \t \u1d48 \t U+1D48 \t | d \t e \t \u1d49 \t U+1D49 \t | e \t \u2091 \t U+2091 -f \t \u1da0 \t U+1DA0 \t | f \t -g \t \u1d4d \t U+1D4D \t | g \t +f \t \u1da0 \t U+1DA0 \t | f \t +g \t \u1d4d \t U+1D4D \t | g \t h \t \u02b0 \t U+02B0 \t | h \t \u2095 \t U+2095 i \t \u1da6 \t U+1DA6 \t | i \t \u1D62 \t U+1D62 j \t \u02b2 \t U+02B2 \t | j \t \u2C7C \t U+2C7C @@ -273,16 +273,16 @@ m \t \u1d50 \t U+1D50 \t | m \t \u2098 \t U+2098 n \t \u207f \t U+207F \t | n \t \u2099 \t U+2099 o \t \u1d52 \t U+1D52 \t | o \t \u2092 \t U+2092 p \t \u1d56 \t U+1D56 \t | p \t \u209A \t U+209A -q \t \u146b \t U+146B \t | q \t +q \t \u146b \t U+146B \t | q \t r \t \u02b3 \t U+02B3 \t | r \t \u1D63 \t U+1D63 s \t \u02e2 \t U+02E2 \t | s \t \u209B \t U+209B t \t \u1d57 \t U+1D57 \t | t \t \u209C \t U+209C u \t \u1d58 \t U+1D58 \t | u \t \u1D64 \t U+1D64 v \t \u1d5b \t U+1D5B \t | v \t \u1D65 \t U+1D65 -w \t \u02b7 \t U+02B7 \t | w \t +w \t \u02b7 \t U+02B7 \t | w \t x \t \u02e3 \t U+02E3 \t | x \t \u2093 \t x \t U+2093 -y \t \u02b8 \t U+02B8 \t | y \t -z \t \u1dbb \t U+1DBB \t | z \t +y \t \u02b8 \t U+02B8 \t | y \t +z \t \u1dbb \t U+1DBB \t | z \t `) @@ -332,16 +332,16 @@ AO AU AT AY BT BY CT ET Ec ",x," ',x,' ‘,x,’ “,x,” x,‛ x,‟ L" L' L’ L” L‛ L‟ aufkauf aufhalt aufbleib -ver/fl ixt auflassen +ver/fl ixt auflassen ho/f_f e auffassen /fi le aufißt raufjagen fıne auf/fi nden Tief/fl ieger Sto/f_f los Mu/f_f on Sto/f_f igel O/f_f zier -Ra/f_f band Tu/f_f höhle Su/f_f kopp +Ra/f_f band Tu/f_f höhle Su/f_f kopp führen fördern fähre wegjagen Bargfeld kyrie afro arte axe luvwärts -Gevatter wann +Gevatter wann ever gewettet severe davon gewonnen down wichtig recken @@ -411,7 +411,7 @@ nun (...) und ([...] sein «sie». «das», «an»; «ich»: »sie.« »das,« »an!« »ich?« «sie.» «das,» «an!» «ich?» -›sie‹. ›da‹, ›an‹; ›ich‹: +›sie‹. ›da‹, ›an‹; ›ich‹: ‹sie›. ‹das›, ‹an›; ‹ich›: ›sie.‹ ›das,‹ ›an!‹ ›ich?‹ ‹sie.› ‹das,› ‹an!› ‹ich?› @@ -427,7 +427,7 @@ auf//fall den//im den//ärger da//leider auf//aber I//I etwa 50% haben 37° im £50 und ¥20 sind $30 und €60 -den §235 sowie #35 +den §235 sowie #35 4mal Seite 3f und 12/f_f . Der §45a in den 20ern von 18:30 bis 20:15 Uhr @@ -678,7 +678,7 @@ function getGlyphInfo(cb) { fetch('glyphinfo.json').then(r => r.json()).then(glyphinfo => { console.log('loaded glyphinfo.json') // { "glyphs": [ - // [name :string, isEmpty: 1|0, unicode? :string|null, + // [name :string, isEmpty: 1|0, unicode? :string|null, // unicodeName? :string, color? :string|null], // ["A", 0, 65, "LATIN CAPITAL LETTER A", "#dbeaf7"], // ... @@ -866,7 +866,7 @@ samples.set('Word mix (combo pairs)', { return '<em>loading words...</em>' } - // TODO: randomize order, or maybe better to zip on + // TODO: randomize order, or maybe better to zip on // let combs1 = combs.filter(c => c.indexOf(ch) != -1) // or sometihng like that @@ -1581,7 +1581,7 @@ document.head.appendChild(fontCSS) <box contenteditable spellcheck="false" class="primaryFont positive"><span>Rectangle</span></box> <box contenteditable spellcheck="false" class="primaryFont positive tight"><span>Rectangle</span></box> <box contenteditable spellcheck="false" class="primaryFont centered positive"><span>Rectangle</span></box> - + <sep></sep> <box contenteditable spellcheck="false" class="secondaryFont showOnlyWithSecondarySample"><span>Rectangle</span></box> @@ -2051,8 +2051,8 @@ function main() { }) let varState = { - weight: 400, // 400-900 - slant: 0, // 0-10 + weight: 400, // 400..900 + slant: 0, // 0..-10 } function updateVarFont() { @@ -2067,7 +2067,7 @@ function main() { varSlantSettingValueImpl = false setCSSProp( "font-variation-settings", - `"wght" ${varState.weight}, "slnt" ${varState.slant}` + `"wght" ${varState.weight}, "slnt" ${-varState.slant}` ) } else { setCSSProp("font-variation-settings", null) @@ -2200,7 +2200,7 @@ function main() { ev.preventDefault() }, {passive:false,capture:true}) - + vars.bind('lineHeight', lineHeightInput, (e, v) => { setCSSProp('line-height', v ? v + 'px' : null) }, (e, prevValue, ev) => { diff --git a/docs/lab/var.html b/docs/lab/var.html index 6ca84e28a..b8a42870c 100644 --- a/docs/lab/var.html +++ b/docs/lab/var.html @@ -33,7 +33,7 @@ body { padding: 40px 40px 40px 35px; font-size: var(--size); letter-spacing: -0.03em; - font-variation-settings: 'wght' var(--weight), 'slnt' var(--slant); + font-variation-settings: 'wght' var(--weight), 'slnt' calc(-1 * var(--slant)); } @supports (font-variation-settings: normal) { @@ -84,7 +84,7 @@ label { </select> </div> <div class="sample" contenteditable> -Inter 3.0<br> +Inter Typeface Family<br> Variable weight axis<br> Variable slant/oblique axis<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> diff --git a/docs/var-test.html b/docs/var-test.html index 6c81174c7..384af2964 100644 --- a/docs/var-test.html +++ b/docs/var-test.html @@ -1,18 +1,39 @@ -<!DOCTYPE HTML> +--- +layout: none +--- +{% + +for file in site.static_files %}{% + assign _path = file.path | remove_first: "/inter" %}{% + if _path == "/font-files/Inter.var.woff2" %}{% + assign inter_var_woff2_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% + endif %}{% +endfor + +%}<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> +/* + +Note on font file URLs: +- The "v" parameter is used to ensure that the latest font file is used, + and not a past cached version. +- The "t" parameters can be used to debug which of the "format(...)" the + web browser chose (i.e. by using a web browser's developer tools.) + +*/ + @font-face { font-family: 'Inter var experimental'; font-weight: 100 900; - font-style: oblique 0deg 10deg; + font-style: oblique 0deg -10deg; font-named-instance: 'Regular'; - src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"), - url("font-files/Inter.var.woff2") format("woff2-variations"), - url("font-files/Inter.var.woff2") format("woff2"); + src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), + url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); } /* Fix for Safari where defining font-weight range casues regular style @@ -20,11 +41,10 @@ @font-face { font-family: 'Inter var experimental safari'; /* DISABLE font-weight: 400 900; */ - font-style: oblique 0deg 10deg; + font-style: oblique 0deg -10deg; font-named-instance: 'Regular'; - src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"), - url("font-files/Inter.var.woff2") format("woff2-variations"), - url("font-files/Inter.var.woff2") format("woff2"); + src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), + url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); } /* Alternate two-file setup used for italic where oblique degrees are not @@ -34,18 +54,16 @@ font-weight: 100 900; font-style: normal; font-named-instance: 'Regular'; - src: url("font-files/Inter-upright.var.woff2") format("woff2 supports variations(gvar)"), - url("font-files/Inter-upright.var.woff2") format("woff2-variations"), - url("font-files/Inter-upright.var.woff2") format("woff2"); + src: url("font-files/Inter-upright.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), + url("font-files/Inter-upright.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); } @font-face { font-family: 'Inter var single-axis'; - font-weight: 100 900; + /*font-weight: 100 900;*/ font-style: italic; font-named-instance: 'Italic'; - src: url("font-files/Inter-italic.var.woff2") format("woff2 supports variations(gvar)"), - url("font-files/Inter-italic.var.woff2") format("woff2-variations"), - url("font-files/Inter-italic.var.woff2") format("woff2"); + src: url("font-files/Inter-italic.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), + url("font-files/Inter-italic.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); } @@ -78,14 +96,28 @@ body { } } +.single-axis { + font-family: 'Inter var single-axis', sans-serif; +} + .samples { display: flex; flex-wrap: wrap; } - +.samples > h2 { + flex: 1 0 100%; + padding-left:20px; + line-height:2; + padding-top: 1em; + border-top:1px solid #ccc; + margin-top: 1em; +} .weightset { /*background: pink;*/ - margin: 10px; + margin: 20px; + width: 200px; + overflow:hidden; + white-space: nowrap; } .intro { @@ -108,12 +140,14 @@ body { } h1, h2 { - margin:0; - font-size: 2em; + margin: 0; + font-size: 2.5em; + font-weight: 700; + letter-spacing: -0.025em; } h2 { - font-size: 1.2em; - font-weight: 600; + font-size: 1.5em; + letter-spacing: -0.02em; } ul { padding-left: 1.2em; @@ -157,51 +191,108 @@ if ( <p> Effective <tt>font-family: </tt><tt id="family-in-use"></tt> </p> - <h2>Known issues:</h2> + <h2>Known issues with variable fonts:</h2> <ul> <li> - <b>Safari 12.0:</b> - Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes - slnt axis to be maxed out by default, causing <tt>font-style:normal</tt> - to be fully slanted/oblique/italic. This is counter-acted by using a - specific <tt>@font-face</tt> for Safari that doesn't define - <tt>font-weight.</tt> + <b>Most browsers as of August 2019:</b> + <ul> + <li> + Mapping of negative slant axis to <tt>font-style:italic</tt> has no effect.<br> + </li> + <li> + Mapping of negative slant axis to <tt>font-style:oblique</tt> has no effect. + </li> + <li> + All current stable versions of major web browser supports + <tt>format("woff2-variations")</tt> + for font url format in <tt>@font-face</tt> declarations. + </ul> </li> <li> - <b>Safari 12.0:</b> - <tt>font-synthesis:none</tt> is required or else - <tt>font-style:italic</tt> causes "double-slant" — - the slnt axis gets maxed out as expected, but then faux oblique is - applied on top of it, causing an overly extreme slant. - This means that <tt>font-style:italic</tt> can't be used in Safari, - and instead we use <tt>font-style:oblique</tt> which works in all - major browsers. Note that this effects <tt><em></tt> and - <tt><i></tt> which in Safari implicitly has - <tt>font-style:italic</tt>. + <b>Safari:</b> + <ul> + <li> + Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes + slnt axis to be maxed out by default, causing <tt>font-style:normal</tt> + to be fully slanted/oblique/italic. This is counter-acted by using a + specific <tt>@font-face</tt> for Safari that doesn't define + <tt>font-weight.</tt> + (Last confirmed version: Safari 12.1) + </li> + <li> + <tt>font-synthesis:none</tt> is required or else + <tt>font-style:italic</tt> causes "double-slant" — + the slnt axis gets maxed out as expected, but then faux oblique is + applied on top of it, causing an overly extreme slant. + This means that <tt>font-style:italic</tt> can't be used in Safari, + and instead we use <tt>font-style:oblique</tt> which works in all + major browsers. Note that this effects <tt><em></tt> and + <tt><i></tt> which in Safari implicitly has + <tt>font-style:italic</tt>. + (Last confirmed version: Safari 12.1) + </li> + </ul> </li> <li> - <b>Chrome 69+:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> - is not supported. + <b>Chrome:</b> + <ul> + <li> + Rendering of overlapping shapes causes "blobs" or "ink bleed". + Overlapping shapes, like the angle + horizontal stem of "A" are + rendered in separate MSAA passes and later combined as bitmaps, + causing a multiplication effect on the alpha channel. + </li> + <li> + Passing explicit degrees to oblique (e.g. <tt>font-style:oblique -5deg</tt>) + is not supported. (Last confirmed version: Chrome 75) + </li> + <li> + For fonts with negative <tt>slnt</tt> values, as per the OT spec, + <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.) + (Last confirmed version: Chrome 75) + </li> + <li> + Mapping of negative-value <tt>ital</tt> and <tt>slnt</tt> axis + to <tt>font-style:italic</tt> is not supported. + </li> + <li> + <b>Version <75:</b> Mapping of positive-value <tt>ital</tt> and <tt>slnt</tt> axis + to <tt>font-style:italic</tt> is not supported. + </li> + <li> + <b>Windows only:</b> kerning is incorrect and + there are issues with ClearType where for example a lower-case "r" + (without hints) might be rendered much lower than a lower-case "n". + (Last confirmed version: Chrome 69) + </li> + </ul> </li> <li> - <b>Chrome 69+:</b> Rendering of overlapping shapes causes "blobs" or "ink bleed". - Overlapping shapes, like the angle + horizontal stem of "A" are - rendered in separate MSAA passes and later combined as bitmaps, - causing a multiplication effect on the alpha channel. + <b>Firefox:</b> + <ul> + <li> + For fonts with negative <tt>slnt</tt> values, as per the OT spec, + <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.) + (Last confirmed version: Firefox 68) + </li> + <li> + <b>Version <68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> + is not supported. + </li> + </ul> </li> <li> - <b>Chrome 69+ (Windows):</b> kerning is incorrect and - there are issues with ClearType where for example a lower-case "r" - (without hints) might be rendered much lower than a lower-case "n". - <li> - <b>Firefox 62:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> - is not supported. - </li> - <li> - <b>Edge 42:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> - is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>. Note: We use separate italic and upright font files for Edge in this - test, which is why intermediate oblique degrees are displayed as either - fully slanted or not slanted at all when viewing this in Edge. + <b>Edge:</b> + <ul> + <li> + Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> + is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>. + Note: We use separate italic and upright font files for Edge in this + test, which is why intermediate oblique degrees are displayed as either + fully slanted or not slanted at all when viewing this in Edge. + (Last confirmed version: Edge 42) + </li> + </ul> </li> </ul> </div> @@ -222,65 +313,92 @@ if (docstyle.fontFamily.indexOf('Inter var') == -1) { } var samples = document.querySelector('div.samples') -var weight = 100, weightMax = 900, weightStep = 20 -var slant = 0, slantMax = 10, slantStep = 5 -while (weight <= weightMax) { - slant = 0 - let weightSet = document.createElement('div') - weightSet.className = 'weightset' +for (let className of ["multi-axis", "single-axis"]) { + + let h2 = document.createElement('h2') + h2.innerText = className + samples.appendChild(h2) + + var weight = 100, weightMax = 900, weightStep = 20 + var slant = 0, slantMax = 10, slantStep = 5 + + while (weight <= weightMax) { + slant = 0 + let weightSet = document.createElement('div') + weightSet.className = 'weightset ' + className + + if (className == "multi-axis") { + while (slant <= slantMax) { + let e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + if (slant != 0) { + e.style.fontStyle = `oblique ${-slant}deg` + e.innerText = `I ${weight} oblique ${-slant}` + } else { + e.innerText = `I ${weight} normal` + } + weightSet.appendChild(e) + slant += slantStep + } + } else { + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + e.innerText = `I ${weight} normal` + weightSet.appendChild(e) + } + + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + e.style.fontStyle = 'oblique' + e.innerText = `I ${weight} oblique` + weightSet.appendChild(e) - while (slant <= slantMax) { - let e = document.createElement('div') + e = document.createElement('div') if (weight != 400) { e.style.fontWeight = String(weight) } - if (slant != 0) { - e.style.fontStyle = `oblique ${slant}deg` - e.innerText = `I ${weight} oblique ${slant}` - } else { - e.innerText = `I ${weight}` + e.style.fontStyle = 'italic' + e.innerText = `I ${weight} italic` + weightSet.appendChild(e) + + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) } + let em = document.createElement('em') + em.innerText = `I ${weight} <em>` + e.appendChild(em) weightSet.appendChild(e) - slant += slantStep - } - e = document.createElement('div') - if (weight != 400) { - e.style.fontWeight = String(weight) - } - e.style.fontStyle = 'oblique' - e.innerText = `I ${weight} oblique` - weightSet.appendChild(e) + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + em = document.createElement('i') + em.innerText = `I ${weight} <i>` + e.appendChild(em) + weightSet.appendChild(e) - e = document.createElement('div') - if (weight != 400) { - e.style.fontWeight = String(weight) - } - e.style.fontStyle = 'italic' - e.innerText = `I ${weight} italic` - weightSet.appendChild(e) + if (className == "multi-axis") { + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + e.style.fontVariationSettings = `'wght' ${weight}, 'slnt' -${slantMax}` + e.innerText = `I ${weight} slnt -${slantMax}` + weightSet.appendChild(e) + } - e = document.createElement('div') - if (weight != 400) { - e.style.fontWeight = String(weight) + samples.appendChild(weightSet) + weight += weightStep } - let em = document.createElement('em') - em.innerText = `I ${weight} <em>` - e.appendChild(em) - weightSet.appendChild(e) - - e = document.createElement('div') - if (weight != 400) { - e.style.fontWeight = String(weight) - } - em = document.createElement('i') - em.innerText = `I ${weight} <i>` - e.appendChild(em) - weightSet.appendChild(e) - - samples.appendChild(weightSet) - weight += weightStep } |