In this tutorial we'll take a simple HTML/CSS template and we're going to flip its direction from LTR to RTL. Simply this Hello World Page is going to be RTLed.
We'll be converting this:
In any RTLing process, we'll always focus on the following:
directionof the document ofcourse. rtl or ltr.
- Text Alignment. right or left
Margins. Spaces between the borders and adjacent blocks
Padding. Spacing between the borders and inner content of the block
- Background Images and their positions.
- Layout Images.
- The position of the block. Whether we're using the
floatproperty or using
- Fonts. In the case of Arabic content, text is usually smaller we increase the font size and even sometimes change the font family as well.
Before we Start
Make sure you do the following whenever you try modify anything:
- Backup Backup Backup. You never know what happens, always backup everything before you start modifying.
- Just because you see it working doesn't mean it's working. Test it under different browsers, resolutions, OS..etc.
- The priority is always to the content, don't compromise the availability of the content on its "appearance" or "style". If it looks good and isn't available, we have nothing.
Now, Let's set up the environment
To make sure you're new RTLed page works and make the RTLing process easier I recommend using the below. Feel free to share your recommendations in the comments:
Make sure your new RTLed page is multi-browser compliant. Have it tested to the following browsers:
Known as one of the most popular web browsers. Famous with its very large extension libraries. Personally, I can't live without it :) it's somehow standard compliant (not as good as its cousins Opera, Chrome and Safarit)
The youngest in this list but proved to be among the best. It makes your life easy.
You shouldn't face much trouble with it.
Same as Chrome and Opera.
- Internet Explorer
Internet Explorer is the most important one(to test) for three main reasons:
- It's the most browser used. Check the Usage Share of Web Browsers at Wikipedia.
- It's the most browser with rendering problems and bugs. Check "Explorer Exposed". This page is one of the many pages out there that targets nothing but the "famous" IE bugs and how to fix/avoid them.
- IE and RTL are like enemies! You literally struggle to make it work in LTR direction to find it(and yourself) going crazy in RTL!
The most important thing is to start with a standard compliant browser (or close) like Firefox or Safari for example, and then work on the bugs and fix them (if any) in the other browsers (IE); this is called progressive enhancement. I recommend Firefox along with the famous FireBug extension. It'll do magic and will help alot during the RTLing process (or any HTML/CSS modification process).
Make sure you have some kind of a photo mainpulation tool. Or just a way to flip images horizontally, that's what you'll only need if you want to flip a web page.
...that's it! Ready?
Part 2 is ready..Click the link below: RTLing a Hello World WebPage : Getting to Know the HTML/CSS