Skip to content

Commit c0b7c6a

Browse files
chrisdavidmillschrisdavidmills
authored
Merge pull request mdn#13 from jpamental/master
Adding font-feature examples and update italics in font-variations
2 parents 9e00e09 + 11e4754 commit c0b7c6a

23 files changed

+2308
-1
lines changed

‎_config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
theme: jekyll-theme-slate

‎font-features/font-kerning.html‎

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

0 commit comments

Comments
 (0)