RTL-This

RTLing Superfish Menu (jQuery Plugin)

nightS — Sat, 20 Feb 2010 23:50:40 +0000

Thank you Rami for the suggestion.

Superfish is a very famous jQuery plugin that allows you to add eye-catching effects to dropdown menus (<ul>). It works perfectly in major browsers (including IE6 with some style limitations) too. Well in RTL..it's just not there..so we're going to RTL this one.

What makes the superfish a very good plugin is that it doesn't specify or affect the layout/style of the menu itself, that's the CSS's job. That's why when you download the plugin with its example, you get one javascript file(superfish.js) which is responsible of the effect of showing/hiding menu items; and multiple CSS files for each style or type(horizontal, vertical and navbar).

So what does that mean? RTLing this plugin is nothing more than RTLling the CSS using the very old and same method (flipping the properties/values).

First, download the superfish plugin with its example (latest version at the moment of writing this tutorial is 1.4.8)

Second, open the superfish.css, superfish-vertical.css and superfish-navbar.css and flip the properties.

The most important part to flip is the one labeled with "/*** ESSENTIAL STYLES ***/" at the beginning of the superfish.css. Scan through the rules to point out the values to flip. The flipped CSS rules will be:

/*** ESSENTIAL STYLES ***/
.sf-menu li {float:right;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {right:0;left:auto;}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {right:10em; left:auto;}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {right:10em; left:auto;}

This method of flipping overrides the original stylesheet in a new one. It is used more in multilingual websites where both directions are included. Learn more about it at the tutorial "3 Different Ways to RTL your CSS". You can directly modify the files if it's not your case.

Then flip the /*** DEMO SKIN ***/ styles using the same rules in addition to the other CSS files. Below is the CSS for the default skin:

/*** DEMO SKIN ***/
.sf-menu {float:right;}
.sf-menu a {border-right:1px solid #fff; border-left:none;}

/*** arrows **/
.sf-menu a.sf-with-ul {padding-left:2.25em; padding-right:1em;}
.sf-sub-indicator {right:auto;left:.75em; background-image:url('../images/arrows-ffffff-rtl.png');}
.sf-shadow ul {
	padding:0 0 9px 8px; background-position:left bottom;

	border-top-left-radius: 17px;
	border-bottom-right-radius: 17px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;

	-moz-border-radius-bottomright: 17px;
	-moz-border-radius-topleft: 17px;
	-webkit-border-top-left-radius: 17px;
	-webkit-border-bottom-right-radius: 17px;
	border-top-left-radius: 17px;
	border-bottom-right-radius: 17px;
}

What's left is the background images. You can ignore flipping rules that style the arrows(background images) since it's a CSS Sprite and background images are calculated exactly. All you need is flipping the arrows-ffff.png image horizontally and use the flipped one instead.

Guess what? That's it! Your menu is now functioning perfectly in RTL as it is in LTR.

If you're using superfish in your drupal installation(check the tutorial at adaptivethemes.com to do this), uploading the superfish-rtl.css style sheet will get it automatically included by drupal when the page is switched to an RTL language.

Check the Demo and/or download the Source files of the RTLed styles. Enjoy it!

Update @01-03-2010 14:00

Added a quick fix for IE6 RTL issues, both demo and source are updated.

Update @01-03-2010 14:35

Updated fixes to include IE7. Will address the issues in a separate tutorials

Demo

3 Different Ways to RTL your CSS

nightS — Wed, 17 Feb 2010 11:28:07 +0000

There are three major ways I prefer to use when RTLing a webpage. Each one has its own pros and cons. They are actually the same..flipping CSS properties and rules is the same procedure in all ways. What's different is where and how are we flipping them.

1- Same file.

The method used in the first RTL a webpage tutorial. We simply open the orignal CSS file and scan it for CSS rules to flip till we reach the end of file, save and it's RTLed.

PROs:

No extra files or CSS rules.
Which means no extra HTTP requests, bandwidth or much effort.

Cons:

Useless if we're running a multilingual website..because we need both directions (if we're using bidirectional websites).

2- Independent Separate Files.

This method is the same as first one but instead of modifying the original stylesheet, we copy it (say styles-rtl.css) and modify that one.

PROs:

We maintain the styles for both directions. So we serve the appropriate stylesheet according to the current language of the page.
No extra files or CSS rules *
Which means no extra HTTP requests or bandwidth **

*Assuming we didn't have to add bug fixes (*cough*IE*cough*)!

** Remember we're serving only one style sheet in the page

CONs:

Hard to maintain and too much redundant CSS rules. For example, a CSS rule like a{color:red;} will be duplicated in both files. And if you wanted to change it to green, you'll have to do it twice in both files.

3- Dependent Separate Files.

This method is a mix of the first two. We have 2 seperate files, but the second one only contains flipped CSS rules. For example if we're styling links in styles.css as:

a{color:red; margin-left:10px;}

in the styles-rtl.css stylesheet we'll only include the flipped rule:

a{margin-right:10px;}

And then we link both:

<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="styles-rtl.css"/>

Make sure you include the overriding stylesheet after the original one to ensure the rules are overriden.

But notice that the link in RTL now has a margin-left of 10px AND a margin-right of 10px which is not what we want. We want the margin-left to be a margin-right. In that case we "reset" the margin-left like below:

a {margin-left:0; margin-right:10px;}

PROS:

Easy to maintain and modify. RTLed rules are much less and don't get frequently changed as much as the other ones. Now changing the color of the red link to green is going to be in one stylesheet only since it's not repeated in the flipped one.
Great to use in big multilingual websites.

CONs:

Extra files/size, 1 extra HTTP request. This can be avoided by merging the two files into one for your online deployment when you're all done. You can also compress it too for a smaller file size.

How do you RTL your CSS? Which method of the 3 do you prefer? Or is there a different one?

RTLing GD Star Rating Plugin (WP) (UPDATED)

nightS — Sat, 06 Feb 2010 12:30:47 +0000

GD Star Rating is a WordPress plugin that allows your blog readers to rate your posts and pages. It is extremely flexible when it comes to appearance and language support*. Graphics and text are controllable via the plugin dahsboard. Even in RTL, the rating block is properly aligned (not 100%).

The problem is in the stars mainly...When you hover your mouse over the first star from the right, it should be the lowest rating button (1/10 for example). In RTL it's the opposite..the first star is actually the highest rate. Check the screenshot below:

Overriding the CSS (using FireBug) resulted with this very small CSS addition that should solve the problem. Append the below styles to your stylesheet (Dashboard -> Appearance -> Editor, edit the Stylesheet styles.css) and save. Voila!

.gdthumb a,.ratepost .starsbar a,.rcmmpost .starsbar a,.ratemulti .starsbar a,.rcmmmulti .starsbar a,.ratecmm .starsbar a,.reviewcmm .starsbar a{right:0!important; left:auto!important;}
.gdthumbtext, .gdthumb,.thumblock .ratingloader ,.raterleft,.ratingtextmulti,.ratingstarsinline{ float: right!important;}
.raterright,.ratingbutton{ float: left!important; }
.mtrow td.mtstars,.gdouter,.loader{text-align:right!important;}

The CSS is available to be downloaded below. Hope you enjoy this quick tweak.

*Regarding the language support. I couldn't find a template for the Arabic translation for the plugin online. I'll work on translating the default values and post it soon. If anyone has (or know someone who has) translated it let me know please :)

