-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
282 lines (280 loc) · 12.1 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Elstob variable font specimen page</title>
<link rel="stylesheet" href="./webfiles/jquery-ui.css"/>
<link rel="stylesheet" href="./webfiles/Elstob-demo.css"/>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CT1J49SQMN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CT1J49SQMN');
</script>
</head>
<body lang="en">
<div id="topbox">
<h1><span class="bigtitle">Elstob</span> a variable font for
medievalists</h1>
</div>
<div id="headerbox" class="paragroup">
<p>
The Elstob font aims to include all Unicode characters commonly
used by medievalists. It is a variable font—that is, one that can
do the work of a number of conventional fonts by varying different
aspects of the characters’ shapes. Variable fonts are especially
appropriate for use on the web, since a single file can do the
work of multiple conventional fonts, with significant speed gains. All the
major browsers now support variable fonts: if this page doesn’t
work for you, consider updating your browser.
</p>
<p>
To get a sense of what Elstob can
do, play with the sliders and checkboxes below, and (if you don’t
know much about variable fonts) check out the
notes on the font’s axes at the bottom of this page. The
sample paragraph to the right of the control panel is editable: type or paste in a bit of your
favorite text to see what it looks like in Elstob.
</p>
<p>
For a list of all characters and all features, see the document
“Features and Charset.pdf” <a href="https://github.com/psb1558/Elstob-font">in the repository</a>.
</p>
</div>
<div class="row">
<div class="controlbox">
<div class="selectbox overflow">
<label for="rompresets">Instances:</label><br/>
<select id="rompresets">
<option value="Reg" selected="selected">Regular</option>
<option value="Reg6pt">6pt (Fine Print)</option>
<option value="Reg8pt">8pt (Footnote)</option>
<option value="Reg10pt">10pt (Block Quote)</option>
<option value="Reg14pt">14pt (Subhead)</option>
<option value="Reg18pt">18pt (Display)</option>
<option value="ExtraLight">ExtraLight</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="SemiBold">SemiBold</option>
<option value="Bold">Bold</option>
<option value="Bold6pt">6pt Bold</option>
<option value="Bold8pt">8pt Bold</option>
<option value="Bold10pt">10pt Bold</option>
<option value="Bold14pt">14pt Bold</option>
<option value="Bold18pt">18pt Bold</option>
<option value="ExtraBold">ExtraBold</option>
</select><br/>
<label for="languages">Languages:</label><br/>
<select id="languages">
<option value="ModEnglish" selected="selected">Modern English</option>
<option value="eModEnglish">Early Modern English</option>
<option value="OldEnglish">Old English</option>
<option value="MiddleEnglish">Middle English</option>
<option value="Latin">Latin</option>
<option value="Greek">Greek</option>
<option value="Gothic">Gothic</option>
<option value="OldIcelandic">Old Icelandic</option>
<option value="OldSaxon">Old Saxon</option>
<option value="German">Early New High German</option>
</select>
</div>
<div class="slidecontainer" id="romsliders">
<div class="sliderlabel">Size: <span id="romsizetext">1.5em</span></div>
<div id="romsize" class="myslider"></div>
<div class="sliderlabel">Weight: <span id="romwghttext">400</span></div>
<div id="romweight" class="myslider"></div>
<div class="sliderlabel">Optical Size: <span id="romopsztext">10</span></div>
<div id="romopticalsize" class="myslider"></div>
<div class="sliderlabel">Grade: <span id="romGRADtext">0</span></div>
<div id="romgrade" class="myslider"></div>
<div class="sliderlabel">Spacing: <span id="romspacingtext">0</span></div>
<div id="romspacing" class="myslider"></div>
<div id="romslntlabel" class="sliderlabel">Slant: <span id="romslnttext">8</span></div>
<div id="romslnt" class="myslider"></div>
</div>
<div class="featurebox" id="rfb">
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romital"/>
<label for="romital">Italic</label>
</span>
<!--
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romcalt" checked="checked"/>
<label for="romcalt">Contextual alternates</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romliga" checked="checked"/>
<label for="romliga">Standard ligatures</label>
</span>
-->
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romdlig"/>
<label for="romdlig">Discretionary ligatures</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romsmcp"/>
<label for="romsmcp">Small caps</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romc2sc"/>
<label for="romc2sc">Caps 2 small caps</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="rompnum"/>
<label for="rompnum">Proportional figures</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romonum"/>
<label for="romonum">Old-style figures</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romzero"/>
<label for="romzero">Slashed zero</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss02"/>
<label for="romss02">Insular letter-shapes</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss01"/>
<label for="romss01">Alternate þ and ð</label>
</span>
<!-- <span class="bbx">
<input type="checkbox" class="featurebutton" id="romss05"/>
<label for="romss05">English þ and ð</label>
</span> -->
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romcv382"/>
<label for="romcv382">Long s</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss08"/>
<label for="romss08">Contextual long s</label>
</span>
<span class="bbx" id="aespan">
<input type="checkbox" class="featurebutton" id="romcv57"/>
<label for="romcv57">Alternate æ</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romcv362"/>
<label for="romcv362">r rotunda</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss16"/>
<label for="romss16">Contextual r rotunda</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romcv691"/>
<label for="romcv691">Alt Tironian sign (1)</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romcv692"/>
<label for="romcv692">Alt Tironian sign (2)</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romcv181"/>
<label for="romcv181">Dotless i</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss12"/>
<label for="romss12">Early English futhorc</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss13"/>
<label for="romss13">Elder futhark</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss14"/>
<label for="romss14">Younger futhark</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss15"/>
<label for="romss15">Long Branch 2 Short Twig</label>
</span>
<span class="bbx">
<input type="checkbox" class="featurebutton" id="romss18"/>
<label for="romss18">Old-style punctuation spacing</label>
</span>
</div>
</div>
<p contenteditable="true" id="romtextarea" class="samplebox">
</p>
</div>
<!-- <div id="errmsg">nothing</div> -->
<div id="underbox" class="paragroup">
<h2>Notes on the Variable Axes</h2>
<p>
An <em>axis</em> is an aspect of a font that can be varied
along a numerical range. A web designer can either choose some
combination of axes for static text or vary the axes
dynamically (for example, changing the weight of a stretch of
type in response to some kind of user action). Each of
Elstob’s two faces has three axes:<b>Weight</b>, <b>Optical
Size</b>, and <b>Grade</b>. The italic face has a fourth axis:
<b>Slant</b>.
</p>
<p>
<b>Weight</b> varies the heaviness of the font along a
numerical axis from 200 to 800, where 200 is <span
class="extralight">“Extra Light”</span> and 800 is <span
class="extrabold">“Extra Bold.”</span> There are several
standard weights between these extremes:
<span class="light">“Light”</span> 300, “Regular” 400, <span
class="medium">“Medium”</span> 500, <span
class="semibold">“Semibold”</span> 600, <span
class="bold">“Bold”</span> 700. However, there are 601
possible values for Weight (not counting fractional values,
which are allowed but not useful for this axis).
</p>
<p>
<b>Optical Size</b> optimizes the type for display at different
sizes by varying the x-height, the contrast, and the width of thin
strokes. The numbers on the Optical Size axis (6–18) correspond roughly to
recommended point sizes: <span
class="fineprint">“6pt”</span> (for fine print);
<span class="footnote">“8pt”</span> (footnotes and indexes), <span
class="blockquote">“10pt”</span> (block quotes and appendices),
<b>“Regular”</b> (main text), <span
class="subhead">“14pt”</span> (subheads), <span
class="display">“18pt”</span> (display text, 18 points or larger).
However, there’s nothing to prevent your using any Optical
Size you like at any actual point size, if you like the look of it.
</p>
<p>
<b>Grade</b> is like Weight in that it varies the heaviness of
the letters; but it does so without changing their width. Use
Grade when you want to change the weight of a stretch of text
dynamically <span class="hoverable">(for example, on
mouseover)</span> without annoying your readers by forcing the
text to reflow. You can also combine Grade with Weight to make
<span class="heavy">weights beyond Extra Bold</span>, but if you take it to extremes, you may
lose the counters in some letters and the space between. It is
suggested that you set Grade to no more than 0.4 when Weight
is 800.
The range of allowable numbers on this axis is 0-1.
</p>
<p>
<b>Spacing</b> is for adjusting the space between words, and before and
after marks of punctuation. It runs 0–1, where 0 produces spacing like that
of other modern fonts, and 1 produces spacing typical of the era of metal
type, especially the nineteenth century and earlier. Turn on the OpenType feature <b>ss18</b>
“Old-style punctuation spacing” when you set this axis to a value greater than
0: this applies the logic that governs spacing between sentences and around
punctuation, which is different from spacing between words.
</p>
<p>
<b>Slant</b> changes the angle of the italic face along a range
that runs 0–15, where 0 produces an old-style angle of about nineteen
degrees (matching the model for this font), and 15 produces a nearly
upright angle of about two degrees. The default value for the
italics on this page is 8.
</p>
</div>
<script src="./webfiles/jquery.js"></script>
<script src="./webfiles/jquery-ui.js"></script>
<script src="./webfiles/Elstob-demo.js" type="text/javascript"></script>
</body>
</html>