My presentation regarding general typographic principals as they apply to web design, and specifically how to deal with the poor support for Armenian font types, which I gave at Barcamp Yerevan 2010.
Thanks to all of the organizers and all the other presenters.
Better Armenian Typography in Web Design
Most people’s lives are governed by some sort of rhythm. This rhythm is usually determined by our school, our job, and by our family. Its a vital and integral part of our lives and gives structure and context to our experiences and relationships.
But as a Christian and a member of the Armenian Orthodox Church, my life is subject to another rhythm - the rhythm of our faith. Its a rhythm which consists of fasting and celebration, prayer and commemoration.
The Armenian Church has a calendar which shifts from year to year in harmony with date of the celebration of Christ’s Resurrection, Easter. This calendar is referred to in Armenian as the Օրացոյց (pronounced O-ra-tsu-y-ts), and each day is assigned a celebration, commemoration, or fast in such a way that is meant to guide and strengthen the community of faith throughout the year.
In an effort to increase exposure and accessibility of the Church Calendar, I created Oratsouyts.com as a tool to make it easier for the faithful to sync their busy lives with rhythm of the Church. Its a very simple website which essentially only does one thing. It tells you what is being observed in the Church for any given day, and the corresponding Bible passages. You can also view the entire year’s calendar, and receive daily notifications (currently via Twitter only).
Read the day’s Bible passage — I often hear people say that they wish they made more of an effort to read the Bible. Following along with calendar of the Church, and reading the Bible passages for each day is a wonderful way to do this. It also helps you find common themes between passages from the Old Testament, the Gospels, and the Epistles within the context of a day’s given feast.
Calendar Filters — The feasts of the Armenian Church are organized in thematic groups. The calendar filter allows you to look at different groups of feasts with the calendar view.
Public API — Perhaps of interest to literally nobody except me, Oratsouyts offers a public API, which allows users to access the information used by Oratsouyts Online and use it in their application or website.
Future stuff — In the near term future I plan to translate this website into Armenian, release the calendar in iCal format (so it can be used in Google Calendar for example), and release mobile and WAP versions of the site.
For more information about the project, you can visit the Oratsouyts project page where release information will be posted on a regular basis.
It can be a real pain dealing with Armenian fonts. Doubly so when dealing with Armenian fonts on the Internet. While all essentially modern operating systems include at least one font that has the ability to render Unicode Armenian text, most of them are not what you would consider visually appealing. In fact, I would consider most of them simply awful.
Visiting a website like a1plus, you’ll most likely see the text of the website with either Sylfaen or Arial Unicode, depending on what OS you use. Neither of these fonts are very nice, the latter bordering on unreadable in my opinion. A limited number of people will see the text rendered with two significantly better fonts, Arian AMU or Arial AMU, if they have those fonts already installed on their computer. This is the font-family CSS declaration that a1plus uses:
* {font-family: "Arian AMU", "Arial AMU", "Arial Unicode", Sylfaen, sans-serif; font-size: 12px}If you’ve got one of the first two fonts in this list, then you’ll experience the site as it’s designers intended. If not, then you’ll have to muddle through with whatever your Operating System has on hand. Its a less then ideal situation, and its not unique to non-English fonts.
In general, dealing with fonts on the Internet has been pretty bleak. Web designers have been forced to choose from a handful of fonts that are common to major operating systems, leaving them with very little material to work with creatively.
It hasn’t been until recently that Web Browsers have advanced enough to allow designers to have much greater creative and technical flexibility with regard to typography online. This new technology (even though its not that new) is called @font-face, and it allows web developers to actually embed a TrueType font in a given website. This means that we can allow users to view a website in any font we choose, including… Armenian fonts.
This question was raised while working on a multi-lingual website for the children’s center my wife and I volunteer at. I wanted to use Arian AMU, but I was hesitant because I knew most people wouldn’t have the font. The answer: @font-face. But before I go over how I did it, lets consider some of the negatives to embedding a font.
Two services and few tricks resolved all of these issues for me. Lets go over them.
FontSquirrel, is an awesome website that will generate a font-face kit from any TrueType font. Visit their @font-face generator to see how it works.
FontSquirrel nullifies the first of our adoption hurdles. It automatically generates “Bulletproof” CSS code that will ensure that your font renders properly on as many clients as possible. It couldn’t be easier.
We have another issue that must be addressed here though. My goal was to embed Arian AMU on this site. As its a multi-lingual font the generated files were several hundred kilobytes! This could mean that it would take several seconds for our users to download the font, and that is too long.
The solution lies in the fact that we don’t need our files to contain any information for characters aren’t Armenian. We can actually force FontSquirrel to filter out any characters that aren’t Armenian. Here’s how:
The resulting files were 12-30 KB, which is essentially the size of a small image, and can be downloaded quickly by even slow connections. A webfont version of the same font prepared by w3.org was ~200 KB, so you can see that we’ve really trimmed down the size.
You can then download the resulting font kit.
We’ve addressed a few of our issues, but its still a problem that our fonts aren’t visible until the font files are downloaded. Also, we have to worry about browsers that don’t support @font-face at all. Thankfully a few days ago, a collaboration was announced between Google and TypeKit, the latter being a service which has really pioneered @font-face adoption over the past year.
TypeKit has recently opensourced its WebFont Loader Javascript library that they internally developed which “gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience.” Google is using this library for its recently announced Google Fonts project.
It will allow us to make sure that our text remains visible for non-modern browsers, and make the text visible in a default font until our font downloads. We can add it to our website by including the following script:
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>And we can initialize our fonts by adding the following code, where stylesheet.css is the CSS file that has our font-face declarations in it.
<script type="text/javascript">
WebFont.load({
custom: {
families: ['ArianAMU'],
urls : ['stylesheet.css']
}
});
</script>Now we can apply styles to our various Armenian language page elements.
:lang(hy) {
font-family: 'Arian AMU', 'ArianAMU';
}The first font is that actually Arian AMU font, just in case our user actually has the font installed on the computer. The second is our webfont. Note that I used the “:lang” selector to declare which elements should use Armenian fonts. You can use the “lang” attribute on page elements or on the whole page to indicate what language the content is in. This is the most semantic way to do this. For example:
<html lang="en-US">
<body>
<p>
Hello World
</p>
<p lang="hy">
Բարև Աշխարհ
</p>
</body>
</html>You can checkout the demos that I created to see how it works. Testing on my computer showed complete browser compatibility. Testing with litmusapp.com resulted in slightly less compatability, but I’m sure that was due to issues with time lag.
Since I spent the time, go ahead and download the already prepared font kit. It’ll get you started on your project.
Note: I’m not exactly sure about the license details of Arian AMU. Its been available for download on many websites, so I’m sure that it most have some sort of an open license. Just in case, don’t use it for any commercial websites unless you confirm that its not a breach of the font’s license agreement.
Update: If you want to see a more real world example, I’ve added this script to my Grabar Cheatsheet website.
When I arrived in Armenia back in September there were two Internet resources for which I truly wished. The first was up-to-date and accessible information regarding locations in Armenia (i.e. resteraunts, services, etc…). The second was a tool to translate Armenian to English, and vice-versa.
This first of these concerns was obviously colored by my being a newcomer who couldn’t find my way around a city, which even for locals can be a hard city to navigate. This has come along way in the past 9 month, and recently Google announced that it would be offering the ability to get directions within Armenia via Google Maps. Thank you, Google!
Today, thanks to a tweet from Der Ktrij Devejian, I found out that my second wish came true as well (no thanks to the failure that is translator.am). Again I have Google to thank. Google Translate now offers Armenian as one of their many inter-translatable languages.
Having this tool isn’t just about being able to visit Google Translate and write or copy-paste some text in the form, and get back a decent translation. Although, that is awesome and very much appreciated. This tool opens up a world of communication between the Armenian speaker and the rest of the world. Here are some fun examples:
Check it out my blog in Armenian
The URL looks like this http://translate.google.com/translate?hl=en&langpair=en|hy&sl=en&tl=hy&u=http://www.mattash.com. Just change the part that says http://www.mattash.com.
Obviously this would also work on the other direction if you want to post a link to an Armenian language resource that would be translated into English. You would have to change the part of the URL that says langpair=en|hy to langpair=hy|en.
Create an MP3 of a computer generated pronunciation of an Armenian sentence. Click here to hear the Google robot say this in Armenian
The URL looks like this http://translate.google.com/translate_tts?tl=hy&q=Ստեղծել+MP3+մի+համակարգչի+արտասանության+որի+հայերեն+նախադասության. You can use Armenian text, or transliterated text.
Add a button to your website that will allow visitors to have it translated to and from Armenian. Visit the Google Translate Tools and Resources Page for more info.
Coming Soon Use Google Translator Toolkit to aid you in large translations. It allows translators to skip the easy stuff and focus on translating the real meaning of the text. It includes great collaboration and versioning features, and special tools for translating Wikipedia articles. This isn’t fully enabled for Armenian yet, but I’m sure it will be soon.
Or Հայ Սուբերստար with English Subtitles. Coming Soon See automatically generated and Armenian translated subtitles in YouTube videos. This currently exists in other languages, so I’m sure Armenian will be available at some point.
You may assume that this was something I wished for because it would help me bolster my Armenian skills (I didn’t begin learning Armenian until I was 26). This is partially the case, but as I student at the Gevorkian Theological Seminary, where all the instruction is of course given in the Armenian language, I noticed a pattern which I found very disconcerting. Later conversations with educators confirmed the seriousness of the issue.
From the beginning of the school year I had certain courses, like General Church History or General Theology, which primarily were taught by professors who during class would just read texts that were written in a foreign language. As they read they would translate the meaning from its original language to Armenian for the students to copy down verbatim in their notebooks for later study. At first I thought the teachers were just being lazy, but then it became clear to me. There is no good and/or contemporary literature written in the Armenian language on these topics.
This issue doesn’t just relate to subjects that would be taught in the Seminary, but effects all areas of academics and learning in Armenia.
Armenia is a small nation, and the Armenian language is spoken by a very small percent of the World’s population. As a result we haven’t had the capacity to process and translate the flood of information which has come about from our wired age. Subsequently, It is required that a student understand at least English or Russian to receive a decent education in almost any field. Of course I support multi-lingualism, but this is certainly limiting the potential of many of our people.
It goes without saying that having the entire wealth of the Internet accessible for the Armenian speaker is going to be a great boon for the Armenian Nation.
On the other hand there is a great cache of knowledge, especially regarding the Armenian Church and Armenian History, which is only available in the Armenian language. As time goes on, more and more of these texts will be digitized, and having a worthwhile online translator is again going to be of invaluable for students and faithful alike.
Download ArianAMU-fontkit.zip [125 KB]