UPDATE(08-02-2010 @15:10): I missed an extra RTL issue which can be fixed by adding the below CSS rule.

.ratingblock .starsbar.gdsr-size-24 .gdinner { background-position:right -48px!important;}

It fixes the background images'(stars) alignment which was causes rating to look like this:

The source code is updated as well.

UPDATE(08-02-2010 @15:35):Also note this is a quick fix to the default settings (yellow stars with size of 24px). Will post a separate post to fix this for all types and sizes.

RTLing Twitter's Widget

nightS — Sun, 10 Jan 2010 23:24:17 +0000

The Twitter updates widget is maybe the most popular widget you can find on blogs. You can get yours from your settings page or by going to the goodies page and choosing widgets. Customizing it is super easy, you get to choose the colors, width and style of the widget itself. The direction though is always LTR. The good thing about the twitter is that it doesn't break in the RTL pages and it looks just fine. But to tweeples who tweet mostly in RTL languages (Like Arabic), it kind of doesn't fit in the RTL content of the whole page. Therefore, it's nice to see it flipped to go with the flow of their RTL page and tweets (what we are going to do now).

So basically we're going to flip the header (it's nice to see the avatar and the name to the right) and the tweets. Check the table below to see the difference:

Twitter widget before and After RTLing
LTR	RTL

The code twitter gives you is a JavaScript code that writes your widget's HTML/CSS. RTLing the widget will be by overriding the CSS of the widget. What I used to to achieve this is the very famous Firefox Extension: FireBug.

