Arabic and Farsi OL tags

Posted: July 10th, 2006 | Author: dotblack | Filed under: Web-Design, i18n | 7 Comments »

UL tags are well used in standard-based website designs. UL tags are used for lists that could be navigation menues or any kind of lists that are of no order. OL’s are supported in different formats. Roman, Latin, and Greek numbers and alphabets. Arabic or Farsi built-in support? Let’s explore that.

As seen on W3

OL and UL tags go under the lists and generated content. The CSS property that controls lists and auto-generated(populated) content is defind under list-style-type. That’s something simple that you’ve seen and dealt with before. Come the difference. ULs are naturally and semantically to use either an image bullet or a glyphs kind of format such as disc, square and circle.

Now our friend OL. In CSS2.1 specs and definitions, OLs could be controlled by the list-style-type with the following numbering system values:

• decimal (beginning with 1)
• decimal-leading-zero (01, 02, 03, …, 98, 99)
• lower-roman (i, ii, iii, iv, v, etc.)
• upper-roman (I, II, III, IV, V, etc.)
• georgian (an, ban, gan, …, he, tan, in, in-an, …)
• armenian (traditional Armenian numbering)

And alphabetic system values:

• lower-latin or lower-alpha (a, b, c, … z)
• upper-latin or upper-alpha (A, B, C, … Z)
• lower-greek (?, ?, ?, …)

No Arabic or Farsi yet. Right? Disapointing. Let’s take a look at CSS3 definitions.

CSS3 definitions(not final yet), have more than Glyphs/Numeric/Alphabetic systems such as Algorithmic, Symbolic, and Non-Repeating. However the Numeric and Alphabetic systems are richer than CSS2.1 definitions.

Even thought not many browsers implemented the new CSS3 defs completly, some of the new Alphabetic and Numeric systems are applied in Firefox and Opera as of my testings.

One significant system that is applied is Hebrew wich is right-to-left(rtl) system like Arabic and Farsi. So what’s with Arabic and Farsi? Not supported yet. Let’s solve that problem until it is fully supported.

Note: You could view Arabic/Farsi numeric/alphabetic lists if you have your regional settings set as such which is not a setting in CSS nor controlled by your browser–OS controlled!

Let’s get visual

Let’s play with a simple ordered list like:

<ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item Four</li> </ol>

Numeric formats:

Alphabetic Formats

Arabic Formats

How do we achieve the Arabic format?

We could get the Arabic format by forcing it on the document with a little Javascript. I wrote a little class to do that job and give you back Arabic OLs.

The class is called dot1_ol which you can download here.

What dot1_ol does

dot1_ol is a simple Javascript class that takes an OL element of choice by Id or Class or all the OLs in the document and:

1. Change their list-style-type to none
2. Get all the LI elements in the OL and attach proper numbering to them
3. Finally replace the old OL

Let’s do that

All you have to do is first download the dot1_ol class file and embed it in your head section of your document.

By default dot1_ol reformats all your OL tags to numeric Arabic lists. You could use it to show you Alphabetic by changing the parameter.

Demo

There are four demo files that you could view and play with and even download listed below:

1. Convert all OLs to Numeric Arabic OLs:
2. Convert all OLs to Alphabetic Arabic (Alpha order) OLs
3. Convert all OLs to Alphabetic Arabic (Abjad order) OLs
4. Convert OLs by Id or Class to Arabic formated OLs

Need to play with these simple lists? Download the demo

This is the first attempt to do this, so the code might need a little over looking and tweaking more if needed such as nested lists and complex lists. Review it, check it out and let me know if it was of any use to you.

So, next time you have an Arabic website to design, use OLs, I got your back

Tweet This Post

Related posts:

1. Lorem Ipsum in Arabic
2. i18n and true localization Pt1
3. And We’re up again, dotone redesigned
4. Usability for non-English websites?
5. New version: Happy users & Sad Designers

---