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

Tags
Average: 2 (4 votes)

RTLing a Hello World WebPage : Getting to Know the HTML/CSS

Now that everything is ready (a browser and a simple editor), we can start RTLing the simple hello world page. I'll be using Firefox and Notepad++ in this tutorial.

The SRC of this tutorial is available at the end of this post. You'll find the HTML file with both LTR and RTL stylesheets and images.

The RTLing process involves modifying the CSS only. If you're not familiar with the difference between HTML and CSS, here it is:

HTML is for markup and CSS is for styling. In English:

With HTML, you just specify the purpose of your content, this block is a "link", another block is a "paragraph", some other block is a "table"...etc

While with CSS, you specify the "style" of this block of content. That link is "red and bold", that paragraph is "aligned to the right" and has a "blue background", that table has a "height of 400px". etc.

That's why when we want to flip a page, we only change the CSS. A paragraph won't turn into a table in RTL, but its text alignment for example will change.

So Let's start now:

The HTML

Download the source file. And Open the file index.html in Notepad to view the following code





Hello World - RTL This



Hello World Title!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra est et erat euismod blandit congue metus porttitor. Duis sollicitudin, ante at tincidunt accumsan, nisl leo rhoncus mi, id tempus dui velit a risus. Aenean gravida, dolor ac mollis fermentum, felis metus laoreet felis, vitae ullamcorper justo turpis sit amet nisi. Mauris laoreet turpis eget elit sodales eget vehicula sem consequat! Aliquam erat volutpat. Quisque auctor, metus non molestie semper, felis diam tempus leo, eget rutrum est arcu vitae orci. Mauris vitae mi in eros semper consectetur nec vulputate lectus! Suspendisse ac auctor libero. Duis ut neque euismod leo aliquet bibendum quis in enim. Quisque iaculis nisi tortor. Praesent quis tortor est. Integer eleifend iaculis magna. In et urna ac lectus rhoncus accumsan? Cras sodales lectus ac ligula dignissim sit amet luctus nisi dignissim! Ut neque metus, sagittis ut blandit at, gravida at urna.

You'll notice inside the <head> tag (between the <head> and </head> lines) this line:


This is where the CSS file is included. Without this line, the Page will look like this (click to enlarge):

Screenshot - Hello World Page with no CSS loaded

The CSS

The linked CSS file is located at "ltr/styles.css". Open it in Notepad++ to view this code:

html {}
h1,h2,h3,h4,h5,h6 {margin:0; padding:0;}
body {color:black; font-family:Arial, Helvetica, sans-serif; font-size:12px;}

a { color:#6D6E71;text-decoration:none;}
a:hover{color:#6DA6E2; text-decoration:underline;}
#body ul li {
	list-style:none;background:transparent url('bullet.gif') left .5em no-repeat; padding-left:10px;}
#wrap {width:770px; margin:0 auto;padding:10px 0;}

#header,#body,#footer{margin:0 20px;}

#header {border-bottom:1px dotted #6DA6E2; overflow:hidden;}
	 #logo {float:left;font-size:2em; color:#6DA6E2; width:25%; text-align:center;}
	 #topnav {float:right; list-style:none;}
	 #topnav li {float:right; margin:0 5px; border-bottom:1px solid #6DA6E2;}
	 

#body {overflow:hidden;}
#content { width:75%; float:left;}
#sidebar { width:24%; float:right;}

	#sidebar ul {
		list-style:none;
		margin-left:10px; padding:0;
		}
	#sidebar ul li{border-bottom:4px solid #EEEEEE; padding-bottom:5px; margin-bottom:5px;
		}
	#sidebar ul li h3 { font-size:1.2em;margin:0; padding:0;}
