Right to left language support (Urdu)

[Wbizniz]

I want to change my genesis Language to urdu (Right to left writing pattern) I want to flip it horizontally completely so that each and every thing start from Right to left what should I alter in code to achieve this..? or if any plugin can help..? thanks in advance.

http://demo.studiopress.com/news

[Davinder Singh Kainth]

You need to generate rtl version of existing style.css file. It basically reverses left elements to right and vice versa.

Refer - https://codex.wordpress.org/Right-to-Left_Language_Support

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[joycegrace]

I'm curious if this would work with a body class only?

I found on the WPML forums that they have a Custom RTL language plugin as well as advice to use this code in functions.php to set up a body class with the language code (since the whole site is not meant to be RTL, just one of the translations is)

// add lang code in body class
function wpml_lang_body_class($classes) {
$classes[] = ICL_LANGUAGE_CODE;

return $classes;
}
add_filter('body_class','wpml_lang_body_class');

I have set up CSS rules in the 'regular' style.css for the theme (and the style-front.css) for .pa_sh and .rtl classes (for the Shahmukhi script to write the Punjabi language). I used this guide:

How to build RTL WordPress themes

And this:
https://codex.wordpress.org/Right-to-Left_Language_Support

It all appears fine without the rtl.css file (using only a body class), EXCEPT that when using Inspect Element on Chrome, or on mobile, especially which switching orientations from portrait to landscape (or visa versa), there is a HUGE blank area to the left. It is so big that the site appears blank. It is not obvious at all that a user has to scroll, and scroll, and scroll to the right to see the site.

Sometimes this 'gap' on the left is smaller than at other times.

I haven't been able to trace a pattern for the size of the gap. It changes a lot - sometimes it doesn't happen, sometimes it's a small version of the screen...

I left WPML this ticket: https://wpml.org/forums/topic/rtl-blank-space-when-screen-size-changes-or-using-inspect-element-in-chrome/

Most of my searches seem to point to a problem with the theme. But I can not pinpoint the issue. I'm using Infinity Pro.

This did not work:
https://wpml.org/forums/topic/when-switching-language-from-english-to-farsi-page-width-increases-dramatically/

Does anyone have any ideas?

Is creating a whole separate rtl.css file completely necessary?

What would normally create this huge gap on special screen sizes or when changing the screen size, after loading the page when it appears properly?

Note: I am NOT trying to translate the theme, or anything in the back end of WP dashboard at this point, so this would not apply, I guess?: https://studiopress.community/topic/is-there-any-guide-to-understand-how-to-translate-genesis-themes-and-plugins/

---

Find me at Joyce Grace (http://www.joycegrace.ca)

[joycegrace]

Ok for now I think I found the problem, but it may still require more testing.

The fix was to add

overflow-x: hidden;

On the following class:

.site-container

This may have worked on my theme because it has the 'fade up' effect. It is a newer Genesis theme.

Actually I used

.pa_sh .site-container, .rtl .site-container {
	overflow-x: hidden; 

--->your class name will be different if you have a different language code set up based on the solution above of adding a body class!

This line of CSS hides the overflow only on the RTL and Shahmuki pages, but keeps the theme intact per usual, for the LTR languages, juuuust in case.

---

Find me at Joyce Grace (http://www.joycegrace.ca)

[Author]

Posts