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
|
<!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>The Enlarge Axis</title>
<!-- <link rel="stylesheet" href="./webfiles/junius.css"/>
<link rel="stylesheet" href="./webfiles/balloon-new.css"/> -->
<style>
@font-face {
font-family: "JuniusVF";
src: url("./webfiles/JuniusVF.woff2");
font-weight: 300 700;
font-stretch: 75% 125%;
}
body {
margin-left: 10%;
margin-right: 10%;
}
h1 {
font: 36px "JuniusVF";
font-variation-settings: "wght" 400, "wdth" 112, "ENLA" 0.25;
}
p {
font: 28px "JuniusVF";
font-variation-settings: "wght" 400, "wdth" 100, "ENLA" 0;
}
b {
font-variation-settings: "wght" 700, "wdth" 100, "ENLA" 0;
}
/* pre {
font-size: 85%;
} */
#text {
border-style: solid; border-width: 2px; padding: 20px;
}
.light {
font-variation-settings: "wght" 300, "wdth" 100, "ENLA" 0;
}
.halfway {
font-variation-settings: "wght" 450, "wdth" 100, "ENLA" 0;
}
.medium {
font-variation-settings: "wght" 500, "wdth" 100, "ENLA" 0;
}
.semibold {
font-variation-settings: "wght" 600, "wdth" 100, "ENLA" 0;
}
.expanded {
font-variation-settings: "wght" 400, "wdth" 125, "ENLA" 0;
}
.a {
font-variation-settings: "wght" 400, "wdth" 100, "ENLA" 1;
}
.enl {
font-variation-settings: "wght" 400, "wdth" 100, "ENLA" 1;
color: #9b1617;
}
.athird {
font-variation-settings: "wght" 400, "wdth" 100, "ENLA" 0.33;
}
.atwothirds {
font-variation-settings: "wght" 400, "wdth" 100, "ENLA" 0.66;
}
.avariant {
font-feature-settings: "cv01" 2;
}
.labeldiv {
width: 45%;
display: inline-block;
}
label {
z-index: 2;
position: absolute;
pointer-events: none;
width: 100%;
height: 2em;
margin: 0;
padding: 1em;
vertical-align: text-top;
font: x-small sans-serif;
color: 000;
opacity: 0.5;
}
.slider {
z-index: 1;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 2em;
border-radius: 5px;
background: #eee;
padding: 0px;
margin: 5px;
}
.slider::-webkit-slider-thumb {
z-index: 3;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 2em;
border-radius: 5px;
background: #777;
cursor: auto;
}
</style>
<script>
var lbls= {
"fontsize": "Font Size",
"lineheight": "Line Height",
"wght": "Weight",
"wdth": "Width",
"ENLA": "Enlarge"
}
// These functions are based on the "Variable Font Test" HTML
// page generated by Glyphs.
function updateSlider() {
var body = document.getElementById("text");
var sliders = document.getElementsByClassName("slider");
var bodystyle = "";
var settingtext = "";
for (var i = 0; i < sliders.length; i++) {
var sliderID = sliders[i].id;
var sliderValue = sliders[i].value;
var label = document.getElementById("label_"+sliderID);
label.textContent = "" + lbls[sliderID] + ": " + sliderValue
if (sliderID == "fontsize") {
// Text Size Slider
bodystyle += "font-size: "+sliderValue+"px;"
label.textContent += "px"
} else if (sliderID == "lineheight") {
// Line Height Slider
bodystyle += "line-height: "+sliderValue/100.0+"em;"
label.textContent += "%"
} else {
// OTVar Slider
if (settingtext != "") { settingtext += ", " }
settingtext += '"' + sliderID + '" ' + sliderValue
}
}
bodystyle += "font-variation-settings: "+settingtext+";"
body.setAttribute("style", bodystyle);
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WDBM3BH6S3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WDBM3BH6S3');
</script>
</head>
<body lang="en" onload="updateSlider();">
<div class="headerbox">
<h1>The JunicodeVF Enlarge Axis</h1>
</div>
<p>
Beginning with version 1.010, JunicodeVF (the variable version of
Junicode) includes a new axis, <b>Enlarge</b>. This document explains what
it is and how to use it.
</p>
<p>
The character recommendation of the
<a href="https://skaldic.abdn.ac.uk/m.php?p=doc&i=953">Medieval
Unicode Font Initiative</a> (MUFI) includes a class of characters
called “Enlarged Minuscules,” for representing characters that
are lowercase in shape but intermediate between lowercase and
uppercase in size: these are often used
to begin sentences in medieval manuscripts. Various early Norse
texts in the <a href="https://www.menota.org/forside.xhtml">MENOTA</a>
archive use enlarged minuscules in this way. MUFI encodes these characters
in the Private Use Area, posing accessibility and searchability
problems, as explained in
<a href="Searchability.html">This document</a>.
</p>
<p>
Junicode provides a solution to these problems via Stylistic Set 6
(“Enlarged minuscules”). SS06 also works in JunicodeVF, which in addition
offers a far more flexible way of representing enlarged minuscules—namely,
the <b>Enlarge</b> axis.
</p>
<p>
An “axis” is an aspect of a font that
can be varied along a numerical range. A family of traditional fonts like
<a href="https://en.wikipedia.org/wiki/Times_New_Roman">Times New
Roman</a> has a <b>weight</b> axis with a font file on either end: Regular
and Bold. Other font families have more weights along this axis: for
example, Light, Medium, ExtraBold.
Most variable fonts also have a <b>weight</b> axis, but all weights are
contained in a single file, and users can select any weight between the
extremes. In JunicodeVF, for example:
</p>
<p style="padding-left: 1em;">
<span class="light">Light</span><br/>
Regular<br/>
<span class="halfway">An arbitrary weight between Regular and Medium</span><br/>
<span class="medium">Medium</span><br/>
<span class="semibold">SemiBold</span><br/>
<b>Bold</b><br/>
</p>
<p>
JunicodeVF has two axes defined by the OpenType standard:
<b>weight</b> and <b>width</b>. You can see how these function on the
<a href="https://psb1558.github.io/Junicode-New/">specimen
page</a>, where you can select a weight from Light to Bold and
a width from Compressed to Regular (but <span class="expanded">expanded</span>
widths are available
as well). <b>Enlarge</b>, on the other hand, is
a <i>custom axis</i>: it is
not defined in the OpenType standard, but is consistent with and
allowed by the standard.
</p>
<p>
The <b>Enlarge</b> axis affects only lowercase letters. When you vary
text along this axis, the overall height of lowercase characters remains
constant: the letter <b>b</b> is always the same height. But the width
of the character changes, and so does the <b>x-height</b>—that is, the height
of the letter <b>x</b>, or of the bowl of the letter <b>b</b>. This axis
combines easily with the <b>width</b> and <b>weight</b> axes
so that you can select
any combination of values, as you can demonstrate to yourself by playing
with these sliders, which control the text in the editable box below.
</p>
<div>
<div class="labeldiv"><label class="sliderlabel" id="label_fontsize" for="fontsize">Font Size</label><input type="range" min="10" max="150" value="28" class="slider" id="fontsize" oninput="updateSlider();"></div>
<div class="labeldiv"><label class="sliderlabel" id="label_lineheight" for="lineheight">Line Height</label><input type="range" min="30" max="300" value="150" class="slider" id="lineheight" oninput="updateSlider();"></div>
<div class='labeldiv'><label class='sliderlabel' id='label_wght' for="wght">Weight</label><input type='range' min='300' max='700' value='400' class='slider' id='wght' oninput='updateSlider();'></div>
<div class='labeldiv'><label class='sliderlabel' id='label_wdth' for="wdth">Width</label><input type='range' min=75 max='125' value='100' class='slider' id='wdth' oninput='updateSlider();'></div>
<div class='labeldiv'><label class='sliderlabel' id='label_ENLA' for="ENLA">Enlarge</label><input type='range' min='0' max='1' step='0.01' value='0' class='slider' id='ENLA' oninput='updateSlider();'></div>
</div>
<p id="text" contenteditable="true">
Her Cynewulf benam Sigebryht his rices ond Westseaxna wiotan for unryhtum
dædum buton Hamtunscire, ond he hæfde þa oþ he ofslog þone aldormon þe
him lengest wunode, ond hiene þa Cynewulf on Andred adræfde, ond he þær
wunade oþ þæt hiene an swan ofstang æt Pryfetesflodan, ond he wræc þone
aldormon Cumbran. Ond se Cynewulf oft miclum gefeohtum feaht uuiþ
Bretwalum, ond ymb .xxxi. wintra þæs þe he rice hæfde, he wolde adræfan
anne æþeling se was Cyneheard haten, ond se Cyneheard wæs þæs Sigebryhtes
broþur.
</p>
<p>
The chief advantage of the <b>Enlarge</b> axis, as compared with the “Enlarged
Minuscules” Stylistic Set, is its flexibility. Because an <b>a</b>
affected by this axis is still simply an <b>a</b>, there are no accessibility
issues at all when using it. Further, all <b>a + diacritic</b>
combinations are equally affected by the axis: <span class="a">ā ä á</span>.
The same OpenType features that apply to <b>a</b> also apply to enlarged
<b>a</b>: for example, with cv01[2],
<span class="avariant">a<span class="a">a</span></span>.
</p>
<p>
Finally, since lowercase letters are continuously variable along the
<b>Enlarge</b> axis, you can scale your enlarged characters however you
want, making the effect subtle or obvious:
<span class="avariant">a <span class="athird">a</span>
<span class="atwothirds">a</span> <span class="a">a</span></span>.
</p>
<p>
To use the <b>Enlarge</b> axis in a web page, define a class, e.g.
</p>
<pre><code>.enl {
font-variation-settings: "wght" 400, "wdth" 100, "ENLA" 1;
color: #9b1617;
}</code></pre>
<p>
where <b>ENLA</b> is the tag for the <b>Enlarged</b> axis and <b>1</b>
is the upper end of the <b>Enlarge</b> scale (which runs 0–1). Add any
other features you want, e.g. a color; or enlarge the letter further.
Then apply the class (probably via the <span> element) to any
letter or stretch of text that should be enlarged:
</p>
<pre><code><span class="enl">u</span>re lau͛d iþe godspel</code></pre>
<p style="padding-left: 20px;">
<span class="enl">u</span>re lau͛d iþe godspel
</p>
<p>
At present the <b>Enlarge</b> axis affects only the characters enumerated
in the MUFI Enlarged Minuscules set (B.I.3) and a few others: it will
eventually affect all lowercase letters commonly used in medieval texts.
</p>
<p>
Word processors do not yet provide access to the axes of variable fonts,
but all major browsers should handle the <b>Enlarge</b> axis (and the
other axes of JunicodeVF) correctly. Adobe applications like InDesign,
Photoshop and Illustrator also work well with variable fonts.
</p>
<div style="clear: both; padding: 20px; background-color: lightgray">
<p>
Junicode/Junicode font copyright © 1998–2022 by Peter S. Baker.
</p>
<p>
<a href="https://github.com/psb1558/Junicode-New">Development site</a>
· <a href="https://psb1558.github.io/Junicode-New/">Specimen Page</a>
· <a href="https://psb1558.github.io/Junicode-New/Searchability.html">Junicode and Searchability</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>
</body>
</html>
|
