-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
230 lines (195 loc) · 8.97 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
<!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>Cerne font specimen page</title>
<link rel="stylesheet" href="./webfiles/cerne.css"/>
<link rel="stylesheet" href="./webfiles/balloon-new.css"/>
</head>
<body lang="en">
<div class="headerbox">
<h1>Cerne — A Ninth-Century Script Font</h1>
</div>
<p>
The Cerne font is based on the Book of Cerne, a
ninth-century prayerbook the main script of which is a beautiful
pointed insular minuscule, cursive in appearance and yet formal.
The font has two modes: modern (the default), in which letters likely
to confuse modern readers have been replaced with more familiar shapes,
and historic, which
approximates the look of the original script. It is a color font: the
script is reddish brown, capitals are filled by default with pale red,
yellow, green or blue, and lowercase letters, accents, and punctuation
can be filled as well (but by default are not).
</p>
<p>
The browsers I have tested all support color fonts: Firefox, Safari, Chrome,
Edge. If your browser is not displaying color, but rather plain black text,
try upgrading your browser to the latest version. If that fails, please
open an <a href="https://github.com/psb1558/Cerne-font">issue</a> at the
development site.
</p>
<p>
The box below is editable: play with English, Latin or Old English text
or enter (type or paste) your own. Have fun with the colors by checking the
various boxes.
</p>
<p>
The font is not yet complete: download
<a href="https://github.com/psb1558/Cerne-font">here</a>, and use at your own risk.
</p>
<div class="controlbox">
<div class="dropdown">
<label for="fontsizes">Choose a size: </label>
<select id="fontsizes" name="fontsizes">
<option value="2.5em">2.5em</option>
<option value="2.75em">2.75em</option>
<option value="3em" selected="selected">3em</option>
<option value="3.25em">3.25em</option>
<option value="3.5em">3.5em</option>
<option value="3.75em">3.75em</option>
<option value="4em">4em</option>
<option value="4.25em">4.25em</option>
<option value="4.5em">4.5em</option>
</select>
</div>
<div class="dropdown">
<label for="languages">Choose a language:</label>
<select id="languages" name="languages">
<option value="ModEnglish" selected="selected">Modern English</option>
<option value="OldEnglish">Old English</option>
<option value="Latin">Latin</option>
</select>
</div>
<div class="checkboxes">
<span class="check"><input type="checkbox" id="hist"
name="his"/><label for="hist" data-tooltip="Historic mode">
Historic mode</label>
</span>
<span class="check"><input type="checkbox" id="ss02"
name="ss02"/><label for="ss02" data-tooltip="Alternate colors for caps (ss02)">
Alternate colors for caps (ss02)</label>
</span>
<span class="check"><input type="checkbox" id="ss03"
name="ss03"/><label for="ss03" data-tooltip="No color for caps (ss03)">
No color for caps (ss03)</label>
</span>
<span class="check"><input type="checkbox" id="ss06"
name="ss06"/><label for="ss06" data-tooltip="User color (ss06)">
User color (ss06)</label>
</span>
<span class="colorpicker">
<input type="color" id="colorinput" value="#000000"/><label
for="colorinput"> User color</label>
</span>
<span class="check"><input type="checkbox" id="cv02" name="cv02"/><label
for="cv02" data-tooltip="a (cv02)"> a</label>
</span>
<span class="check"><input type="checkbox" id="cv57" name="cv57"/><label
for="cv57" data-tooltip="æ (cv57)"> æ</label>
</span>
<span class="check"><input type="checkbox" id="cv04" name="cv04"/><label
for="cv04" data-tooltip="b (cv04)"> b</label>
</span>
<span class="check"><input type="checkbox" id="cv06" name="cv06"/><label
for="cv06" data-tooltip="c (cv06)"> c</label>
</span>
<span class="check"><input type="checkbox" id="cv08" name="cv08"/><label
for="cv08" data-tooltip="d (cv08)"> d</label>
</span>
<span class="check"><input type="checkbox" id="cv10" name="cv10"/><label
for="cv10" data-tooltip="e (cv10)"> e</label>
</span>
<span class="check"><input type="checkbox" id="cv12" name="cv12"/><label
for="cv12" data-tooltip="f (cv12)"> f</label>
</span>
<span class="check"><input type="checkbox" id="cv14" name="cv14"/><label
for="cv14" data-tooltip="g (cv14)"> g</label>
</span>
<span class="check"><input type="checkbox" id="cv16" name="cv16"/><label
for="cv16" data-tooltip="h (cv16)"> h</label>
</span>
<span class="check"><input type="checkbox" id="cv18" name="cv18"/><label
for="cv18" data-tooltip="i (cv18)"> i</label>
</span>
<span class="check"><input type="checkbox" id="cv20" name="cv20"/><label
for="cv20" data-tooltip="j (cv20)"> j</label>
</span>
<span class="check"><input type="checkbox" id="cv22" name="cv22"/><label
for="cv22" data-tooltip="k (cv22)"> k</label>
</span>
<span class="check"><input type="checkbox" id="cv24" name="cv24"/><label
for="cv24" data-tooltip="l (cv24)"> l</label>
</span>
<span class="check"><input type="checkbox" id="cv26" name="cv26"/><label
for="cv26" data-tooltip="m (cv26)"> m</label>
</span>
<span class="check"><input type="checkbox" id="cv28" name="cv28"/><label
for="cv28" data-tooltip="n (cv28)"> n</label>
</span>
<span class="check"><input type="checkbox" id="cv30" name="cv30"/><label
for="cv30" data-tooltip="o (cv30)"> o</label>
</span>
<span class="check"><input type="checkbox" id="cv32" name="cv32"/><label
for="cv32" data-tooltip="p (cv32)"> p</label>
</span>
<span class="check"><input type="checkbox" id="cv34" name="cv34"/><label
for="cv34" data-tooltip="q (cv34)"> q</label>
</span>
<span class="check"><input type="checkbox" id="cv36" name="cv36"/><label
for="cv36" data-tooltip="r (cv36)"> r</label>
</span>
<span class="check"><input type="checkbox" id="cv38" name="cv38"/><label
for="cv38" data-tooltip="s (cv38)"> s</label>
</span>
<span class="check"><input type="checkbox" id="cv40" name="cv40"/><label
for="cv40" data-tooltip="t (cv40)"> t</label>
</span>
<span class="check"><input type="checkbox" id="cv42" name="cv42"/><label
for="cv42" data-tooltip="u (cv42)"> u</label>
</span>
<span class="check"><input type="checkbox" id="cv44" name="cv44"/><label
for="cv44" data-tooltip="v (cv44)"> v</label>
</span>
<span class="check"><input type="checkbox" id="cv46" name="cv46"/><label
for="cv46" data-tooltip="w (cv46)"> w</label>
</span>
<span class="check"><input type="checkbox" id="cv48" name="cv48"/><label
for="cv48" data-tooltip="x (cv48)"> x</label>
</span>
<span class="check"><input type="checkbox" id="cv50" name="cv50"/><label
for="cv50" data-tooltip="y (cv50)"> y</label>
</span>
<span class="check"><input type="checkbox" id="cv52" name="cv52"/><label
for="cv52" data-tooltip="z (cv52)"> z</label>
</span>
<span class="check"><input type="checkbox" id="cv69" name="cv69"/><label
for="cv69" data-tooltip="& (cv69)"> &</label>
</span>
<span class="check"><input type="checkbox" id="cv48" name="cv48"/><label
for="cv48" data-tooltip="accents (cv48)"> accents</label>
</span>
<span class="check"><input type="checkbox" id="cv79" name="cv79"/><label
for="cv79" data-tooltip="punctuation (cv79)"> punctuation (cv79)</label>
</span>
</div>
</div>
<div id="textbox" contenteditable="true">
</div>
<div style="clear: both; padding: 20px; background-color:
lightgray">
<p>
Cerne font copyright © 2021 by Peter S. Baker.
</p>
<p>
<a href="https://github.com/psb1558/Cerne-font">Development Site</a>
</p>
<p>
Licensed under the <a href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL">Open Font License, v. 1.1</a>.
</p>
</div>
<script src="./webfiles/jquery-3.5.0.min.js" type="text/javascript"></script>
<script src="./webfiles/Cerne.js" type="text/javascript"></script>
</body>
</html>