RTLing a Hello World WebPage

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:

To this:

In any RTLing process, we'll always focus on the following:

1. The direction of the document ofcourse. rtl or ltr.
2. Text Alignment. right or left
3. Margins. Spaces between the borders and adjacent blocks
4. Padding. Spacing between the borders and inner content of the block
5. Background Images and their positions.
6. Layout Images.
7. The position of the block. Whether we're using the float property or using relative or absolute positioning.
8. 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:

1. Backup Backup Backup. You never know what happens, always backup everything before you start modifying.
2. Just because you see it working doesn't mean it's working. Test it under different browsers, resolutions, OS..etc.
3. 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.
4. Avoid using JavaScript unless if it's for extra styling purposes. If it's only available with JavaScript then it's no good.

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:

Browsers:

Make sure your new RTLed page is multi-browser compliant. Have it tested to the following browsers:

1. Firefox:

   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)

2. Chrome

   The youngest in this list but proved to be among the best. It makes your life easy.

3. Opera

   You shouldn't face much trouble with it.

4. Safari

   Same as Chrome and Opera.

5. Internet Explorer

    Internet Explorer is the most important one(to test) for three main reasons: 

   1. It's the most browser used. Check the Usage Share of Web Browsers at Wikipedia.
   2. 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.
   3. 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).

Text Editors:

You can use the simplest editors like notepad or more complex ones like Adobe Dreamweaver..It's up to you. Or you can use something in between. Notepad++ is an excellent choice, light and neat.

Photo Editors:

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