Searchable web pages with MUFI and JuniusX

JuniusX fully implements the recommendations of the Medieval Unicode Font Initiative (MUFI), which offers an encoding scheme for medieval texts based on Unicode, the worldwide standard for text exchange. You probably know that a computer text is a string of numbers, each representing a character: using Unicode, you employ a standard mapping of numbers to characters, ensuring that a text typed by your friend in Thailand and sent to you as an email attachment will look the same when it gets to you as it did when it left your friend’s computer. MUFI does a similar job for medieval characters. For example, if you need a Dutch libra sign, you won’t find it in Unicode; but MUFI has it at code point U+F1EA (), and it will be recognizable to anyone with a MUFI-compliant font (like JuniusX).

To work its magic, MUFI selects characters of interest to medievalists from the Unicode standard, and when a medieval character is missing from Unicode it assigns a code point from a block of numbers set aside for individuals and groups to use in any way they like: the Private Use Area. MUFI-compliant fonts like JuniusX must all agree on the mappings of code point to character defined by MUFI so that texts can be exchanged reliably.

For example, here is the beginning of a diplomatic text of the Old Norse Vǫluspá, copied and pasted from the Medieval Nordic Text Archive (because JuniusX Italic is not yet ready, the text is presented only in roman type):

Hlıoðſ bið ec allar kinꝺir meiri oc miɴi maugo
heimꝺalar uilðo at ec ualꝼꜹþr uel ꝼyr telia ꝼoꝛn
ſpioll ꝼíra þꜹ er ꝼremſt um man. Ec mán iǫtna
ar um boꝛna þ⸠ꜹ̣⸡a er ꝼoꝛꝺom mic ꝼǫꝺꝺa hoꝼꝺo. nio man ec heima
nío iviþi[vr] miot uið mran ꝼyr molꝺ neðan.

Looks great, right? And it will read the same way whether it’s set in JuniusX, Andron Scriptor, Cardo, or Palemonas MUFI. There’s just one problem—but it’s a significant one. To illustrate, look at the last word in the second line: ꝼoꝛn. That’s an insular f in the first position and an r rotunda in the third; but try searching this text for the word “forn” using your browser’s search function (Ctrl-F or Cmd-F). What happened? Your search skipped right over ꝼoꝛn in the medieval text and landed on “forn” in this paragraph. The fact that f and r are encoded differently in this text from the way they’re encoded in plain text means that this text can’t be searched the way most webpages can. (To be a little more precise, some browsers will find the f, but none of them will find the r).

This is not to criticise MENOTA, which has its own powerful search tools; but not every website is so ambitious and sophisticated—and sometimes a reader wants to do a quick and dirty search. Given that one of the principal advantages of an etext is searchability, is it possible to create a MUFI-compliant webpage, rich with medieval characters, that can easily be searched?

Turns out that it is both possible and easy to create such a page using JuniusX. We’ll take it in two steps. The first will be to create as plain an etext as we can get away with, and the second will be to style this text using CSS (“Cascading Style Sheets,” the standard for styling web pages) and the features of JuniusX.

For the text, we want to convert as many of those exotic characters as possible into their plain-text equivalents. Here’s my attempt:

Hlioðs bið ec allar kindir meiri oc mini maugo
heimdalar uilðo at ec ualfꜹþr uel fyr telia forn
spioll fíra þꜹ er fremst um man. Ec mán iǫtna
ar um borna þ⸠ꜹ̣⸡a er fordom mic fǫdda hofdo. nio man ec heima
nío iviþi[vr] miot uið mę́ran fyr mold neðan.

If “plain text” is what you can type on a typical keyboard, we haven’t quite made it: we still have the exotic character ꜹ, several accented characters, and the Icelandic thorn and eth, not to mention the strange brackets in line 4 (U+2DE20 and U+2E21). The dot under the ꜹ between those brackets is a combining diacritical mark: you type it right after the base character, and your software takes care of positioning it correctly. The accented ę́ was a character in the Private Use Area, but I have changed it to ę (U+0119, common in modern Polish) plus another combining mark, U+0301, the acute accent. That makes it standard Unicode, like the other accented characters. As browsers will ignore the marks when searching, the only characters that make this text hard to search are the brackets and ꜹ, and we can’t do anything about those. So this is our base text—the text that will be searched.

The next step is to select what we need from among the OpenType features of JuniusX. OpenType is a standard for font construction that allows fonts to do all kinds of clever things. To cite one common example, when you type the letters “f‌ind” and the f and the i come out joined in a ligature (“find”), an OpenType feature did that. But JuniusX has a lot of OpenType features (seventy-six of them, to be precise) that do a lot of things.

Here are the ones we’ll want to apply to the whole text:

• All instances of s in this text are long (s): the “Sticky long s” feature (ss08) does that.
• All instances of d are also round: we accomplish that with Character Variant 5 (cv05).
• All instances of f are insular (ꝼ): for that we need Character Variant 9 (cv09).
• Instances of r are round after rounded characters like o and ꝺ; we get that effect with the “r rotunda” feature (ss11).

The features whose four-letter tags begin with ss are Stylistic Sets, and they are either on or off. The Character Variant features contain a list of variants of a particular character; we select from this list with a numerical index (starting with 1). To turn on these OpenType features, then, we need the following CSS rule:

font-feature-settings: "ss08" on, "cv05" 1, "cv09" 1, "ss11" on;

When we apply that to our fragment of Vǫluspá, here’s what we get:

Hlioðs bið ec allar kindir meiri oc mini maugo
heimdalar uilðo at ec ualfꜹþr uel fyr telia forn
spioll fíra þꜹ er fremst um man. Ec mán iǫtna
ar um borna þ⸠ꜹ̣⸡a er fordom mic fǫdda hofdo. nio man ec heima
nío iviþi[vr] miot uið mę́ran fyr mold neðan.

One line of CSS, and already we’re almost home! But there are several special cases to attend to. There’s the dotless i in Hlioðs, the small capital n in mini, and the r rotunda that should be a regular r at the end of ualfꜹþr. For those, we devise CSS classes that turn OpenType features on or off, and we apply these classes to individual words or letters:

• For dotless i, the style “dotlessi” selects the second variant of i in Character Variant 13 (cv13 2).
• For n, we need the “xscap” style, which turns on the “x-height small caps” feature (ss09). (x-height small caps are different from regular small caps in that they’re sized to be mixed with regular lowercase letters.)
• For the r that shouldn’t be rotunda, we use the “norrotunda” style, which temporarily turns off the “r rotunda” feature (ss11).

As an example of what the HTML will look like, here’s the first line of our text:

<span class="initcap">H</span>l<span class="dotlessi">i</span>oðs bið
    ec allar kindir meiri oc mi<span class="xscap">n</span>i maugo

Of course it looks horrible, but no one but you will ever see the ugly HTML code or the CSS. Your readers will see this:

Hlioðs bið ec allar kindir meiri oc mini maugo
heimdalar uilðo at ec ualfꜹþr uel fyr telia forn
spioll fíra þꜹ er fremst um man. Ec mán iǫtna
ar um borna þ⸠ꜹ̣⸡a er fordom mic fǫdda hofdo. nio man ec heima
nío iviþi[vr] miot uið mę́ran fyr mold neðan.

and if any of them should happen to hit Ctrl-F and perform a quick-and-dirty search for “kindir” or “forn” or “mini” or “fodda” or “meran,” they’ll find what they’re looking for.

This document is not only a demonstration, but also a how-to for producing a searchable online document. For detailed instructions, view the source for this page. The CSS is thoroughly commented so you can tell exactly what each bit does.