Skip to content

Commit e261d3a

Browse files
jpamentaljpamental
committed
Add fractions/ordinals/slashed zero example
1 parent 6ea2519 commit e261d3a

File tree

1 file changed

+255
-0
lines changed

1 file changed

+255
-0
lines changed

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

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Font feature example - numeric</title>
7+
8+
<style>
9+
@font-face{
10+
font-family: 'Source Serif';
11+
font-weight: 400;
12+
font-style: normal;
13+
font-stretch: normal;
14+
src: url('fonts/source-serif/SourceSerifPro-Regular.ttf.woff') format('woff'),
15+
url('fonts/source-serif/SourceSerifPro-Regular.ttf.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 "Source Serif", "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: 190px;
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 .diagonal-fracs {
104+
font-variant-numeric: diagonal-fractions;
105+
}
106+
.container1 .ordinal {
107+
font-variant-numeric: ordinal;
108+
}
109+
.container1 .zero {
110+
font-variant-numeric: slashed-zero;
111+
}
112+
.inactive .container1 * {
113+
font-variant-numeric: normal;
114+
}
115+
</style>
116+
<style class="editable2">
117+
/* 'subs', 'sups; */
118+
.container2 .diagonal-fracs {
119+
font-feature-settings: 'frac' 1;
120+
}
121+
.container2 .ordinal {
122+
font-feature-settings: 'ordn' 1;
123+
}
124+
.container2 .zero {
125+
font-feature-settings: 'zero' 1;
126+
}
127+
.inactive .container2 * {
128+
font-feature-settings: 'frac' 0, 'ordn' 0, 'zero' 0;
129+
}
130+
</style>
131+
</head>
132+
133+
<body>
134+
<div class="wrapper">
135+
<div class="demo1">
136+
<section class="section section1">
137+
<div class="container container1">
138+
<p><span class="diagonal-fracs">3/16</span>, or <span class="ordinal">1st</span> of <span class="zero">0</span></p>
139+
</div>
140+
</section>
141+
<textarea class="playable-css1">
142+
.container1 .diagonal-fracs {
143+
font-variant-numeric: diagonal-fractions;
144+
}
145+
.container1 .ordinal {
146+
font-variant-numeric: ordinal;
147+
}
148+
.container1 .zero {
149+
font-variant-numeric: slashed-zero;
150+
}
151+
.inactive .container1 * {
152+
font-variant-numeric: normal;
153+
}
154+
</textarea>
155+
<textarea id="code1" class="playable-html1">
156+
<div class="container container1">
157+
<p><span class="diagonal-fracs">3/16</span>, or <span class="ordinal">1st</span> of <span class="zero">0</span></p>
158+
</div>
159+
</textarea>
160+
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> <label for="demo1_control">Numeric active</label>
161+
</div>
162+
<div class="demo2">
163+
<section class="section section2">
164+
<div class="container container2">
165+
<p><span class="diagonal-fracs">3/16</span> or <span class="ordinal">1st</span> of <span class="zero">0</span></p>
166+
</div>
167+
</section>
168+
<textarea class="playable-css2">
169+
.container2 .diagonal-fracs {
170+
font-feature-settings: 'frac' 1;
171+
}
172+
.container2 .ordinal {
173+
font-feature-settings: 'ordn' 1;
174+
}
175+
.container2 .zero {
176+
font-feature-settings: 'zero' 1;
177+
}
178+
.inactive .container2 * {
179+
font-feature-settings: 'frac' 0, 'ordn' 0, 'zero' 0;
180+
}
181+
</textarea>
182+
<textarea id="code2" class="playable-html2">
183+
<div class="container container2">
184+
<p><span class="diagonal-fracs">3/16</span>, or <span class="ordinal">1st</span> of <span class="zero">0</span></p>
185+
</div>
186+
</textarea>
187+
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> <label for="demo2_control">Numeric active</label>
188+
</div>
189+
</div>
190+
<div class="playable-buttons">
191+
<input id="reset" type="button" value="Reset">
192+
</div>
193+
</body>
194+
<script>
195+
var section1 = document.querySelector('.section1');
196+
var editable1 = document.querySelector('.editable1');
197+
var textareaHTML1 = document.querySelector('.playable-html1');
198+
var textareaCSS1 = document.querySelector('.playable-css1');
199+
var section2 = document.querySelector('.section2');
200+
var editable2 = document.querySelector('.editable2');
201+
var textareaHTML2 = document.querySelector('.playable-html2');
202+
var textareaCSS2 = document.querySelector('.playable-css2');
203+
var rangeinput = document.querySelector('.controls--slider');
204+
var reset = document.getElementById('reset');
205+
var htmlCode1 = textareaHTML1.value;
206+
var cssCode1 = textareaCSS1.value;
207+
var htmlCode2 = textareaHTML2.value;
208+
var cssCode2 = textareaCSS2.value;
209+
var demo1_active = document.getElementById('demo1_control');
210+
var demo2_active = document.getElementById('demo2_control');
211+
212+
demo1_active.addEventListener('change', function () {
213+
if (this.checked) {
214+
this.parentNode.classList.remove('inactive');
215+
} else {
216+
this.parentNode.classList.add('inactive');
217+
}
218+
});
219+
220+
demo2_active.addEventListener('change', function () {
221+
if (this.checked) {
222+
this.parentNode.classList.remove('inactive');
223+
} else {
224+
this.parentNode.classList.add('inactive');
225+
}
226+
});
227+
228+
function fillCode() {
229+
editable1.innerHTML = textareaCSS1.value;
230+
section1.innerHTML = textareaHTML1.value;
231+
editable2.innerHTML = textareaCSS2.value;
232+
section2.innerHTML = textareaHTML2.value;
233+
}
234+
235+
reset.addEventListener('click', function () {
236+
textareaHTML1.value = htmlCode1;
237+
textareaCSS1.value = cssCode1;
238+
textareaHTML2.value = htmlCode2;
239+
textareaCSS2.value = cssCode2;
240+
demo1_active.checked = true;
241+
demo1_active.parentNode.classList.remove('inactive');
242+
demo2_active.checked = true;
243+
demo2_active.parentNode.classList.remove('inactive');
244+
fillCode();
245+
});
246+
247+
textareaHTML1.addEventListener('input', fillCode);
248+
textareaCSS1.addEventListener('input', fillCode);
249+
textareaHTML2.addEventListener('input', fillCode);
250+
textareaCSS2.addEventListener('input', fillCode);
251+
window.addEventListener('load', fillCode);
252+
253+
</script>
254+
255+
</html>

0 commit comments

Comments
 (0)