RTL This

WordPress Plugin: Admin Locale

nightS — Mon, 06 Sep 2010 08:41:59 +0000

To change the language of a WordPress site, just update the WPLANG constant in your wp-config.php file:

define ('WPLANG', 'ar'); //changes the language of the site to Arabic

But this will change the language of both of your Front End and Back End. Separating these two was not possible if it weren't for this WP plugin by Louay(same author of The RTLer): Admin Locale.

Install the plugin and:

Just go to Settings » General and choose your language.

Note: Of course you'll need to install a localized version of WordPress so you can get the language files. Arabic WordPress can be downloaded from http://ar.wordpress.org

Enjoy =)

Supporting the Arabic Content in English!

admin — Tue, 10 Aug 2010 09:20:00 +0000

I know it might be strange that this site uses English to support the Arabic content online; And I've heard lots of comments about this so let me explain!

How it all started

It all started when a friend asked me to help them with their MyBlog widget they're using in an Arabic(RTL) blog. I checked the widget creator to find that the developers didn't think of RTL websites when they built up this widget. So with small tweaks it was ready and looking great in less than an hour. The developers at MyBlog could have added the RTL support in no time if they only thought about the idea (I don't know if they did it's just a thought not what actually happened). I've also tweaked some jQuery plugins before to work with RTL websites, and sometimes I even had to write plugins from scratch because updating the plugins I found would have taken more time. All of these made me think of starting this site with one goal: supporting the RTL side of the web.

What also encouraged me even more is the number of Arabic blogs in the MENA blogesphere that use LTR themes because of the lack of beautiful and various RTL themes online. I've read as well about many initiatives to support the Arabic content online(which are all great) and I wanted jump in too!
Since I'm not a good writer myself and supporting the Arabic content IS NOT 'writing' online Arabic content, I decided to setup this site as my humble contribution to enriching the Arabic content by making it look good and more appealing in our browsers.

The Target Audience

You might think that Arabic internet users are this site's target audience, well you're not totally wrong. They are part-a big part- of the audience but not the primary target! Whom I'm basically trying to reach are:

Web Developers around the world
Web Designers around the world
Web Developers who have published(or want to) one or more JS plugin, CSS Widget, any CMS or Blogging platform(Wordpress, Drupal, Joomla...etc) theme or any web component that can be used in any website!

YES! Around the world. I don't have the time, money or resources to RTL every single template or plugin out there (at least for now). So my goal is to encourage developers around the world to add the RTL support to their templates, plugins or whatever web application they're developing.

With each template or plugin I RTL, I make sure that the author knows about it. Some of them choose to ignore what happened and others get motivated to add the support to the original application. What the author of the jQuery plugin jCarousel did is my goal. And of course I wouldn't have achieved this result if I wrote the tutorial in Arabic. Reaching a global audience cannot be achieved with other language than English especially if the information is purely technical.

So, No Arabic?

The fact that I chose English as the main language of this site does not mean that having this site in Arabic is not possible. Translating the tutorials is at the top of my to-do list and it will happen eventually.

What do you think?

Do you think I made a mistake? Should I start writing the tutorials in Arabic as the main language? Please share your opinion in the comments' form below =)

WordPress Plugin: The RTLer

nightS — Thu, 22 Jul 2010 13:01:31 +0000

WordPress has this very easy and straight forward logic when it comes to RTLing themes. It simply checks for the direction of the language you're using in your WP installation, if it happens to be 'rtl'(Arabic for example) it includes the stylesheet rtl.css if it exists. This means that RTLing a WP theme is creating this rtl.css file. A detailed tutorial is coming up soon about RTLing WP themes

Louy who writes by the way at Ardroid, WordPress Codex and Global Voices wrote a Wordpress Plugin that creates this rtl.css for you. He called it the RTLer(well of course):

RTLer, is just a simple plugin that generates the RTL stylesheet rtl.css for you from your theme's style.css file.

Check the RTLer out at the WordPress Plugin Directory.

