This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Our next available supporter will start replying to tickets in about 4.01 hours from now. Thank you for your understanding.

Tagged: 

This topic contains 3 replies, has 2 voices.

Last updated by Yvette 1 month, 1 week ago.

Assigned support staff: Yvette.

Author Posts
September 2, 2019 at 12:41 am #4493641

barjD

I am trying to:

Implement RTL for the Shahmukhi Punjabi script. When I do so, it sometimes gives a large blank area on the left, or goes completely blank. I notice it does this especially when trying to use inspect element, or when viewing on mobile and trying to switch orientations. The only way to get the site back to looking 'normal' on Shahmukhi langauge, is to change the url to the default language (English), and refresh, then click on Shahmukhi again, to switch the language.

I've tried and tried to fix this, and can't figure out what it is.

I've followed these instructions: https://wpml.org/documentation/theme-compatibility/build-rtl-wordpress-themes/

And I've adjusted all the floats, clears and sometimes changed the text-alignment to right. I did this in style.css, style-front.css (For the home page), and gutenburg style-editor.css and front-end.css

I've added the following code to multiple areas and stylesheets to see if it fixes this issue and it doesn't:

{
direction:rtl;
unicode-bidi:embed;
}

Link to a page where the issue can be seen:

hidden link

To view the site:

demo
demo123

Click on Shahmukhi language (at first it will appear normal)

Note that mostly only occurs when you try adjusting screen sizes when inspecting element on Chrome, or when flipping a device to try to view the site in different orientations. It DOES NOT happen if you try to resize the whole browser by dragging it on your desktop (outside of "inspect element" on Chrome). It can also happen as soon as you start scrolling down, like on this page: hidden link

When the 'blank screen' occurs, sometimes, if you scroll aaaaaaallll the way to the right you start to see the site's elements. Sometimes the gap on the left is small, sometimes very large, and sometimes a huge white screen appears and scrolling right doesn't do anything.

Important to note:

I've installed and adjusted Custom RTL langagues plugin I found on this forum

This is a Genesis theme. Using a forum post I found here on WPML, I set up a body style for the languages, and I'm using both .pa_sh and .rtl for the styling of rtl

I found this forum when googling but not sure how it applies here (if it's useful or not): hidden link

https://stackoverflow.com/questions/47608314/strange-white-space-when-changing-wordpress-to-rtl

I expected to see:

A site that is properly aligned and does not have a blank space on the left before showing RTL content

Instead, I got:

See above

September 2, 2019 at 11:18 am #4496499

Yvette
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/Madrid (GMT+02:00)

Hello

It´s been my experience with RTL that the support for this comes directly from the styling of the theme.

If you deactivate the WPML plugins and set the site language to be your RTL langauge, do you still have all these issues with white spaces?

What if you also deactivate all plugins and only have your theme active with the RTL language set as the site language?

September 10, 2019 at 2:38 am #4540973

barjD

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

That said, I think this may be useful to anyone else trying to set up an RTL language on Genesis, for only one translation and not the whole site.

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.

However, much advice out there tells people to set up a separate rtl.css file and call it in the theme with wp_enqueue

Through much digging, I found that this might not be necessary if you are only setting up one translation as an RTL in Genesis (and maybe other themes too). Feel free to correct me if I'm wrong.

First I installed the Custom RTL language plugin mentioned on these posts and changed the language code accordingly: https://wpml.org/forums/topic/adding-multiple-new-custom-rtl-languages/
https://wpml.org/forums/topic/added-rtl-language-that-doesnt-exist-in-wpml/

Then, I went with the method I found somewhere on this forum that said to create a custom body class for each language by adding the following code to functions.php:

// 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');

Then, I set up CSS rules in the 'regular' style.css for the theme (and the style-front.css, and all relevant Gutenburg stylesheets) for .pa_sh and .rtl classes (this was the language code for the Shahmukhi script to write the Punjabi language, and sometimes the .rtl body class worked better, so I did both for all instances). I used the following guides to add corrected styles specifically for RTL display:

https://wpml.org/documentation/theme-compatibility/build-rtl-wordpress-themes/

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

It all appeared fine without the dedicated rtl.css file (that is, using only a body class), EXCEPT that when using Inspect Element on Chrome, or on mobile, especially when switching orientations from portrait to landscape (or visa versa), there was a HUGE blank area to the left. It was 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.

So, after much digging as mentioned above (and explained below), based on my body class set set up, I add this line to the style.css file:

.pa_sh .site-container, .rtl .site-container {
	overflow-x: hidden; /*added to prevent large gap on left for shahmuki script on some screen sizes */
}

--->your class name will be different if you have a different language code set up!

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.

Side note: the following solution for Genesis themes did not work for me:

https://wpml.org/forums/topic/change-layout-based-on-ltr-or-rtl-languages/

But, it gave a clue that something is 'too big' for the screen.

However, instead of searching based on RTL 'blank space' and similar keywords on google (which got me nowhere), I tried to search for what would create a huge space in the first place, on any responsive site. That led me to this forum which gave the big clue:

https://stackoverflow.com/questions/16704893/twitter-bootstrap-white-gap-on-right-side-of-page

From there it was trial and error on the site elements to see which one would respond.

September 10, 2019 at 10:49 am #4544321

Yvette
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/Madrid (GMT+02:00)

Wow - thank you so much for sharing what you have been able to learn from this experience and contributing to the knowledge community.

I am sure other supporters and clients will appreciate this!