Grab the code and paste it into a testing page (any HTML document or your blog) and open the page in your browser. Press F12 to show the Firebug console. Then right click the Element you want to flip and use the tips covered in the "RTLing a Hello World WebPage : RTLing" Tutorial.

What I flipped is the following:

The spinning "loading" icon.
The Twitter header (including the avatar, name and twitter handle)
The tweet's direction, avatar and meta info (timestamp and reply icon).

Check the Demo link and download the source code to RTL your own twitter widget (links below).

Note: Notice in the source code, the last rule that targets the selector ".twtr-tweet-text" is for widgets that show the twitter avatar next to the tweet itself. Remove this line if you're using a widget with the "show avatars" option is off.

Demo

Thank You

nightS — Mon, 21 Dec 2009 09:03:10 +0000

Can't express our happiness about the reaction we've been getting so far. Getting feedback and links to blogs that have been RTLed with the help of the tutorials posted here was just more than amazing *if you could just see the smile on my face right now*.

Special thanks to Moh'd Sahli who was very kind to send me the link to his guide[ar] he prepared during the "Code Sprint" Event which was held in May 2009 in Cairo.

The support this project received from the Arab Techies was amazing. Manal was great to send me the link to this Drupal Module "Jquery Bidi" which:

Uses Jquery to automatically set directionality attributes of HTML elements based on first strongly directional letter in the element.

I will say it again here..I look at this project as a learning experience, I thought of starting it because I couldn't find enough sources about RTL for me to learn from. So if anyone has an idea, tutorial or project you're more than welcome to join :)

Background Images

nightS — Thu, 03 Dec 2009 10:46:31 +0000

Using backgrounds in CSS gives you the ability to control its position. It is done by controlling its position relativly to the 0,0 point which is the top left corner of the block. If you're rule has a background-position value of left top for example, flipping it to be right top wouldn't be a problem since right is a valid value.

So where's the problem? Let's say you're flipping an LTR design, you come across a rule where the background-position is set to 20px 15px. This means that the image will be moved 20px from the left and 15px from the top.Check the screenshot below.

Now you need to flip it to move 20px from the right instead of the left. Unfortunately when the page's direction is flipped to RTL the 0,0 point of the block will remain to be the top left corner.

There are many ways to solve this. We'll use a very common example where this issue can be faced, custom bullets of a list item <li>.

The HTML is a simple UL:

<ul>
    <li>Link Item 1</li>
    <li>Link Item 2</li>
    <li>Link Item 3</li>
    <li>Link Item 4</li>
    <li>Link Item 5</li>
</ul>

And the CSS is also simple:

ul	{ list-style:none; border:1px solid #1b75bc; width:300px;
	  float:left; margin:0;padding:20px 0;}
	
ul li { background:transparent url('bullet.png') 10px 0 no-repeat;
		padding:0 30px; line-height:20px; border-bottom:1px solid #d8ecbd;
		margin:5px 0;}

The LTR list looks like this:

1. Calculate the actual distance from the left

Simply you'll subract the offset of the bullet (20px in our example) from the container's width (300px in our example). So 300-20=280px. The RTLed background position will be: 280px 15px.

Pros:

No need to manipulate the photo or add extra HTML or CSS

Cons:

You'll need to know the width of the container (which isn't possible in fluid layouts). And if you changed the width of the container, moved the list to another block or used it somewhere else, you'll have to recalculate the new offset or use different values to each one.

2. Add the space to the image

Since the right is a valid value of the background-position rule, we can use it and add the whitespace to the image itself. We'll add extra 20px of white space to the right of our bullet picture and set its position to the right to have the effect that it's 20px away from the right edge. Check the screenshot below of the bullet used.

Pros:

No need to add extra HTML or CSS

Cons:

You'll need to modify the photo each time you update the offset. Or worse, you'll end up having many images with different widths according to each offset you use in your design.

3. Use margin and padding

This method will also use the "right" keyword that can be used in the background-position rule. But instead of assigning the background image to the list item <li> itself, we'll wrap the content with a <span> for example and assign the background image to this span. Then we add the offset value (our 20px) as a right-margin. Finally, we'll set the right-padding of the span to the difference between the of the padding of the <li> and the bg-image offset (to move the content away from the image) after resetting the padding of the <li> itself (since we used them on the span).

Pros

Can be modified easily and used anywhere.

Cons

You will have to wrap the content of the <li> with a child. It's not really a con compared to how effective this method is. And extra content won't affect the layout if not used (the LTR styles won't need to be changed with the extra markup).

4. Avoid it :)

