Skip to content

Commit bf0eeff

Browse files
jpamentaljpamental
committed
Adding alternates demo
1 parent 1286ec1 commit bf0eeff

File tree

4 files changed

+272
-2
lines changed

4 files changed

+272
-2
lines changed

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

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Font feature example - alternates</title>
7+
8+
<style>
9+
@font-face{
10+
font-family: 'Plex Serif';
11+
font-weight: normal;
12+
font-style: normal;
13+
font-stretch: normal;
14+
src: url('fonts/plex/IBMPlexSerif-Regular.woff') format('woff'),
15+
url('fonts/plex/IBMPlexSerif-Regular.woff2') format('woff2');
16+
}
17+
@font-face{
18+
font-family: 'Dancing Script';
19+
font-weight: normal;
20+
font-style: normal;
21+
font-stretch: normal;
22+
src: url('fonts/dancing-script/dancing-script-regular.woff') format('woff'),
23+
url('fonts/dancing-script/dancing-script-regular.woff2') format('woff2');
24+
}
25+
26+
27+
html {
28+
box-sizing: border-box;
29+
font-size: 100%;
30+
}
31+
32+
*,
33+
*::before,
34+
*::after {
35+
box-sizing: inherit;
36+
}
37+
38+
body {
39+
font: 1.2em "Plex Serif", "Times New Roman", serif;
40+
margin: 20px;
41+
padding: 0;
42+
}
43+
44+
.script {
45+
font-family: "Dancing Script";
46+
}
47+
48+
.wrapper {
49+
width: 100%;
50+
display: grid;
51+
grid-template-columns: 1fr;
52+
grid-gap: 1rem;
53+
}
54+
55+
@media screen and (min-width: 35rem) {
56+
.wrapper {
57+
grid-template-columns: 1fr 1fr;
58+
}
59+
}
60+
61+
@media screen and (min-width: 52rem) {
62+
.wrapper {
63+
grid-template-columns: 1fr 1fr;
64+
}
65+
}
66+
67+
textarea {
68+
font-family: monospace;
69+
display: block;
70+
margin-bottom: 10px;
71+
height: 160px;
72+
background-color: #F4F7F8;
73+
border: none;
74+
border-left: 6px solid #558ABB;
75+
color: #4D4E53;
76+
padding: 1rem 0;
77+
width: 100%;
78+
}
79+
80+
textarea:nth-of-type(1) {
81+
height: 280px;
82+
}
83+
84+
textarea:nth-of-type(2) {
85+
height: 100px;
86+
}
87+
88+
.playable-buttons {
89+
text-align: right;
90+
width: 100%;
91+
padding: 0.5rem 0;
92+
font-size: 100%;
93+
}
94+
95+
.section {
96+
width: 100%;
97+
border: 1px solid #4D4E53;
98+
border-radius: 2px;
99+
padding: 10px 14px 10px 10px;
100+
margin-bottom: 10px;
101+
}
102+
103+
.section input {
104+
display: block;
105+
margin: 5px;
106+
}
107+
108+
.container * {
109+
font-size: 4rem;
110+
margin: 1.5rem 0;
111+
}
112+
113+
</style>
114+
<style class="editable1">
115+
@font-feature-values "Plex Serif" {
116+
@styleset { salt-a: 1; salt-g: 2; }
117+
@stylistic { alternates: 1; }
118+
}
119+
@font-feature-values "Dancing Script" {
120+
@stylistic { alternates: 1; }
121+
}
122+
.container1 * {
123+
font-variant-ligatures: common-ligatures;
124+
font-variant-alternates: styleset(salt-a);
125+
}
126+
.script {
127+
font-variant-alternates: stylistic(alternates);
128+
}
129+
.inactive .container1 * {
130+
font-variant-ligatures: none;
131+
font-variant-alternates: normal;
132+
}
133+
</style>
134+
<style class="editable2">
135+
.container2 * {
136+
font-feature-settings: 'liga', 'ss01';
137+
}
138+
.script {
139+
font-feature-settings: 'salt';
140+
}
141+
.inactive .container2 * {
142+
font-feature-settings: 'liga' 0, 'ss01' 0, 'salt' 0;
143+
}
144+
</style>
145+
</head>
146+
147+
<body>
148+
<div class="wrapper">
149+
<div class="demo1">
150+
<section class="section section1">
151+
<div class="container container1">
152+
<p><span class="script">My</span> Perfidious pangram</p>
153+
</div>
154+
</section>
155+
<textarea class="playable-css1">
156+
@font-feature-values "Plex Serif" {
157+
@styleset { salt-a: 1; salt-g: 2; }
158+
@stylistic { alternates: 1; }
159+
}
160+
@font-feature-values "Dancing Script" {
161+
@stylistic { alternates: 1; }
162+
}
163+
.container1 * {
164+
font-variant-ligatures: common-ligatures;
165+
font-variant-alternates: styleset(salt-a);
166+
}
167+
.script {
168+
font-variant-alternates: stylistic(alternates);
169+
}
170+
.inactive .container1 * {
171+
font-variant-ligatures: none;
172+
font-variant-alternates: normal;
173+
}
174+
</textarea>
175+
<textarea id="code1" class="playable-html1">
176+
<div class="container container1">
177+
<p><span class="script">My</span> Perfidious pangram</p>
178+
</div>
179+
</textarea>
180+
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> <label for="demo1_control">Ligatures active</label>
181+
</div>
182+
<div class="demo2">
183+
<section class="section section2">
184+
<div class="container container2">
185+
<p><span class="script">My</span> Perfidious pangram</p>
186+
</div>
187+
</section>
188+
<textarea class="playable-css2">
189+
.container2 * {
190+
font-feature-settings: 'liga', 'ss01';
191+
}
192+
.script {
193+
font-feature-settings: 'salt';
194+
}
195+
.inactive .container2 * {
196+
font-feature-settings: 'liga' 0, 'ss01' 0, 'salt' 0;
197+
}
198+
</textarea>
199+
<textarea id="code2" class="playable-html2">
200+
<div class="container container2">
201+
<p><span class="script">My</span> Perfidious pangram</p>
202+
</div>
203+
</textarea>
204+
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> <label for="demo2_control">Ligatures active</label>
205+
</div>
206+
</div>
207+
<div class="playable-buttons">
208+
<input id="reset" type="button" value="Reset">
209+
</div>
210+
</body>
211+
<script>
212+
var section1 = document.querySelector('.section1');
213+
var editable1 = document.querySelector('.editable1');
214+
var textareaHTML1 = document.querySelector('.playable-html1');
215+
var textareaCSS1 = document.querySelector('.playable-css1');
216+
var section2 = document.querySelector('.section2');
217+
var editable2 = document.querySelector('.editable2');
218+
var textareaHTML2 = document.querySelector('.playable-html2');
219+
var textareaCSS2 = document.querySelector('.playable-css2');
220+
var rangeinput = document.querySelector('.controls--slider');
221+
var reset = document.getElementById('reset');
222+
var htmlCode1 = textareaHTML1.value;
223+
var cssCode1 = textareaCSS1.value;
224+
var htmlCode2 = textareaHTML2.value;
225+
var cssCode2 = textareaCSS2.value;
226+
var demo1_active = document.getElementById('demo1_control');
227+
var demo2_active = document.getElementById('demo2_control');
228+
229+
demo1_active.addEventListener('change', function () {
230+
if (this.checked) {
231+
this.parentNode.classList.remove('inactive');
232+
} else {
233+
this.parentNode.classList.add('inactive');
234+
}
235+
});
236+
237+
demo2_active.addEventListener('change', function () {
238+
if (this.checked) {
239+
this.parentNode.classList.remove('inactive');
240+
} else {
241+
this.parentNode.classList.add('inactive');
242+
}
243+
});
244+
245+
function fillCode() {
246+
editable1.innerHTML = textareaCSS1.value;
247+
section1.innerHTML = textareaHTML1.value;
248+
editable2.innerHTML = textareaCSS2.value;
249+
section2.innerHTML = textareaHTML2.value;
250+
}
251+
252+
reset.addEventListener('click', function () {
253+
textareaHTML1.value = htmlCode1;
254+
textareaCSS1.value = cssCode1;
255+
textareaHTML2.value = htmlCode2;
256+
textareaCSS2.value = cssCode2;
257+
demo1_active.checked = true;
258+
demo1_active.parentNode.classList.remove('inactive');
259+
demo2_active.checked = true;
260+
demo2_active.parentNode.classList.remove('inactive');
261+
fillCode();
262+
});
263+
264+
textareaHTML1.addEventListener('input', fillCode);
265+
textareaCSS1.addEventListener('input', fillCode);
266+
textareaHTML2.addEventListener('input', fillCode);
267+
textareaCSS2.addEventListener('input', fillCode);
268+
window.addEventListener('load', fillCode);
269+
270+
</script>
271+
272+
</html>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@
100100

101101
</style>
102102
<style class="editable1">
103-
/* ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual */
104103
.container1 * {
105104
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
106105
}
@@ -128,7 +127,6 @@
128127
</div>
129128
</section>
130129
<textarea class="playable-css1">
131-
/* ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual */
132130
.container1 * {
133131
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
134132
}

‎font-features/fonts/dancing-script/dancing-script-regular.woff

56.2 KB
Binary file not shown.

‎font-features/fonts/dancing-script/dancing-script-regular.woff2

45.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)