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?

Internationalizing your website

One of the problems that I faced with many of my web pages was the need to offer seamless internationalization. The ability to serve ads based on the local of the surfer. The problem became even more urgent as I added eBay misspelling searches and Amazon product additions to various pages. My default was going to be the US, but I didn't want surfers from other territories I was targeting from other territories feeling left out or alienated. Basically I wanted the page to default to the appropriate territory without the user having to click on anything.

Eventually I found the software 77 site, which makes a database of IP addresses linked to country available for free. Of course, once you have access to this database (which is delivered as a CSV file) it's possible to start doing some clever stuff. The site even provides some free example code in Perl, php and java on which you can base your own code.

Then I did some digging of my own on the web and I found that I could download and process the raw data for myself (I hate relying on someone else for a datasource if I don't have to. After about an afternoon's tinkering I had the code to download and parse the files in place. Then I started to write the code to actually use the database of IP to country name lookups I'd generated (which actually didn't take long). Then I started plugging it into my own code. So the eBay international misspelling tool so that international visitors are automatically taken to the correct eBay store.

After that I began working on a new page which demonstrates the code by showing a visitor their IP address and displays a flag for their country of origin. Moreover, and possibly more importantly the web page generated takes you step-by-step through the entire process of how to generate your IP to country name database as well as all the code to use it and do something useful with it. Everything you need, in short, to seamlessly internationalize your web pages.

If you want access to the page and all the technical detail then you can find the IP to country name mapping instruction page here. On this page you will find a description of what I did along with all the code necessary to implement this functionality on your own web pages. Remember you're basically getting for free what some companies are charging you $99 a month for. Moreover, because the code and all the instructions are provided you can modify this code to do precisely what you want it to. What could be better than that?

Individualized Amazon Store

The Amazon affiliate program is probably one of the best out there and if you haven't joined yet I suggest you go to Amazon UK's Affiliate site or Amazon.com's affiliate site (or your local Amazon's affiliate site to sign up. This process will take a few days as amazon will check your website for content and to make sure that it doesn't contravene any of their policies. Once you have been accepted, however, you will be entered into the program and you will receive your affiliate ID.

Once you have this then you can start generating your own Amazon store (you will be paid a commission on every sale you make which will range from 4.5% to 8% (though there is a cap). The system is also organized so that after you've sold 51 items the earnings increase to 5.25% per item (and this increases is retrospective for the items already sold as well). There are also bonuses for sales through a remote cart and direct links, so that by the time you reach 101 sales you should be earning an average of about 7.5% commission.

One way to start an Amazon store is to write your own reviews and add amazon links to them, or to use amazon links if you have book references in your text (which is how I started). This is not a very efficient approach and obviously takes time to set up. So, is there any way of setting-up your own Amazon affiliate store? In fact there is. Amazon (including various of the major localized variants) produce an XML stream of their products. This can be parsed and incorporated into your own website to generate a personalized/individualized Amazon store for your own website.

A number of scripts and/or systems for incorporating an Amazon store into your own website exists. These range from the entirely free basic scripts where you have to do some programming of your own to fully automated systems. If you're into hacking your own code then the amazon products feeds site. This is a free script that you can install and modify how you wish. If you want something a little more 'polished' then I'd go for the free ASM2 script which you can install and configure for your own use (though you'd probably need to do some manipulation and configuration).

If you want/need something a little more automated then two products to be recommended are associate-o-matic's Associate-o-matic and ghostscripter.com/amazon_shop.php's Amazon Shop. Associate-o-matic costs $99 for a full license, though there is a lite version that is delivered free (though 10% of your comissions go to the authors of the script. Amazon Shop costs $110 for a full license (though if you're not interested in poking around within the source code it's $49).

All these systems will alow you to build your Amazon-based sales pages/sites and almost all the systems above will also allow you to target multiple amazon sites (usually US, UK, Canada, Germany [and generally France and Japan as well]). With these systems you can also target the amazon results you return so they fit with the contents of your site. As a result if you have a minisite or a microsite (for an explanation of this see the Celtnet minisites information page) which is directed to a given topic and which also has a potentially lucrative amazon store associated with it. Alternatively, if you have a recipe section of your site (as I do) you can deliver information about recipe books and cooking utensils or gadgets to associate with them.

How much money you make is then entirely dependent on how much traffic you drive to your website, though even 250 or so visitors each day is enough for you to make a profit of at least $40 dollars a month (and this is after paying for your domain name, web hosting and DSL connnection charges). Once you've set it up the system looks after itself, and if you can make a profit from each site you place the system on then you will soon be making a steady additional monthly income.

Build your own PC Pages go Live

After considerable work, the section of my site on how to build and upgrade your PC is now complete. This section of the site takes you through all the main components of a modern PC (everything from the motherboard through to printers and displays). Once you've acquainted yourself with the main components of a PC the next page takes you through how to build a PC from scratch based on the components I've collected for my own PC. This page also tells you where and how I sourced the various components and shows you how you can gather the appropriate bits and pieces quite cheaply.

After purchasing your components, the guide lets you know precisely (step-by-step with all the necessary illustrations) to put everything together, starting with the motherboard, then the internal drives and finally the connections to the case itself.