Skip to content

Commit 85deb81

Browse files
jpamentaljpamental
committed
More updates for new font feature pages
1 parent fe26024 commit 85deb81

File tree

4 files changed

+87
-29
lines changed

4 files changed

+87
-29
lines changed

‎font-features/font-kerning.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,18 @@
104104
.container1 * {
105105
font-kerning: normal;
106106
}
107+
.inactive .container1 * {
108+
font-kerning: none;
109+
}
107110
</style>
108111
<style class="editable2">
109112
/* 'kern' 1|0 (on or off) */
110113
.container2 * {
111114
font-feature-settings: 'kern' 1;
112115
}
116+
.inactive .container2 * {
117+
font-feature-settings: 'kern' 0;
118+
}
113119
</style>
114120
</head>
115121

@@ -126,12 +132,16 @@
126132
.container1 * {
127133
font-kerning: normal;
128134
}
135+
.inactive .container1 * {
136+
font-kerning: none;
137+
}
129138
</textarea>
130139
<textarea id="code1" class="playable-html1">
131140
<div class="container container1">
132141
<p>Puffy Pangolins</p>
133142
</div>
134143
</textarea>
144+
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> Kerning active
135145
</div>
136146
<div class="demo2">
137147
<section class="section section2">
@@ -144,12 +154,16 @@
144154
.container2 * {
145155
font-feature-settings: 'kern' 1;
146156
}
157+
.inactive .container2 * {
158+
font-feature-settings: 'kern' 0;
159+
}
147160
</textarea>
148161
<textarea id="code2" class="playable-html2">
149162
<div class="container container2">
150163
<p>Puffy Pangolins</p>
151164
</div>
152165
</textarea>
166+
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> Kerning active
153167
</div>
154168
</div>
155169
<div class="playable-buttons">
@@ -171,6 +185,8 @@
171185
var cssCode1 = textareaCSS1.value;
172186
var htmlCode2 = textareaHTML2.value;
173187
var cssCode2 = textareaCSS2.value;
188+
var demo1_active = document.getElementById('demo1_control');
189+
var demo2_active = document.getElementById('demo2_control');
174190

175191
function fillCode() {
176192
editable1.innerHTML = textareaCSS1.value;
@@ -187,6 +203,22 @@
187203
fillCode();
188204
});
189205

206+
demo1_active.addEventListener('change', function () {
207+
if (this.checked) {
208+
this.parentNode.classList.remove('inactive');
209+
} else {
210+
this.parentNode.classList.add('inactive');
211+
}
212+
});
213+
214+
demo2_active.addEventListener('change', function () {
215+
if (this.checked) {
216+
this.parentNode.classList.remove('inactive');
217+
} else {
218+
this.parentNode.classList.add('inactive');
219+
}
220+
});
221+
190222
textareaHTML1.addEventListener('input', fillCode);
191223
textareaCSS1.addEventListener('input', fillCode);
192224
textareaHTML2.addEventListener('input', fillCode);

‎font-features/font-variant-caps.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
}
110110
</style>
111111
<style class="editable2">
112-
/* 'smcp', 'c2sc; */
112+
/* 'smcp', 'c2sc' */
113113
.container2 .small-caps {
114114
font-feature-settings: 'smcp' 1;
115115
}
@@ -149,7 +149,7 @@
149149
</div>
150150
</section>
151151
<textarea class="playable-css2">
152-
/* 'smcp', 'c2sc; */
152+
/* 'smcp', 'c2sc' */
153153
.container2 .small-caps {
154154
font-feature-settings: 'smcp' 1;
155155
}

font-features/font-variant-position copy.html renamed to font-features/font-variant-numeric.html

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Font feature example - position</title>
6+
<title>Font feature example - numeric</title>
77

88
<style>
99
@font-face{
10-
font-family: 'Playfair Display';
10+
font-family: 'Source Serif';
1111
font-weight: 400;
1212
font-style: normal;
1313
font-stretch: normal;
14-
src: url('fonts/playfair-display/playfair-display-regular.woff') format('woff'),
15-
url('fonts/playfair-display/playfair-display-regular.woff2') format('woff2');
14+
src: url('fonts/source-serif/SourceSerifPro-Regular.ttf.woff') format('woff'),
15+
url('fonts/source-serif/SourceSerifPro-Regular.ttf.woff2') format('woff2');
1616
}
1717

1818

@@ -28,7 +28,7 @@
2828
}
2929

