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 'loading words...'
}
- // 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)
Rectangle
Rectangle
Rectangle
-
+
Rectangle
@@ -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 {
-Inter 3.0
+Inter Typeface Family
Variable weight axis
Variable slant/oblique axis
ABCDEFGHIJKLMNOPQRSTUVWXYZ
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 @@
-
+---
+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
+
+%}