Arabic web design and web fonts

Going a little way towards displaying Arabic is a native way creates a delightful user experience. Arabic Web-fonts, layout, and language CSS help create that experience.

header

An Arabic speaking translator and web content-producer recently told me

The state of web support for Arabic and other right-to-left language speakers has historically been so poor, that making efforts to properly display their language can create an exceptionally delightful experience for the users.

In the course of development for a multi-language website, I’ve had the wonderful opportunity to explore some of the ways to create “delightful experiences” for these users, mostly focusing on font-selection and typography, and page layout.

Font choice and Typography

System Fonts

The fonts used on the web for Arabic are unfortunately still limited to the default Ariel, Verdana, Tahoma and most of the time the font used is Tahoma because it is the most legible on the web. – http://www.smashingmagazine.com/2010/09/19/showcase-of-web-design-in-the-arab-world/

Web Fonts

Although there are many beautiful Arabic fonts (from calligraphic to modern), the selection of web-font choice is limited. While latin web-fonts are widely available from Google Fonts, Typekit, and other similar services — Arabic fonts are only currently (April 2014) available in Google’s “Early Access” program. This program  showcases fonts that Google will consider mainstreaming with their other Web Fonts, if they are popular and get enough usage. Therefore, fonts in this program have no guarantee of long-term availability.

Many fonts are available from the Early Access program, the following is a curated list with previews of Arabic Fonts. Because of possible limited availability, I’ve provided the previews in image format. Visit my CodePen for full code previews.

Amiri

amiri

Droid Arabic Kufi

droid-kufi

Droid Arabic Naskh

droid-naskh

Lateef

lateef

Scheherazade

shaherazad

Thabit

thabit

Layout

Arabic is a RTL (right-to-left) language. Not only is the text read and displayed from right-to-left, but pages are layed-out right-to-left as well. Ideally, an Arabic translation of an English page would not only flip the text, but “mirror” as much of the page as possible.

mirror-site

CSS

There are a few CSS rules to keep in-mind when developing Arabic (and other RTL) language web-pages.

direction:ltr|rtl (docs) changes the text flow of block level elements and text. It will not, however affect the layout of the page.

float:right|left Remember to float left things right, and right things left

:before :after Some things (like icons) in pseudo-elements can be repositioned by changing :before’s to :afters. These will often require custom CSS as many pseudo-elements are positioned relatively to their parent.

Few ‘Computer Science’ searches in English? I guess I’ll start writing in Tagalog

Google Trends show few searches from the United States, or in English, for advanced Computer Science topics. Perhaps I should worry less about the content of my content, and more about the language its presented? With that in mind: Pagbati, Maligayang pagdating sa MikeDoesWeb!

Pagbati, Maligayang pagdating sa MikeDoesWeb!

I have observed an interesting trend on Google Trends that leads me to believe that perhaps I should be less concerned with the subject matter of my content, and perhaps more with the language I communicate it in.

There seem to be few searches coming out of the United States && || in English for advanced computer science topics. As an example: a Google Trend search for “genetic algorithm”

Interestingly, Tehran, Iran is looking for "genetic algorithms" the hardest...

 

Look for yourself: These similar searches get nearly identical results:

I performed some number crunching on the export files Google Trends provides, and gained a bit more insight:

Google provides both a integer rank for each language used (1st, 2nd place…), as well as a decimal weight for each language.  While English routinely scored at 2nd place, the weight difference between 1st and 2nd was often 2:1 .
For example: in the Google Trend search for “Data Structures,”  Tagalog takes the 1st spot, and English the 2nd. However, the weight between the two languages is 1:0.405
Here are the weighted scores and average weight from several computer science related search queries:
language Average dynamic programming Graph Theory Functional Programming Artificial Intelligence Data Structures
Tagalog 0.63 0.375 1 1 1 1
English 0.31 0.315 0.52 0.57 0.35 0.405
Korean 0.25 1 0.725
Chinese 0.13 0.27 0.275 0.23 0.13
Swedish 0.13 0.15 0.625 0.105
Indonesian 0.08 0.345 0.23
Dutch 0.08 0.08 0.09 0.265 0.12
Arabic 0.06 0.09 0.125 0.13 0.105
Russian 0.06 0.335 0.07
German 0.06 0.075 0.09 0.205 0.03
Finnish 0.05 0.345
Danish 0.05 0.335
Thai 0.04 0.15 0.095
Romainian 0.03 0.18
Turkish 0.02 0.07 0.055
Polish 0.02 0.12
French 0.01 0.07 0.015
Italian 0.01 0.07
Portuguese 0.00 0.03
Spanish 0.00 0.025
Persian 0.00

So whats the point?

As an English speaker, United States citizen, and programmer, I’m pretty inclined to believe that English is the language of programming. In fact, observing the programming world lends me to this same conclusion:

  • Every programming language I’ve used or encountered is written in English
  • Documentation is in English
  • Programming tools (compilers, IDEs, servers…) written in English

Have the creators of programming content missed the language boat on content?  I don’t believe so. While few native English speakers understand Tagalog, it seems possible that a majority of native Tagalog speakers understand English. However, this whole revelation of the language and locations of search queries makes me re-think some of the assumptions that I have make in writing technical material, such as the use of humor, assumption of similar situations, idioms, etc…

So, when you write your next blog post, be sure to say Pagbati!  to most of your visitors.