3030
body {
31-
font: 1.2em "Playfair Display", "Times New Roman", serif;
31+
font: 1.2em "Source Serif", "Times New Roman", serif;
3232
margin: 20px;
3333
padding: 0;
3434
}
@@ -101,20 +101,32 @@
101101
</style>
102102
<style class="editable1">
103103
/* position: normal|sub|super */
104-
.container1 .super {
105-
font-variant-position: super;
104+
.container1 .lining {
105+
font-variant-numeric: lining-nums;
106106
}
107-
.container1 .sub {
108-
font-variant-position: sub;
107+
.container1 .oldstyle {
108+
font-variant-numeric: oldstyle-nums;
109+
}
110+
.container1 .diagonal-fracs {
111+
font-variant-numeric: diagonal-fractions;
112+
}
113+
.container1 .stacked-fracs {
114+
font-variant-numeric: stacked-fractions;
109115
}
110116
</style>
111117
<style class="editable2">
112118
/* 'subs', 'sups; */
113-
.container2 .super {
114-
font-feature-settings: 'sups' 1;
119+
.container2 .lining {
120+
font-feature-settings: 'lnum' 1;
121+
}
122+
.container2 .oldstyle {
123+
font-feature-settings: 'onum' 1;
124+
}
125+
.container2 .diagonal-fracs {
126+
font-feature-settings: 'frac' 1;
115127
}
116-
.container2 .sub {
117-
font-feature-settings: 'subs' 1;
128+
.container2 .stacked-fracs {
129+
font-feature-settings: 'afrc' 1;
118130
}
119131
</style>
120132
</head>
@@ -124,42 +136,57 @@
124136
<div class="demo1">
125137
<section class="section section1">
126138
<div class="container container1">
127-
<p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p>
139+
<p><span class="lining">642</span> or <span class="oldstyle">642</span></p>
140+
<p><span class="diagonal-fracs">3/16</span> or <span class="stacked-fracs">1/2</span></p>
128141
</div>
129142
</section>
130143
<textarea class="playable-css1">
131144
/* position: normal|sub|super */
132-
.container1 .super {
133-
font-variant-position: super;
145+
.container1 .lining {
146+
font-variant-numeric: lining-nums;
134147
}
135-
.container1 .sub {
136-
font-variant-position: sub;
148+
.container1 .oldstyle {
149+
font-variant-numeric: oldstyle-nums;
150+
}
151+
.container1 .diagonal-fracs {
152+
font-variant-numeric: diagonal-fractions;
153+
}
154+
.container1 .stacked-fracs {
155+
font-variant-numeric: stacked-fractions;
137156
}
138157
</textarea>
139158
<textarea id="code1" class="playable-html1">
140159
<div class="container container1">
141-
<p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p>
160+
<p><span class="lining">642</span> or <span class="oldstyle">642</span></p>
161+
<p><span class="diagonal-fracs">3/16</span> or <span class="stacked-fracs">1/2</span></p>
142162
</div>
143163
</textarea>
144164
</div>
145165
<div class="demo2">
146166
<section class="section section2">
147167
<div class="container container2">
148-
<p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p>
168+
<p><span class="lining">642</span> or <span class="oldstyle">642</span></p>
169+
<p><span class="diagonal-fracs">3/16</span> or <span class="stacked-fracs">1/2</span></p>
149170
</div>
150171
</section>
151172
<textarea class="playable-css2">
152-
/* 'subs', 'sups' */
153-
.container2 .super {
154-
font-feature-settings: 'sups';
173+
.container2 .lining {
174+
font-feature-settings: 'lnum' 1;
175+
}
176+
.container2 .oldstyle {
177+
font-feature-settings: 'onum' 1;
178+
}
179+
.container2 .diagonal-fracs {
180+
font-feature-settings: 'frac' 1;
155181
}
156-
.container2 .sub {
157-
font-feature-settings: 'subs';
182+
.container2 .stacked-fracs {
183+
font-feature-settings: 'afrc' 1;
158184
}
159185
</textarea>
160186
<textarea id="code2" class="playable-html2">
161187
<div class="container container2">
162-
<p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p>
188+
<p><span class="lining">642</span> or <span class="oldstyle">642</span></p>
189+
<p><span class="diagonal-fracs">3/16</span> or <span class="stacked-fracs">1/2</span></p>
163190
</div>
164191
</textarea>
165192
</div>

‎variable-fonts/italic.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
src: url('fonts/jost-VF.woff2') format('woff2-variations');
1212
font-weight: 300 900;
1313
font-stretch: 75% 150%;
14-
font-style: oblique 0deg 20deg;
1514
font-display: swap;
1615
}
1716

0 commit comments

Comments
 (0)