Creating a Medieval Font

The Web is a wonderful thing, and with xhtml and CSS it's possible to be to be very precise in terms of designing the look and feel of web pages. In many ways, the latest page specification techniques mean that page layouts for web pages are beginning to get close to those for the typeset page. However, the one place where web page design falls behind the design of the printed page is the case of fonts. All web designers are limited in what they can do by the fonts physically installed on the viewers system. This means that either a default font needs to be used for a web page or a series of similar fonts need to be specified (in the hope that the viewer has at least one of these installed).

This is all well and good as it allows the viewer to specify default fronts and font sizes in their browser (and to over-ride what the page designer has done to make the pages more viewable). However, if one is dealing with old writing systems all the desired characters in the desired fonts may not actually be available. Of course, it's possible to allow people to view images of such texts and PDF files but these don't really marry well into the design of a website and break what should approximate a 'seamless' browsing experience.

Was there a way to overcome this? One early solution of embedding fonts in web pages seems to have effectively died a death (I wanted my solution to be available on as many modern web browsers as possible). First I checked to see whether anyone had already generated what I wanted... In brief I was looking for a way to publish the text of about ten manuscripts written in Old and Middle Cymric between the eleventh and sixteenth centuries and to remain as close and as faithful to the original manuscripts as the needs of modern typography would allow. This necessitated the use of almost 300 glyphs or characters that were unique too these manuscripts, many of which did not exist in any modern font. The only way to get anywhere near the characters I wanted was to design my own font.

Thankfully photographs of the original manuscripts that I wanted to base my font upon were made freely available by both the National Library of Wales' Digital Mirror project and by the University of Oxford Digital Library project. Other manuscripts were made available as facsimile reproductions. Using these sources I could go through the images and extract the best representation I could for every single character I wanted in my font. After a bit of cleaning up I had a set of almost four hundred images representing my desired character set.

At about this time a very generous friend gave me a copy of what was then Macromedia's Fontographer and I spent a few weeks importing the images into this, getting the application to draw outlines around the characters and then cleaning-up the resultant glyphs and re-sizing them so they came to the same scale. The resultant font had all the necessary characters for the Western European languages, the extant Celtic languages as well as all the additional glyphs I needed for the proper representation of my Medieval manuscripts.

I then left this font languishing for over a year as I did other things with my time. Then, on reading an article on Unicode I picked-up the font again. The glyphs were re-organized to comply with the Unicode 4.0 standard with my additional characters being placed either in existing gaps in Unicode or within an undefined area called the 'Personal Use Area'.

With the basics of the font done I started looking at the Medieval manuscripts and began to encode a few to use my new font. The first of these being the manuscript Math Mab Mathonwy from the Mabinogi book known as the Llyfr Gwyn Rhydderch (if you're interested my translation of this into English can be found here). This worked well, as long as you had my font Mabinogi Celtic Font installed on your system. In which case you'd see the text as in this image:



If you didn't have the font installed then all the standard 'Latin' characters would be displayed but the remainder of the text would be gibberish. I did think of writing at the top of each page that the font Mabinogi Celtic had to be downloaded but that wasn't a particularly elegant solution and would interrupt the 'look and feel' of the page. The question remained: what could I do. Then I came across a posting someone had made about using JavaScript to check whether a website visitor had a given font installed. The posting itself was old even when I encountered it and was essentially broken for most modern browsers.

It did give me an idea though and I bought a couple of books of JavaScript to see whether or not I could implement something myself. After quite a bit of frustration I came up with a way of using CSS layers to compare my font with what should be an existing font on the user's computer (I chose Arial for this). The code itself is given below:


<div id="dummy" style="position: absolute; visibility:hidden">Test</div>

<div id="layer1" style="position: absolute; visibility: hidden"><font face="MabinogiCeltic, Mabinogi Celtic, Arial">Test</font></div>
<div id="layer2" style="position: absolute; visibility: hidden"><font face="Arial">Test</font></div>
<div id="layer3" style="position: absolute; visibility: hidden"><font face="MabinogiCeltic">Test</font></div>


<script language="JavaScript">

if(document.getElementById&&!document.all)document.getElementById("dummy").innerHTML= document.getElementById("layer1").offsetWidth;

if (((document.getElementById) && (document.getElementById("layer1").offsetWidth == document.getElementById("layer2").offsetWidth)) ||
((document.all) && (document.all.layer1.offsetWidth == document.all.layer2.offsetWidth)) ||
((document.layers) && (document.layers.layer1.clip.width == document.layers.layer2.clip.width)))

document.write("<font size=3 color=\"red\"> Warning: This page displays the document in in its original form and employs characters used only in Medieval texts. To view these characters you will need to download and install the specially-designed font, \"Mabinogi Celtic\", which can be obtained <a href=\"../mabfont.html\">by following this link<\/a>.<\/font><br/><br/>");
else
document.write("");

</script>



Essentially I'm creating three layers here. The first is a dummy layer, the second contains my font (but defaults to arial or the system font if not available). The third layer has araial font (but defaults to the system font if this is not available). Once the layers have been created and the text 'Test' has been rendered in them I check the size of the layers. If the two layers are the same size then my font (Mabinogi Celtic) isn't available and the following warning is printed:

Warning: This page displays the document in its original form and employs characters used only in Medieval texts. To view these characters you will need to download and install the specially-designed font, "Mabinogi Celtic", which can be obtained by following this link.

If the two layers are different sizes then different fonts have been loaded into them and no warning is displayed. Hopefully this should mean that my font, Mabinogi Celtic is available and the page simply displays the Medieval text correctly. This all seemed great, and for IE on Windows and Safari on the Mac it all looked and worked great. However, someone eventually pointed out to me that the font wasn't working for Firefox.

After a bit of digging it looked that there was a problem with glyphs in the range E1F1 to E2C9 which were simply being ignored by Firefox. In the meantime I'd added Ogham, Runic and Greek scripts to the font so that all Celtic writing systems and early texts could be handled by it and with the move of the offending glyphs to the region EFF0 onwards the font now worked with Safari.

As a result the proper full version of the Mabinogi Celtic Font is now ready for download. All the document pages have been updated to use this font and with the font download page updated and the font's insallation instructions improved the system is now ready for release. So, if you want to view my Medieval texts or you want to give your own documents a genuine Medieval feel, why not download the font and give it a go?