Skip to content

Commit f70b3ba

Browse files
jpamentaljpamental
committed
Adding East Asian example
1 parent 6f9fe04 commit f70b3ba

File tree

5 files changed

+354
-0
lines changed

5 files changed

+354
-0
lines changed

‎font-features/font-variant-east-asian.html

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

0 commit comments

Comments
 (0)