summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRasmus Andersson <rasmus@notion.se>2019-08-03 20:36:10 +0300
committerRasmus Andersson <rasmus@notion.se>2019-08-03 20:36:10 +0300
commit164e53bb58909927b83c4b23736f24802c78aeb6 (patch)
treec4fcdb4795389cfc1c30ad33ad811332f92e0349
parent862cd438ed1613cfd2585faf0b70bfe4f176a335 (diff)
downloadinter-164e53bb58909927b83c4b23736f24802c78aeb6.tar.xz
Negative slant angle changes to website
-rw-r--r--docs/index-var.css2
-rw-r--r--docs/index-var.js7
-rw-r--r--docs/lab/index.html36
-rw-r--r--docs/lab/var.html4
-rw-r--r--docs/var-test.html328
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>&lt;em&gt;</tt> and
- <tt>&lt;i&gt;</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>&lt;em&gt;</tt> and
+ <tt>&lt;i&gt;</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 &lt;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 &lt;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
}