Okay this might be silly but if you can avoid setting an offset then why not? Do you have any other solutions or suggestions? Please share them in the comments

The Source code of this tutorial is available to download. You'll see the three solutions available as three CSS classes. You can test them by changing the class assigned to the <ul> in the <div id="rtl"> block.

RTL-This Request

admin — Thu, 03 Dec 2009 10:35:57 +0000

Do you have an RTL This request? You found a template you like and you want it in RTL? Or you have a widget that doesn't look well in your RTL site? Maybe you're building an RTL page and need help?
Submit your request here and we'll make sure it's served.

RTL in Silverlight

nightS — Wed, 02 Dec 2009 17:58:38 +0000

Silverlight recipes is into RTL as well. Learn how to add RTL support to Silverlight there. Thanks Shady for the link.

RTLing a Hello World WebPage : RTLing

nightS — Fri, 20 Nov 2009 20:12:56 +0000

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; ...}

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).

Demo

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

nightS — Fri, 20 Nov 2009 08:31:08 +0000

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World - RTL This</title>

<link href="ltr/styles.css" type="text/css" rel="stylesheet" media="all"/>
</head>

<body>

<div id="wrap"><div class="wrap-in">

<div id="header">
	
	<h1 id="logo"><a href="#">Hello World</a></h1>
			
	<ul id="topnav">
		<li><a href="#"><span>Home</span></a></li>
		<li><a href="#"><span>About Us</span></a></li>
		<li><a href="#"><span>Contact Us</span></a></li>
		<li><a href="#"><span>Search</span></a></li>
	</ul>
	
</div>

<div id="body">
	<div id="content">
		<h2>Hello World Title!</h2>
		
		<p>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.
</p>
		<ul>
			<li><a href="#"><span>Lorem ipsum dolor sit amet</span></a></li>
			<li><a href="#"><span>Metus non molestie semper, felis diam tempus leo, eget rutrum est arcu vitae orci. Mauris vitae mi in eros semper consectetur nec vulputate lectus</span></a></li>
			<li><a href="#"><span>Felis metus laoreet felis, vitae ullamcorper justo turpis sit amet nisi. Mauris laoreet turpis eget elit sodales</span></a></li>
			<li><a href="#"><span>Mauris laoreet turpis eget elit sodales eget vehicula sem consequat! Aliquam erat volutpat. Quisque auctor</span></a></li>
			<li><a href="#"><span>Ut neque metus, sagittis ut blandit at, gravida at urna.</span></a></li>
		</ul>
	</div>
	<div id="sidebar">
		<h2>Latest News</h2>
		<ul>
        	<li>
				<h3>February 27<sup>th</sup> - Dolor sit amet </h3>
				<a href="#">In et urna ac lectus rhoncus accumsan…</a></li>
			<li>
				<h3>March 3<sup>rd</sup> - Lorem Ipsum </h3>
				<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</a></li>
			
			<li>
				<h3>July 7<sup>th</sup> - Gami Suscipit </h3>
				<a href="#">Quisque iaculis nisi tortor. Praesent quis tortor est. Integer eleifend iaculis magna…</a></li>
		</ul>
	</div>
</div>
<div id="footer">
	<p id="copyrights">Copyright © 2009 RTL This.</p>
    
    <div id="footer-links">
		<ul>
			<li><a href="#"><span>Privacy Policy</span></a></li>
			<li><a href="#"><span>Terms of Use</span></a></li>
		</ul>
    </div>
</div>
</div></div>
</body>
</html>

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

<link href="ltr/styles.css" type="text/css" rel="stylesheet" media="all"/>

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

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;}

RTL-This

RTLing Superfish Menu (jQuery Plugin)

Update @01-03-2010 14:00

Update @01-03-2010 14:35

3 Different Ways to RTL your CSS

1- Same file.

PROs:

Cons:

2- Independent Separate Files.

PROs:

CONs:

3- Dependent Separate Files.

PROS:

CONs:

RTLing GD Star Rating Plugin (WP) (UPDATED)

RTLing Twitter's Widget

Thank You

Background Images

1. Calculate the actual distance from the left

2. Add the space to the image

3. Use margin and padding

4. Avoid it :)

RTL-This Request

RTL in Silverlight

RTLing a Hello World WebPage : RTLing

RTLing

Direction

Float

Margin and Padding

Text Align

Background Images

Positions

Fonts

That's it

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

The HTML

The CSS

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