Thumbs up Louy!

RTLing jCarousel (jQuery Plugin)

nightS — Wed, 23 Jun 2010 14:34:26 +0000

jCarousel is a beautiful jQuery plugin. Personally it's one of my favorites! You can set up your caoursel up and running in just one line or two. Even theming it is easy. According to the project's page:

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

The only thing missing in this wonderful plugin is the RTL support. And in this tutorial, it won't miss it anymore.

1. Get the files

First of all, download the latest version of the jCarousel plugin: jcarousel.tar.gz or jcarousel.zip. Extract the downloaded folder. What we'll be working on in our RTLing process are the folders lib(where the JS is) and skins(where the CSS is)

2. Update the JavaScript plugin file

Open the lib folder to find the jquery library minified(latest version is 1.4.2 at the time of writing this tutorial), jqarousel library and the jqarousel library minified. We'll ignore the minified files and edit the jquery.jqarousel.js file(we'll minify it when we're done).

I won't bore you with the details of editing this file, but it's dead simple. It's all about spotting the explicitly declared "left" directional properties and make sure it can be dynamically set/configured.

We'll first start by adding an option to the defaults(line #53) called horizontalDirection and we'll set the default value to be 'ltr',

 
var defaults =
{ vertical: false,
 horizontalDirection:'ltr',
 //rest of default options

Then run a search for the string 'left' in the file. You'll get 3 results; Replace the first and third occurrences(lines #101 and #812) with the below:

(this.options.horizontalDirection=='rtl'?'right':'left')

Line #101 will be:

this.lt = !this.options.vertical ? (this.options.horizontalDirection=='rtl'?'right':'left'): 'top';

And line #812 will be:

 'float': (this.options.horizontalDirection=='rtl'?'right':'left'),

And in the second occurrence(line #682), replace the {'left':p} with:

(this.options.horizontalDirection=='rtl'?{'right': p}:{'left': p})

So it'll be:

 var o = !this.options.vertical ? (this.options.horizontalDirection=='rtl'?{'right': p}:{'left': p})  : {'top': p};

As it shows, we're simply checking for the option we added before setting the property explicitly(which was always a left).

To have CSS control on the new feature, we'll add a class to the container when its initialized named: jcarousel-direction-rtl or jcarousel-direction-ltr (depending on the horizontalDirection option). At line #163, add the below to JQ chain as below:

this.container.addClass(this.className('jcarousel-container'))
.addClass(!this.options.vertical?'jcarousel-direction-'+this.options.horizontalDirection:'')
.css({

And that's about it. Minify the file or pack it to use it on your live site.

3. RTL the skins

The plugins comes with two themes: tango and ie7. The modifications will be minor since they only target the previous and next buttons. The modifications below apply to both themes or any other theme with any theme_name.

The CSS modifications will be simply appending the below to the skin.css file:

.jcarousel-skin-theme_name .jcarousel-direction-rtl {direction:rtl;}
.jcarousel-skin-theme_name .jcarousel-direction-rtl .jcarousel-item-horizontal{ margin-right:0; margin-left:10px;}

/*horizontal buttons*/
.jcarousel-skin-theme_name .jcarousel-direction-rtl .jcarousel-next-horizontal{
background-image:url(prev-horizontal.png); right:auto; left:5px;
}
.jcarousel-skin-theme_name .jcarousel-direction-rtl .jcarousel-prev-horizontal{
background-image:url(next-horizontal.png); left:auto; right:5px;
}

As shown above, we're just overriding the CSS of the theme itself. Values may differ from theme to theme of course but the concept would be the same(Overriding the margin-right to be a margin-left is what matters)

As you've noticed too we're switching the background images of the next and previous buttons. This is to avoid having extra flipped images(we already have them )

...And you're done with the CSS

4. Use it!

Now to activate the RTL support, just use the new option we added:

jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({horizontalDirection:'rtl'});
});

5. Enjoy it :)

That's all :) The source code of the RTLed plugin and two themes are available to be downloaded and a demo is also available to see it in action(links below). I've tested this patch under Firefox, Chrome, Safari, IE7 and IE8. Should you face any bugs or trouble with it, please do add a comment with the issue below to be fixed ASAP.

Demo

Notepad: WordPress Theme RTLed

nightS — Mon, 22 Mar 2010 06:58:21 +0000

We're super excited to release another RTLed Wordpress Theme this week:

Notepad

Author: n.design studio

According to the n.design studio, this theme is:

"Inspired by the iPhone’s Notes.app, the Notepad is a modern WordPress theme with a subtle touch of the sketchy effect.

[...]

Theme's License

This theme is released under GPL.

If you remix, convert, translate, modify, or distribute a copy of this theme, please keep the links/credit in the footer.

"

I really recommend checking the original theme's page, for it has amazing tips and guides about how to customize it(You can even get the PSD there).

Check an RTLed and localized screenshot of the theme below:

Note: This theme is also packaged with its Arabic translation files and it was already i18ed.

Download Theme

Theme's Original Page

Pure Minimal: Wordpress Theme RTLed

Wed, 17 Mar 2010 17:29:48 +0000

Since more than half of the RTL-This visitors want to see RTLed CMS Templates (according to our poll), we have successfully RTLed a free WordPress theme and is ready to be download.

Pure Minmal

Author: Hisham Sadek(@SadekHM) @ Pure Design Co

The name says it all, Pure Minimal. It's neat, organized and suitable for all kinds of blog.

Note: The plan was to just RTL the theme then it was extended to internationalize it and since we reached that point, we localized it(Arabic). Feel free to download it and drop us comments here about any bugs or questions.

Enjoy!

Download Theme

RTLing GD Star Rating Plugin (WP) - Part 2: Fixing Different Icon sizes

nightS — Mon, 15 Mar 2010 22:06:37 +0000

When we RTLed the GD Star Rating Wordpress Plugin, we only added support for the default size of the icons(which is the 24px). In this quick and short post, we'll add support to the rest of the sizes so far: 12px, 16px, 20px, 30px and 48px. And since it's a small post, I'll show you how it's RTLed.

In the previous post, we found the preview of your rating(after you vote) wasn't rendered correctly in RTL:

And the problem was with a background-position value which was set to 0 SOME_VALUE. The fix was simply by turning the 0 into a right(or 100%) and leave the SOME_VALUE as it is. That's why the rtling of this one was simply:

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

Notice the .gdsr-size-24? Yes it's the icon size of your rating block. And as for the y value of the background-position, it's -48 (which is -2*24).

So in order to RTL all of our available sizes we need to copy that line and only change the 24 and double it to get our corresponding value.

Where can you be sure? Go to the css directory in your gd-star-rating directory at /wp-content/plugins/gd-star-rating/css, open the gdsr.css.php file and scroll down to line #161 to find where this formula is generated:

echo $class." .starsbar.gdsr-size-".$size." .gdinner { background: url('".$url."') repeat-x 0px -".(2 * $size)."px; }\r\n";

You'll notice the variable $size is used and the value is multiplied by 2 to get the value.

See? Peice of cake :) So the updated CSS for the sizes will be as follows:

.ratingblock .starsbar.gdsr-size-12 .gdinner { background-position:right -24px!important;}
.ratingblock .starsbar.gdsr-size-16 .gdinner { background-position:right -32px!important;}
.ratingblock .starsbar.gdsr-size-20 .gdinner { background-position:right -40px!important;}
.ratingblock .starsbar.gdsr-size-24 .gdinner { background-position:right -48px!important;}
.ratingblock .starsbar.gdsr-size-30 .gdinner { background-position:right -60px!important;}
.ratingblock .starsbar.gdsr-size-46 .gdinner { background-position:right -92px!important;}

The source code is available to download and the one in the previous post is updated as well.

Enjoy!

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.

UPDATE(16-03-2010 @12:02):Updated fix is available at the subpost next