-
Notifications
You must be signed in to change notification settings - Fork 0
/
howitworks.html
341 lines (332 loc) · 14.1 KB
/
howitworks.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>How Cerne Emulates a Handwritten Script</title>
<link rel="stylesheet" href="./webfiles/cerne.css"/>
<style>
p, h2, ul {
padding-left: 10%;
padding-right: 10%;
font-feature-settings: "pnum", "onum";
}
p, ul { font-size: 1.75em; }
h2 { font-size: 1.95em; }
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 75%;
max-height: 75vh;
margin: auto;
}
.center-fit-small {
max-width: 40%;
max-height: 40vh;
margin: auto;
}
.center-fit-tiny {
max-width: 25%;
max-height: 25vh;
margin: auto;
}
.colorvar {
font-feature-settings: "ss02" on;
}
ul { list-style-position: outside;}
li {
font-family: JuniusX;
/* font-size: 1.5em; */
line-height: 60px;
}
ul li:nth-child(1){
background: url("./images/litteris-01.jpg") no-repeat left top;
background-size: 120px 60px;
padding: 3px 0px 3px 140px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
ul li:nth-child(2){
background: url("./images/litteris-02.jpg") no-repeat left top;
background-size: 120px 60px;
padding: 3px 0px 3px 140px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
ul li:nth-child(3){
background: url("./images/litteris-03.jpg") no-repeat left top;
background-size: 120px 60px;
padding: 3px 0px 3px 140px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
ul li:nth-child(4){
background: url("./images/litteris-04.jpg") no-repeat left top;
background-size: 120px 60px;
padding: 3px 0px 3px 140px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
ul li:nth-child(5){
background: url("./images/litteris-05.jpg") no-repeat left top;
background-size: 120px 60px;
padding: 3px 0px 3px 140px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
</style>
</head>
<body lang="en">
<div class="headerbox">
<h1>How Cerne Emulates a <span class="colorvar">Handwritten</span> Script</h1>
</div>
<h2>1. Emulating cursive</h2>
<p>
The Cerne font owes the greatest part of its distinctive look to its letterforms—but there’s
much more to it than that. The scribe of the Book of
Cerne wrote a cursive script, though one that leaned towards the formal:
many of its letters are joined, as you can see by
glancing at this brief extract from Book IV of Bede’s <i>Ecclesiastical
History</i> (in the font’s historical mode):
</p>
<div class="imgbox">
<img class="center-fit" src="./images/Bede-sample-2.jpg"/>
</div>
<p>
But you can’t make a cursive script by simply making letters bump against
each other; the result of that would be a mess. For two letters to join,
the shape of one or both must be adjusted. Consider, for example, the word <b>litteris</b>
from line eight of our Bede extract. In the illustration below, the version of
the word on the left uses only the Cerne font’s default letterforms,
while the version on the right lets the font’s cursive flag fly:
</p>
<div class="imgbox">
<img class="center-fit-small" src="./images/litteris.jpg"/>
</div>
<p>
Of the eight letters of <b>litteris</b>, four (two on each end:
<b>li</b> and <b>is</b>) match the
default forms while the other four do not: these make a ligature
(<b>tter</b>) in the middle of the
word. In fact, the leftmost <b>t</b> joins with the unaltered <b>i</b> to
make it a five-letter ligature.
</p>
<p>
By ‘ligature’ we mean a sequence of letters that are (1) joined, and
(2) altered in shape so as to make the join between letters look
right. Most fonts for western languages handle ligatures by grouping connected
letters into a single ‘glyph’—a unit of type that corresponds roughly to
individual pieces of metal type in pre-digital printing. Early
typefounders used to group
several letters on a single piece of type when the letters touched or
overlapped, as is the case with the standard f-ligatures in the JuniusX
font:
</p>
<div class="imgbox">
<img class="center-fit-tiny" src="./images/juniusxligs.jpg"/>
</div>
<p>
For JuniusX (and many other fonts, both metal and digital, since the time
of Gutenberg), the designer <b>anticipated all the ligatures that the
font needed and designed each one as a unit</b>. This doesn't work for Cerne,
and a moment’s thought will explain why. Scribes writing out texts by hand
have no need to confine themselves to a fixed number of predefined
ligatures; rather, they apply rules for joining letters that allow for a
nearly infinite number of ligatures of arbitrary length. It is impossible
for a font designer to anticipate all the ligatures that might be needed
for a font like Cerne,
and if it were possible, doing so would make the font impossibly large.
</p>
<p>
How, then, does Cerne form its ligatures? The technology that accomplishes
this task is related to that used to handle scripts
far more complex than the Latin script used for most western languages.
Of these the best known is
<a href="https://en.wikipedia.org/wiki/Arabic_script_in_Unicode">Arabic</a>,
which among other complications requires that many letters vary their
form in order to join or harmonize with surrounding letters. Fonts for these
scripts work in part by substituting variant letterforms for the defaults.
These variants are called <b>Contextual Alternates</b>.
</p>
<p>
To form the word <b>litteris</b>, a program called a ‘shaping engine’,
a piece of the machinery for displaying text on your screen, begins
with the word <b>litteris</b> as it appears on the left in the
illustration above, and applies
to it rules that are written into the font, substituting characters one
by one or in pairs, until it produces the final shape:
</p>
<ul>
<li>Text before shaping.</li>
<li>
Adjacent <b>t</b>’s altered to join cleanly.
</li>
<li>
Adjacent <b>e</b> and <b>insular r</b> altered.
</li>
<li>
<b>t</b> altered when preceded by <b>i</b>.
</li>
<li>
<b>t</b> altered when followed by <b>high e</b>.
</li>
</ul>
<p>
The process looks involved, but the shaping engine handles it speedily
and invisibly, so that the
reader is (ideally) completely unaware of it. And from the font
maker’s point of view, designing a few variant shapes of <b>t</b>,
<b>e</b>, and <b>r</b> and writing the rules that make all this magic
happen is far less work than designing perhaps dozens of ligatures
involving those letters—and thousands more to take account of the other
letters of the alphabet.
</p>
<p>
The result is a compact font that can be quickly downloaded with a
web page and yet contains within it the thousands of ligatures needed
to approximate the look of a hand-written medieval script.
</p>
<h2>2. Varying letterforms</h2>
<p>
In any script produced by hand, letterforms are highly variable. This
variability contributes greatly to the beauty of handwriting.
Some variability
is a natural byproduct of the fact that a scribe is not a machine, while
some is the result of scribal habit or whim.
</p>
<p>
A computer, of course, <i>is</i> a machine, and it is incapable of whimsy, so
reproducing the variability of handwriting is difficult, to say the least.
But a computer can give the <i>impression</i> of variability. It can
employ pseudo-random algorithms, for example, to vary letterforms (my
<a href="https://github.com/psb1558/Joscelyn-font">Joscelyn</a> font uses
this approach for the various shapes of the letter <b>h</b>). The Cerne
font may at some point employ a system like this, but for now it takes
two approaches.
</p>
<p>
The first approach is to give users the ability to choose variant letterforms
themselves. The second is to vary letterforms automatically.
For example, consider these two versions of the word
<b>passuum</b> (in historical mode):
</p>
<div class="imgbox">
<img class="center-fit-small" src="./images/passuum.jpg"/>
</div>
<p>
The most obvious difference between the two words is that the one on
the right uses a ligature for the doubled insular <b>s</b> while the
one on the left does not. Both are consistent with the usage of the
Cerne scribe, whose rule for producing this ligature seems to have been
(admittedly oversimplifying a bit) “whenever I feel like it.” The Cerne
font does not attempt to reproduce the scribe’s whimsy, but instead
includes the ligature in the <b>dlig</b> (Discretionary Ligatures) feature. Users can turn
this feature on for words with doubled <b>s</b> when they want to—when
whimsy strikes. Another way to produce variant letterforms is with
the features
<b>ss04</b> (Stylistic Set 4, “Word-final forms”), which has no effect
except at the ends of words, and
<b>ss05</b> (Stylistic Set 5, “Miscellaneous alternates”). The
number of alternates available via these methods is small but growing
(as of version 0.010).
</p>
<p>
But if you look more carefully at the word on the left, you may notice
that the two instances of <b>s</b> and the two instances of <b>u</b>
are different from each other. The differences are subtle, since this
scribe’s work is remarkably uniform, and
extreme variations can be distracting. Most readers won’t notice
the differences, but this feature still supports a general impression of
handwritten variability.
</p>
<p>
Doubled letters vary automatically in Cerne via the <b>calt</b> (Contextual
Alternates) feature, which is on by default in every major application
except for Microsoft Word, where it must be turned on explicitly.
</p>
<h2>3. Inside a Color Font</h2>
<p>
You know, of course, that a conventional font can be rendered in any
color: color text is all over the web, and
it’s frequently used for titles and running heads in printed books. A
color font is different from a conventional font in that the colors
in which text is rendered are chosen by the font designer, not by the
font’s user. Further, while a glyph in a conventional font must be either
one color or another, a glyph in a color font can
have any number of colors and combine them in any number of ways.
The Cerne font has five colors:
</p>
<div class="imgbox">
<img class="center-fit-tiny" src="./images/Cerne-colors.jpg"
alt="Colors of the Cerne font"/>
</div>
<p>
These are based on colors found in the Book of Cerne, but to compensate
for some fading over the centuries, and the
darkening of the parchment, the last four of them,
used for decoration, have been adjusted with reference to the likely
pigments used at the time: red lead, orpiment,
verdigris, and woad (see Michelle P. Brown, <i>The Book of Cerne</i>
(London and Toronto, 1996), pp. 70–73). The saturation of these colors has
been reduced, and sometimes the brightness increased,
so as to increase contrast with the text color.
</p>
<p>
Inside the font, each character consists of at least two <b>layers</b>, and
often more—a layer being like a character (or glyph), but meant to be
combined with other layers. Each layer is rendered in one of the font’s
five colors. For an illustration, let’s look at the
letter <b>M</b>,
which has two fill colors (the background, by the way, is copied from
images of the book itself, but lightened by about 50%):
</p>
<div class="imgbox">
<img class="center-fit-tiny" src="./images/M-sample.jpg"/>
</div>
<p>
The font contains four layers for this glyph. The first is a <b>fallback
layer</b>. It’s there to guarantee that the font will be usable by
applications that know nothing about color fonts. This layer has no
color, and it is ignored by applications that recognize color fonts.
</p>
<p>
The second layer contains whatever is in the text color—a dark reddish brown.
</p>
<p>
The third layer contains whatever is in red.
</p>
<p>
The fourth layer contains whatever is in blue.
</p>
<div class="imgbox">
<img class="center-fit-small" src="./images/M-layers.jpg"/>
</div>
<p>
The application that displays color text renders the three color layers
one by one, aligning them exactly. If you’re
thinking that this is an inefficient way of going about things, you
may be right—but modern font technology is highly optimized with respect
to both speed and file size: the web version of Cerne
is tiny, and if modern displays render a color font
more slowly than a conventional one, the difference is not noticeable.
</p>
<p>
Beyond this, the details are arcane. There are several competing formats
for color fonts. The two most widely used are the COLR format, developed
by Microsoft, and the SVG format, supported by Adobe applications, among
others. The desktop version of Cerne packages both of these formats in a
single file. The
web version uses only the COLR format, since all major browsers
recognize that. The web version including only a single format has the
advantage of keeping the file small: with a moderately fast internet
connection it can be downloaded almost instantly.
</p>
</bod0y>
</html>