h2 { font-size:1.3em;color:#6DA6E2; margin:1em 5px;}


#footer {border-top:1px solid #6DA6E2;padding-top:10px;}
	#copyrights{float:right; margin:0; padding:0;}
	
	#footer-links{ float:left;  width:50%;}
	#footer-links ul { list-style:none; margin:0; padding:0;}
	#footer-links ul li {float:left; margin-right:10px; border-bottom:1px solid #6DA6E2;}

Now, let's RTL...part 3 (the last one) is next..

Average: 2.3 (8 votes)

RTLing a Hello World WebPage : RTLing

RTLing

Now we'll start flipping the CSS. Copy the ltr folder and rename the new one rtl (It's ready in the Source you'll download, you can move it to another place if you want to practice it yourself).

In the index.html file change the path of the css file from ltr/styles.css to rtl/styles.css (what we did here is linking the new file we're going to flip)

Open the styles.css file in your new rtl folder to start flipping it.

Direction

The first thing we'll do is changing the direction of the whole html. Look for the first line to see

html{}

Add direction:rtl; between the curly braces to have:

html{ direction:rtl; }

It's also recommended to add the attribute dir="rtl" to the <html> tab in the HTML file so it'll render properly in case no CSS is loaded.

<html dir="rtl">

Note: The LTR version didn't explicitly specify the direction because the default is ltr.

Float

The float propery specifies how the blocks are floated horizontally (left or right) next to each others. Its value can be one of 3 different values: left,right and none. We're not interested in the none. but our flipping will include nothing but replacing the left with a right and the right with a left.

In our CSS,the float:left are at lines 14, 23,36 and 38. Replace them with a float:right. And the "float:right" are at lines 15,16,21 and 34; Replace them with a "float:left". The table below shows the changes:

 

float:left into float:right
LTR RTL
            #logo {float:left;...}
            #content { ... float:left;}
            #footer-links{ float:left; ...} 
            #footer-links ul li {float:left; ...}
            
            #topnav {float:right; ...} 
            #topnav li {float:right; ...}
            #sidebar {...float:right;} 
            #copyrights{float:right; ...} 
            
            #logo {float:right;...}
            #content { ... float:right;}
            #footer-links{ float:right; ...} 
            #footer-links ul li {float:right; ...}
            
            #topnav {float:left; ...} 
            #topnav li {float:left;...}
            #sidebar { ... float:left;} 
            #copyrights{float:left; ...} 
            

Margin and Padding

Margins are the space between the edge of a block and its adjacent blocks(neighbors) while padding is the space between the border of the block and its inner content. These values can be specified at four sides: left, right, top and bottom. Ofcourse, when RTLing, we only flip the left and right margins/paddings.

In CSS, you'll see sometimes margin/padding values like this:

margin-left:10px;
padding-right:20px;
 

It's simply straight forward, margin-left is for the left margin and padding-right is for the right padding. But sometimes you'll see it like this:

margin: 10px 5px 7px 1px;
 

It's a shorthand of combining the four directions in one rule (saves space and time). The four values are for the four directions in this order: top right bottom left (it's like starting at the top and going clockwise). When RTLing, we swap the second and fourth values (right and left) to RTL this rule.

Another shorthand looks like this:

margin: 10px 5px;

The first value is for the top and bottom values and the second value is for both left and right values. In this case we don't need to change this in RTL since the right and left are the same.

The last shorthand looks like this:

margin: 10px 5px 20px; 

The second value is for both left and right values and the first and third one are for the top and bottom values respectively. Again we'll leave it unchanged in RTL (same left and right).

In our example, the margins need to be switched are at the lines 25 (margin-left into margin-right) and 38 (margin-right into margin-left).

Text Align

The text-align property's value can be one of three values: left, right, center and justify. center and justify aren't in question here. So you guessed it right, in RTLing, we change the text-align:left into a text-align:right and vice verca.

In our example,we have text-align values that need to be switched since we only have a text-align:center at line 14 which will be left unchanged.

Background Images

Background images can be assigned to specific blocks and their position can be controlled as well. When we RTL a page with some images, we sometimes flip these images horizontally if they're used as a part of the layout. After flipping the image, we'll need flip the horizontal position of the background image.

The background position can be set in two ways:

Using directly the background-position property. It takes two values, the first one is the horizontal position(what we want) and the second one is the vertical position(which we'll leave unchanged in RTL).

The other way is in a background shorthand where the background is set in one rule (bg color, image, repeat and position). The position is found at the end of the rule like below:

body {background:red url('image.png') no-repeat top left; }

In both ways, we'll change the left into a right and vice versa when we want to flip it. Don't forget to flip the image.

In our example, the background image bullet.gif is flipped and position is flipped at the line 8 .

Positions

Some tricky CSS positioning includes using the properties left and right. They control the position of the positioned block. In RTL, we (yes) swap the properties, the left becomes a right and vice versa.

In our example, this kind of positioning isn't included so we won't do anything.

Fonts

You might want to change the font face and size of your page when you RTL a page and also translating it into Arabic for example. Even if you don't change the font face, you'll need to increase the font size by 1px or 2px (depends on the font). It's optional but I included it here because from my experience, I changed the font face and size in every page I RTLed.

In our example, the font size is increased to be 13px at line 3.

That's it

All you have to do is open your html file index.html and change the path of the CSS file from ltr/styles.css to rtl/styles.css to load your RTL stylesheet. And ofcourse don't forget to change your text to Arabic or any RTL language :)

I hope you found this small tutorial useful. You'll find again the source code below and a link to a demo page. I modified the demo page and added an "RTL" link to the top menu to switch between the styles only (no HTML is modified).

Average: 3.8 (17 votes)