Skip to content

Commit 50babe3

Browse files
jpamentaljpamental
committed
Adding font-variant page
1 parent 2bc55da commit 50babe3

File tree

2 files changed

+231
-1
lines changed

2 files changed

+231
-1
lines changed

‎font-features/font-variant-numeric-frac.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Font feature example - numeric</title>
6+
<title>Font feature example - numeric fractions, ordinals, and slashed zero</title>
77

88
<style>
99
@font-face{

‎font-features/font-variant.html‎

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

0 commit comments

Comments
 (0)