Great Tips. Thank you very much. I'll let you all know how it'll go.
On Tue, Feb 19, 2008 at 3:16 AM, Usamah M. Ali <[EMAIL PROTECTED]> wrote: > Hello Farid, > > Switching an LTR layout to RTL should be straightforward. Vision-wise, > it's typically and literally as mirroring the layout. Every single > left-aligned element should be right-aligned and vice versa. Here's a > list of important things to consider: > > 1) The most important step is switching the direction in the markup. > This is basically done by adding the dir="rtl" attribute to the <html> > element. This is a W3C recommendation that the directionality of web > page should be declared in the markup. > > 2) Since you're using a CSS-based layout, then you should be changing > the directionality aspects of the presentation. Every left-floated > element should be right-floated and vice versa. It's VERY important > here to pay careful attention to adjust the padding and margin values > to match with the direction. If you've an image that is left-floated > and had a right margin, then it should be right-floated and has a left > margin. > > 3) Specifically relating to the above point, you should pay attention > that the shorthand form of CSS declarations for padding, margin is on > the form: top, right, bottom, left. I see this causing confusion to > many beginners. > > 4) Background images should be also inherit the new directionality. If > you something like this: > background: #fff url(image.gif) repeat-x top left; > it now should be: > background: #fff url(image.gif) repeat-x top right; > Unless of course it's strictly intended to be on that exact position. > > 5) Some time you may want to edit the actual graphics of your layout > to make them compatible with an RTL layout. For example, if you a > faux-column background image that is 160px wide and has a drop-shadow > effect on the right, you should use your graphics editor to > horizontally flip it. > > 6) Use text-align: right, instead on all text-related declarations. > > 7) There are some issues and bugs that you'll encounter, but most of > them are trivial IMO. For example, there's no way to support external > links styling in RTL layouts, because almost all browsers fail to > apply correct padding and margin to inline elements. Also, Firefox (to > my surprise :)) has some really annoying and severe bugs in rendering > RTL layouts, one of which affects lists that are set to be displayed > inline, a technique commonly used in constructing CSS-based > navigation. If your site's userbase consists mostly of Firefox users, > you'll have to pay more attention to what techniques you're applying. > > That what came to my mind really now. I'll add to it if I got something else. > > Good luck, > Usamah > > > > > > On Feb 19, 2008 1:32 AM, Farid Jamea <[EMAIL PROTECTED]> wrote: > > Deco (http://drupal.org/project/deco) is a drupal theme which I'm > > thinking about using in my next project. However, I'll be using it > > with a "right to left" language; so, basically I'll need everything > > adjusted for this. I tried to play around with css rules, but > > eventually I gave up :-) > > I was wondering if anybody else has used this theme modified for an > > rtl language? or can give me some general hints to start... > > There is a demonstration page here: http://www.kvw.be/deco/ > > This is my humble try so far: http://peyvasteh.com/ > > Thanks > > > > ______________________________________________________________________ > > css-discuss [EMAIL PROTECTED] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
