RTL Language ( Multi Language website )

jawabri

hi, thanks for this amazing theme ,
I have a website with 2 language ( RTL , LTR ) arabic and english

when I create the arabic pages with WPML plugin , the menu appearing in the right way after the latest updates , but still the page damaged !!

please check my website here : http://bloozar.com/

Air

Heloo there:-)

What you mean by damaged? It looks like your content is empty on Arabic version. Have you filled content in these translated pages?

Btw. Your page points to files on your localhost http://127.0.0.1/trust/wp-content/uploads/2015/12/logowhite.png and you should probably fix this :-)

With kind regards.

jawabri

Hi ,
thanks for your quick reply,

my friend I have the same content in english , see how is the background look like ,, !! everything is floating to the left

Air

Now I see content. Strange that it didn't display earlier.
I think you experience same issues as other users when they try do RTL with visual composer
See this topic
http://support.apollo13.eu/discussion/3662/starting-building-a-site-by-modifying-the-rtl-demo#latest

It looks that visual composer author still didn't fix it.

If you will use standard content without Visual composer it will work fine.

With kind regards.

Air

You can also not use full width rows, and then it should be also OK till they fix it.

jawabri

I tried the custom ccs , and it is working perfectly ,, thanks a lot for your support

Air

That is great to know. I have poked VC authors about this issue, maybe they will do something with it.

With kind regards.

Air

There is answer from VC author http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431/comments?page=554&filter=all#comment_12148270 and they say that they have yet work to do to make it work good with RTL languages.
So we wait:-)

With kind regards.

levaslu

Hello! I need your help:(
When I switch to Hebrew version of the site there is some strange behavior wit row image elements. The images alignment is shiftы to left side of the page.
I tried to maintenance it with various of settings including your suggestion of putting this CSS in the VC:

body.page .real-content{
direction: ltr;
}
body.page .real-content .vc_row{
direction: rtl;
}

But in than images cuts and aligned to the right side.
Can you see it? Maybe you have some experience how to fix it. The page i'm writing about is http://test.levslutsky.com/he/the-photographer-lev-slutsky/
The same issue occurs in this page
http://test.levslutsky.com/he/צרו-קשר-עם-לב-סלוצקי/

Air

I have just checked and CSS you cite, is working fine on your site. Maybe you have some errors in your custom CSS and that is why inserting it doesn't work. Try on empty Custom CSS and add mentioned CSS.

With kind regards.

levaslu

Hi but i had added it on empty CSS to and doesn't worked. You can see the problem on second-row image alignment. It's appears like was cut on the right side http://test.levslutsky.com/he/the-photographer-lev-slutsky/

Air

Well I don't see it. Can you post me screen shot of what you see, and mark problematic place?

With kind regards.

levaslu

Hello. I have flipped the images horizontally and it looks better. But the bottom text position steel has this problem. I attach here screenshots to illustrate the problem where images are not flipped to the right.
By the way - do you know if there is a possibility to define "contact info" widget to be different layout in RTL languages? If I put a phone number in the widget that on the sidebar the Hebrew version will be flipped. Now it looks "ok" but it's not if I want to edit numbers.

levaslu

Text alignment in Hebrew version
http://test.levslutsky.com/אודות-צלם-אירועים-לב-סלוצקי/

Air

levaslu said: I have flipped the images horizontally and it looks better.

Good decision, cause these are content specific images, so there was no magic to be done here. They behaved proper.

levaslu said: But the bottom text position steel has this problem

I see your screen shot. Please try resize window and check if issue will remain, cause it doesn't for me.
Visual Composer is counting where is header and try to center according to these calculation. They can get messed when resize events are fired.

levaslu said: By the way - do you know if there is a possibility to define "contact info" widget to be different layout in RTL languages? If I put a phone number in the widget that on the sidebar the Hebrew version will be flipped. Now it looks "ok" but it's not if I want to edit numbers.

Can you show me what you mean when it doesn't look as you wish?

With kind regards.

levaslu

Hi. Regarding alignment, i checked one more time & it seems to be the problem there if the window is not resized to the full or normal screen. indeed, when resized it shows equal. But I don't think that it is good. People use to work with split windows or to resize them. I use 15.4-inch (2880 x 1800) retina display. Screenshot attached.
As well I attach screenshots to illustrate the problem with RTL inContacn form widget text. It looks like can't be written independently in each language so in Hebrew(think in Arabic as well) it's appears flipped.

Air

Contact form:
I see you have used hyphens to get around this:-)

However you try such custom CSS for this one:

body.rtl .widget_contact_info .phone {
    direction: ltr;
    text-align: right;
}

About alignment:
I don't think I can do anything about it, as this is pure issue with Visual composer, and as was said in this topic Visual Composer is still not RTL ready. It is nice we could make it work proper with such nice CSS trick.
Anyway alignment looks good after page reload, and this is most important.

In your case I would be more concerned about putting white text, on photos with white places in background.
To be honest i have big difficulties to read these texts with out struggling. I would add there some background or overlay on these photos on your place.
Even if you position this text on your screen you can't be sure that it will have same position on other resolutions.

With kind regards.

levaslu

Hi. Thank you very much for your help & suggestion regarding using fonts on photos. It's very useful info.
Your solution:
"However you try such custom CSS for this one:

body.rtl .widget_contact_info .phone {
direction: ltr;
text-align: right;
}
"
works just fine. Thank you!

By the way, maybe it can be fixed same/some way the alignment of icons in menu & menu widgets?
When the menu change it's position to right -in Hebrew version- icons o not flips & native language reader feels discomfort look on it.
I attach to screenshots to illustrate it.

Air

Same as numbers or letters don't flip, this "font icon" will also not flip just like that. I think like in other icons, you should look for something more fitting.

I can only think of one CSS solution - that is to try to flip it with CSS 3D transformation, but it sounds like too much hassle for such small things, and it may look distorted.

With kind regards.