-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
367 lines (361 loc) · 25.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font Playground -- Play with variable fonts!</title>
<meta name="viewport" content="width=900, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<meta name="Description" content="fonts, typeface, typography, variable font, Adobe VF Prototype, Amstelvar, Avenir Next, Bahnschrift, Barlow, Buffalo Gals, Cheee, Compressa, dT Jakob, Decovar, Dunbar, Extraordinaire, Extraordinaire Shade, Fit, Gimlet Beta, Gimlet Italic Beta, Gingham, Gnomon*, Input Mono Beta, Jabin, Kairos Sans, Lab, League Mono, Libre Franklin, Libre Franklin Italic, Louvette Beta, Louvette Italic Beta, Markazi Text, Merit Badge, FF Meta, Nunito Beta, Output Sans Beta, Output Sans Hairlines, Pappardelle, Renner*, Rhody, Roslindale Beta, San Francisco Display, San Francisco Text, San Francisco Text Italic, Selawik, Slovic, Source Code, Source Code Italic, Source Sans, Source Sans Italic, Source Serif, Venn, Voto Serif, Zinzin, Adobe, Frank Grießhammer, Font Bureau, David Berlow, Monotype, Adrian Frutiger, Akira Kobayashi, Microsoft, Tribby Type Co., Jeremy Tribby, Rickner Type, Thomas Rickner, OH no Type Co., James T. Edmondson, Ingo Preuss, dooType, Eduilson Coan, Gustavo Soares, CJ Type, CJ Dunn, DJR, David Jonathan Ross, David Jonathan Ross, Oded Ezer, Christoph Koeberlin, indestructible type*, Owen Earl, DJR, Font Bureau, Frida Medrano, Terrance Weinzierl, The League of Moveable Type, Tyler Finck, Tyler Finck, Impallari Type, Pablo Impallari, Rodrigo Fuenzalida, Nhung Nguyen, Borna Izadpanah, Florian Runge, Google, Borna Izadpanah (Arabic designer), Fiona Ross (Arabic design director) and Florian Runge (Latin designer), Erik Spiekermann, Google, Vernon Adams, Apple, Aaron Bell, Fontfabric, Plamen Motev, Paul D. Hunt, Teo Tuominen, Paul D. Hunt, Dalton Maag, Monotype Design Team, Adam Twardoch, Adam Twardoch, Natanael Gama, Adam Twardoch"/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="Font Playground">
<meta name="twitter:title" content="Font Playground -- Play with variable fonts!">
<meta name="twitter:description" content="The most fun place to experiment with layouts using variable fonts, and export front-end code right from this little web app. Designed and developed by Wenting Zhang.">
<meta name="twitter:image" content="https://res.cloudinary.com/dr6lvwubh/image/upload/v1532892532/social-assets/font-playground-twitter-1200-675.png">
<meta property="og:type" content="website">
<meta property="og:title" content="Font Playground -- Play with variable fonts!">
<meta property="og:description" content="The most fun place to experiment with layouts using variable fonts, and export front-end code right from this little web app. Designed and developed by Wenting Zhang.">
<meta property="og:site_name" content="Font Playground">
<meta property="og:url" content="https://play.typedetail.com/">
<meta property="og:image" content="https://res.cloudinary.com/dr6lvwubh/image/upload/v1532892532/social-assets/font-playground-facebook-1200-630.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js'></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122306892-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-122306892-1');
</script>
</head>
<body class="select-disabled">
<div id="font-playground-app" :class="{
'design-view': appStates.tabs.design.isActive,
'code-view': appStates.tabs.code.isActive,
'about-view': appStates.tabs.about.isActive,
'font-menu-opened': appStates.drawer.fontMenu.isActive }">
<div class="tabs select-disabled">
<a class="logo-text" href="/"><span class="accent-text">Font</span> Playground</a>
<ul class="menu label-text">
<li>
<span>File</span>
<ul>
<li @click="newFile">New</li>
<li @click="openFile('prompt')">Open…</li>
<li class="contains-sub-menu" v-if="appStates.recentFiles.length > 0">Open Recent
<ul>
<li v-for="file in appStates.recentFiles" @click="openFile(file)">{{file}}</li>
</ul>
</li>
<li @click="saveFileToCodepen">Save to CodePen</li>
<a class="offsite-link" href="https://codepen.io/tag/font_playground/" target="_blank">Online Gallery</a>
</ul>
</li>
<li>
<span>Help</span>
<ul>
<a class="offsite-link" href="https://www.youtube.com/playlist?list=PLjvaEvhJuIkyVP_jPw2HGN5jjjwKZrC13" target="_blank">Tutorial Videos</a>
<a class="offsite-link" href="https://github.com/wentin/font-playground/releases/" target="_blank">What’s New</a>
<a class="offsite-link" href="https://github.com/wentin/font-playground/issues/new" target="_blank">Report Issue</a>
</ul>
</li>
</ul>
<div class="tab label-text" :class="{ active: tab.isActive }" v-for="tab in appStates.tabs" @click="activateTab(tab)">{{ tab.name }}</div>
<div class="social">
<a href="http://eepurl.com/dCxipf" target="_blank" class="newsletter icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>newsletter</title><path d="M0,1,3.417,14.578l6.648-2.119L4.137,5.233l7.65,6.71L18,10ZM10.279,17.262V13.526l-2.187.65Z"/></svg>
</a>
<a href="https://twitter.com/home?status=Font%20Playground%20--%20Play%20with%20variable%20fonts,%20and%20export%20front-end%20code%20right%20from%20this%20little%20web%20app%3A%20https%3A//play.typedetail.com/%20%23variablefonts%20%23fontplayground%20via%20%40DesignJokes" target="_blank" class="twitter icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>twitter</title><path d="M16.969,4.549a6.624,6.624,0,0,1-1.883.516A3.307,3.307,0,0,0,16.528,3.25a6.777,6.777,0,0,1-2.084.789A3.279,3.279,0,0,0,8.769,6.278a3.373,3.373,0,0,0,.084.749,9.291,9.291,0,0,1-6.76-3.421,3.222,3.222,0,0,0-.444,1.65,3.28,3.28,0,0,0,1.458,2.73,3.274,3.274,0,0,1-1.485-.41v.04a3.281,3.281,0,0,0,2.63,3.218,3.317,3.317,0,0,1-.864.114,3.282,3.282,0,0,1-.61-.057,3.292,3.292,0,0,0,3.069,2.278A6.579,6.579,0,0,1,1.78,14.576,7,7,0,0,1,1,14.532a9.333,9.333,0,0,0,5.038,1.474,9.265,9.265,0,0,0,9.332-9.2V6.68c0-.139,0-.28-.01-.42A6.62,6.62,0,0,0,17,4.562Z"></svg>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//play.typedetail.com/%20" target="_blank" class="facebook icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>facebook</title><path d="M15.227,2H2.773A.773.773,0,0,0,2,2.773H2V15.228A.771.771,0,0,0,2.77,16H9.477V10.575H7.652V8.466H9.477V6.905A2.544,2.544,0,0,1,11.756,4.12h0a2.465,2.465,0,0,1,.438-.006,15.331,15.331,0,0,1,1.631.082v1.89h-1.12c-.875,0-1.045.421-1.045,1.034V8.468h2.09l-.271,2.118H11.66V16h3.567A.772.772,0,0,0,16,15.229h0V2.772A.772.772,0,0,0,15.228,2Z"/></svg>
</a>
<a href="https://github.com/wentin/font-playground" target="_blank" class="github icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>github</title><path d="M9.006,1a8.006,8.006,0,0,0-2.532,15.6c.4.075.547-.172.547-.384,0-.19-.006-.693-.01-1.361-2.227.483-2.7-1.074-2.7-1.074a2.123,2.123,0,0,0-.891-1.174c-.725-.5.056-.486.056-.486a1.679,1.679,0,0,1,1.226.825,1.7,1.7,0,0,0,2.309.675l.022-.013a1.707,1.707,0,0,1,.508-1.071c-1.778-.2-3.647-.888-3.647-3.955a3.091,3.091,0,0,1,.824-2.149,2.843,2.843,0,0,1,.07-2.12s.67-.214,2.2.821a7.554,7.554,0,0,1,4,0c1.521-1.036,2.192-.821,2.192-.821a2.928,2.928,0,0,1,.08,2.12,3.107,3.107,0,0,1,.821,2.149c0,3.075-1.872,3.752-3.653,3.948a1.917,1.917,0,0,1,.54,1.481c0,1.072-.01,1.933-.01,2.193,0,.21.14.46.551.38A8,8,0,0,0,9.006,1Z"/></svg>
</a>
</div>
</div>
<div class="tools">
<div class="tool selector active">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>select</title><path d="M4,1,14.7,12.7a.192.192,0,0,1-.038.269A.181.181,0,0,1,14.6,13H8.7a.762.762,0,0,0-.4.2l-4,3.6a.192.192,0,0,1-.269-.038A.181.181,0,0,1,4,16.7Z"/></svg>
</div>
<div class="tool point-type" @click="addCanvasObject('point type')">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>point-type</title><path d="M6.5,16a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H8V4H4V5.5a.5.5,0,0,1-.5.5h-1A.5.5,0,0,1,2,5.5v-3A.5.5,0,0,1,2.5,2h13a.5.5,0,0,1,.5.5v3a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4H10V14h1.5a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5Z"/></svg>
</div>
<div class="tool area-type" @click="addCanvasObject('area type')">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>area-type</title><path d="M12.5,16a.5.5,0,0,1-.5-.5V4H10V15.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V11H6.5a4.5,4.5,0,0,1,0-9h7a.5.5,0,0,1,.5.5v13a.5.5,0,0,1-.5.5Z"/></svg>
</div>
<div class="tool fit-type">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>fit-type</title><path d="M4,9.051v-3.1A2.5,2.5,0,0,0,5.949,4h6.1a2.5,2.5,0,1,0,0-1h-6.1A2.5,2.5,0,1,0,3,5.949v3.1A2.5,2.5,0,1,0,5.949,12H7V11H5.949A2.505,2.505,0,0,0,4,9.051ZM14.5,2A1.5,1.5,0,1,1,13,3.5,1.5,1.5,0,0,1,14.5,2ZM2,3.5A1.5,1.5,0,1,1,3.5,5,1.5,1.5,0,0,1,2,3.5ZM3.5,13A1.5,1.5,0,1,1,5,11.5,1.5,1.5,0,0,1,3.5,13Z"/><path d="M16.5,7h-9a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h1a.5.5,0,0,0,.5-.5V9h2v5h-.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-1a.5.5,0,0,0-.5-.5H13V9h2v1.5a.5.5,0,0,0,.5.5h1a.5.5,0,0,0,.5-.5v-3A.5.5,0,0,0,16.5,7Z"/></svg>
<div class="tip-text">Feature coming soon</div>
</div>
<div class="tool font-menu" :class="{ active: appStates.drawer.fontMenu.isActive }" @click="toggleDrawer(appStates.drawer.fontMenu)">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>font-menu</title><path d="M13.93,1.253C12.515,1.253,11.608,1,10.151,1c-4.708,0-6.9,2.681-6.9,5.4,0,1.6.76,2.132,2.259,2.132a2.949,2.949,0,0,1-.3-1.626c0-3.188,1.2-4.116,2.745-4.18,0,0-1.265,12.4-4.934,13.884V17H7.969L9.657,9h3.094l.689-2H10.079l.811-3.846a14.012,14.012,0,0,0,2.617.38c.971,0,1.858-.3,2.343-2.533a6.239,6.239,0,0,1-1.921.253Z" fill="#666"/></svg>
</div>
</div>
<div class="drawer">
<div class="section section-font-cards">
<h4 class="subtitle-text">FONT FAMILY</h4>
<div class="search-box">
<input required class="value-text" type="text" v-model="search" placeholder="Search by name, axis, designer…" @keydown="captureKeydown"/>
<div class="search-icon"></div>
<div class="close-button" @click="search = ''"></div>
</div>
<div class="font-cards">
<div class="font-card" :id="fontFamily.cssCodeName.replace(/ /g,'-')" :class="{ active: fontFamily.isActive }" v-for="fontFamily in filteredFontFamilies" @click="activateFamily(fontFamily)">
<h4 class="label-text">{{ fontFamily.fontFamilyName }}</h4>
<h4 class="badge-text">{{ fontFamily.variableOptions.axes.length }}</h4>
<h1 class="font-preview"
v-if="!fontFamily.previewText.isCustom"
:style="{fontFamily: fontFamily.cssCodeName}">
{{ fontFamily.fontFamilyName }}
</h1>
<h1 class="font-preview"
v-if="fontFamily.previewText.isCustom"
:style="{fontFamily: fontFamily.cssCodeName}">
{{ fontFamily.previewText.customText }}
</h1>
</div>
</div>
</div>
<div class="section section-font-info">
<h4 class="subtitle-text">FONT INFO</h4>
<div class="font-info label-text">
<div class="font-card active" @click="scrollIntoView(activeFont)">
<h4 class="label-text">{{ activeFont.fontFamilyName }}</h4>
<h4 class="badge-text">{{ activeFont.variableOptions.axes.length }}</h4>
<h1 class="font-preview"
v-if="!activeFont.previewText.isCustom"
:style="{fontFamily: activeFont.cssCodeName}">
{{ activeFont.fontFamilyName }}
</h1>
<h1 class="font-preview" v-if="activeFont.previewText.isCustom">
{{ activeFont.previewText.customText }}
</h1>
</div>
<table class="font-info__table">
<tr>
<th class="label-text">Designer</th>
<td class="value-text">{{ activeFont.fontInfo.designer }}</td>
</tr>
<tr>
<th class="label-text">Publisher</th>
<td class="value-text">{{ activeFont.fontInfo.publisher }}</td>
</tr>
<tr>
<th class="label-text">License</th>
<td class="value-text">{{ activeFont.fontInfo.license }}</td>
</tr>
<tr>
<th class="label-text">Link</th>
<td><a :href="activeFont.fontInfo.url" class="value-text" target="_blank">{{ activeFont.fontInfo.urlText }}</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class="canvas" @click="deselectAllCanvasObject">
<script type="text/x-template" id="point-type-frame-template">
<div class="text-frame"
:class="{
'area-type': cobject.type == 'area type',
'point-type': cobject.type == 'point type',
'selected': cobject.isSelected,
'vf-optical-size-on': isVFOpticalSizeSupported,
'vf-width-on': isVFWidthSupported,
'vf-slant-on': isVFSlantSupported,
'vf-xheight-on': isVFXHeightSupported }"
:style="textFrameStyles"
@dblclick="editTextFrame"
@mousedown="moveTextFrameInitDrag"
@touchstart="moveTextFrameInitDrag"
>
<div class="controls--vf-opsz" @mousedown="controlVFOpticalSizeInitDrag"
@touchstart="controlVFOpticalSizeInitDrag">
<div class="vf-opsz-handle">
<div class="tip-text">optical size</div>
</div>
<div class="vf-opsz-line"></div>
</div>
<div class="controls--vf-slantness" @mousedown="controlVFSlantInitDrag"
@touchstart="controlVFSlantInitDrag">
<div class="vf-slantness-handle" :style="{left: slantnessControlStyles.left}">
<div class="tip-text">font slant</div>
</div>
<div class="vf-slantness-line" :style="{transform: slantnessControlStyles.skew}"></div>
</div>
<div class="controls--vf-width-x" @mousedown="controlVFWidthXInitDrag"
@touchstart="controlVFWidthXInitDrag">
<div class="vf-width-x-line"></div>
<div class="vf-width-x-handle">
<div class="tip-text">font width</div>
</div>
</div>
<div class="controls--vf-width-y" @mousedown="controlVFWidthYInitDrag"
@touchstart="controlVFWidthYInitDrag">
<div class="vf-width-y-line"></div>
<div class="vf-width-y-handle">
<div class="tip-text">font width</div>
</div>
</div>
<div class="controls--vf-width"
@mousedown="controlVFWidthInitDrag"
@touchstart="controlVFWidthInitDrag">
<div class="vf-width-line"></div>
<div class="vf-width-handle">
<div class="tip-text">font width</div>
</div>
</div>
<div class="controls--size">
<div class="handle top left"></div>
<div class="handle top center"></div>
<div class="handle top right"></div>
<div class="handle middle left"></div>
<div class="handle middle right"></div>
<div class="handle bottom left"></div>
<div class="handle bottom center"></div>
<div class="handle bottom right"></div>
</div>
<div class="controls--area-size">
<div class="square-handle area-size-top-left-handle top left"
@mousedown="controlAreaSizeInitDrag($event,[-1,-1])"
@touchstart="controlAreaSizeInitDrag($event,[-1,-1])"></div>
<div class="square-handle area-size-top-right-handle top right"
@mousedown="controlAreaSizeInitDrag($event,[1,-1])"
@touchstart="controlAreaSizeInitDrag($event,[1,-1])"></div>
<div class="square-handle area-size-bottom-left-handle bottom left"
@mousedown="controlAreaSizeInitDrag($event,[-1,1])"
@touchstart="controlAreaSizeInitDrag($event,[-1,1])"></div>
<div class="square-handle area-size-bottom-right-handle bottom right"
@mousedown="controlAreaSizeInitDrag($event,[1,1])"
@touchstart="controlAreaSizeInitDrag($event,[1,1])"></div>
</div>
<div class="controls--font-size" @mousedown="controlFontSizeInitDrag" @touchstart="controlFontSizeInitDrag">
<div class="round-handle font-size-handle">
<div class="tip-text">font size</div>
</div>
</div>
<div class="controls--contrast">
<div class="contrast-value">2.0</div>
<div class="contrast-bracket"></div>
</div>
<div class="text":class="{ 'select-disabled': !states.isEditable, 'select-enabled': states.isEditable }" :contenteditable="states.isEditable" :style="textStyles"
@blur="deactivateStates"
@input="updateContent"
@keydown="captureKeydown">
<div class="controls--vf-xheight" contenteditable=false>
<div class="vf-xheight-line" :style="{top: xHeightControlStyles.xHeightTop}" @mousedown="controlVFxHeightInitDrag"
@touchstart="controlVFxHeightInitDrag">
<div class="tip-text">x height</div>
</div>
<div class="vf-base-line" :style="{top: xHeightControlStyles.baselineTop}"></div>
</div>
<div class="text-span":contenteditable="states.isEditable"></div>
</div>
</div>
</script>
<point-type-frame
:id="canvasObject.id"
:cobject="canvasObject"
v-for="canvasObject in canvasObjects"
@change="handleCanvasObjectChange"
@click.native.stop="selectCanvasObject(canvasObject)"
@touchstart.native.stop="selectCanvasObject(canvasObject)"
@update="canvasObject.properties.text = $event"></point-type-frame>
<!-- <pre>{{canvasObjects}}</pre> -->
<!-- <pre>{{allFontFacesDebugOnly}}</pre> -->
</div>
<div class="panel">
<div class="section section-font-size">
<div class="slider slider-font-size">
<label for="range-input" class="label-text">Font Size</label>
<input type="text" class="value-text" v-model="fontSize" @input="handleFontSizeChange" @keydown="captureKeydown">
<input type="range" min="1" max="400" step="1" v-model="fontSize" @input="handleFontSizeChange">
</div>
</div>
<div class="section section-preset-variations" v-if="activeFont.variableOptions.instances.length > 0">
<h4 class="subtitle-text">PRESET VARIATIONS</h4>
<div class="variations">
<div class="variation-card value-text" :class="{ active: instance.isActive }" v-for="instance in activeFont.variableOptions.instances" @click="activateInstance(instance)">
{{instance.name}}
<span class="specimen" v-bind:style="instanceStyles(instance)">Ag</span>
</div>
</div>
</div>
<div class="section section-variable-options">
<h4 class="subtitle-text">VARIABLE OPTIONS</h4>
<script type="text/x-template" id="slider-2d-template">
<div class="slider-2d" @mousedown="initDrag" @touchstart="initDrag">
<div class="handle" :style="{left: left + 'px', top: top + 'px'}">
<div class="axis-x-line"></div>
<div class="axis-y-line"></div>
</div>
</div>
</script>
<slider-2d v-if="isSlider2dActive" :axes="selectedAxes" v-model="selectedAxes" @input="handleActiveFontChange"></slider-2d>
<div class="sliders">
<div class="slider" v-for="axis in activeFont.variableOptions.axes" :class="{selected: axis.isSelected}">
<span v-if="isSlider2dActive" class="radio-button" @click="activateAxis(axis)"></span>
<label for="range-input" class="label-text">{{axis.name}}</label>
<input type="text" class="value-text" v-model="axis.defaultValue" @input="handleActiveFontChange" @keydown="captureKeydown">
<input type="range" :min="axis.minValue" :max="axis.maxValue" step="0.01" v-model="axis.defaultValue" @input="handleActiveFontChange">
</div>
</div>
</div>
<div class="section section-code">
<h4 class="subtitle-text">CSS</h4>
<code id="code" class="select-enabled">
<span>{{cssFontFaces}}</span>
<span class="css-for-canvas-object"
:class="{highlight: canvasObject.isSelected}"
v-for="canvasObject in canvasObjects"
@click="handleCSSCanvasObjectClick(canvasObject)"
@mouseover="highLightCanvasObject(canvasObject)"
@mouseleave="unHighLightCanvasObject(canvasObject)"
>{{generateCSSForCanvasObject(canvasObject)}}</span>
</code>
</div>
<div class="section section-export">
<form id="form-export" action="https://codepen.io/pen/define" method="POST" target="_blank">
<input type="hidden" name="data" :value='codepenJSON'>
<button class="button button-export" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><title>export</title><path d="M15.5,11h-1a.5.5,0,0,0-.5.5V14H4V11.5a.5.5,0,0,0-.5-.5h-1a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,15.5,11Z"/><path d="M7,11.5a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5V7h3L9,2,4,7H7Z"/></svg>
</button>
</form>
<div class="button label-text button-copy-selected" v-if="selectedCanvasObjects.length > 0">Copy Selected</div>
<div class="button label-text button-copy-all">Copy All</div>
</div>
</div>
<div class="about select-enabled">
<h1>About Font Playground</h1>
<p>Font Playground is built for three groups of audiences.</p>
<p>The first group of audience is typographers and designers, who would like to play with fonts that are built with the latest font technologies, such as variable font. It is a playground to fully explore what these new font technologies can offer and how they can be beneficial to your creative workflow.</p>
<p>The second group of audience is me, as a Type Tool’s UI/UX designer. This is a playground for me to test UI experiments for variable fonts and other new upcoming font technologies. One of the key points to the success of new font technology is adoption by design tools, and furthermore, designers. How can design tool present variable fonts in a way that is useful but not too complicated to handle? I hope to find the answers with this playground.</p>
<p>The third group of audience is the type designers and foundries. This is a place to showcase the work-in-progress, cutting-edge font creations. It is a playground to see how fonts are being presented and used in future design tools. How fonts are used can also inform how fonts are made, and what standard should be defined.</p>
<h1>Credits</h1>
<p>Font Playground is an ongoing personal project of <a href="https://twitter.com/DesignJokes" target="_blank">Wenting Zhang</a> and Hua Shu, inspired by Nick Sherman’s <a href="https://v-fonts.com/" target="_blank">v-fonts.com</a>, Laurence Penney’s <a href="https://www.axis-praxis.org/" target="_blank">axis-praxis.org</a>, and Andrew Johnson's <a href="http://alistapart.com/article/user-interfaces-for-variable-fonts" target="_blank">article about User Interfaces for Variable Fonts</a>.</p>
<p>Many thanks to the tool makers of <a href="https://wakamaifondue.com/" target="_blank">wakamaifondue.com</a>, <a href="https://github.com/Monotype/variableFont.js" target="_blank">variableFont.js</a>, and <a href="https://vuejs.org/" target="_blank">vue.js</a>. Font Playground would not be developed as easily (or at all) without the generosity of them who shared their genius work with the world.</p>
<p>I would like to thanks type designers who are generous to grant me licenses to their commercial fonts, <a href="https://djr.com/" target="_blank">David Jonathan Ross</a>, <a href="http://cjtype.com/" target="_blank">CJ Dunn</a>, <a href="http://www.ohnotype.co/" target="_blank">James T. Edmondson</a>, and type designers and foundries who are generous to grant free usage or even open source their fonts. Only with such generosity, our community can have so many variable fonts to play with and to learn from. </p>
<h1>Contact</h1>
<ul>
<li>Github: <a href="https://github.com/wentin/font-playground" target="_blank">https://github.com/wentin/font-playground</li></a>
<li>Newsletter: <a href="http://eepurl.com/dCxipf" target="_blank">subscribe to it</li></a>
</ul>
<p>
If you have any feedback or suggestions, chat with me on twitter or email me.
If you find issues on Font Playground, please file an issue report on <a href="https://github.com/wentin/font-playground/issues" target="_blank">Github</a>, or contact me via Email.</p>
<p>
Font playground is actively looking to add more variable fonts to its font menu. If you could share your fonts with Font Playground, I thank your generosity in advance, and please get in touch with me via Email.
</p>
</div>
</div>
<!-- <script src="http://localhost:35729/livereload.js"></script> -->
<script src="js/clipboard.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>