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.

This thread is resolved. Here is a description of the problem and solution.

Problem: The user was having some Arabic content not directed correctly as RTL. Solution: There is caused by a generated CSS from Divi, which changes the direction to LTR. We can scope the blocks to Arabic pages we can style the content as RTL. See https://wpml.org/forums/topic/divi-theme-rtl-ltr-does-not-work-properly/#post-3724041

This topic contains 7 replies, has 2 voices.

Last updated by carmenT 5 months, 1 week ago.

Assigned support staff: Jamal.

Author Posts
May 1, 2019 at 7:28 am

carmenT

Hello guys, I am working on a website with English (LTR) as the main language and Arabic (RTL) as the 2nd language.
And I seem to be unable to avoid that my user interface changes to Arabic, too as soon as I work on the Arabic pages. But I need it to be English only. The same as my WP user language and the site's main language. Divi's "Disable Translations" does not change anything whether it is on or off :((( So I think the String Translation Plugin is messing with my settings.

And I cannot properly implement Arabic text on some pages. It always gets changed to LTR after copying it into the text module. But it has to be RTL of course!
You can see on the screenshot attached that the sentences end on the wrong side. The dot has to be on the left of course.

I am happy to send you a screen video in a private message field.

I am trying to: add Arabic content into the text field.

Link to a page where the issue can be seen:
hidden link
I expected to see: RTL text

Instead, I got: LTR text

I really need help with this – I cannot work on that website like that at all!

May 1, 2019 at 11:41 am #3717785

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello,

Thank you for contacting WPML Support. I will be glad to help with this.

I suspect, it is a cache issue. When I visited the provided page, the dots were aligned correctly RTL. See the attached image. Please clear the cache and try again.

Regarding the user interface language issue, I also think it is a cache issue, once you clear the cache it will be resolved. If the cache was disabled, please reenable it and clear the cache then disable it again.

Best regards,
Jamal
WPML Support

May 1, 2019 at 12:42 pm #3718091

carmenT

Hi Jamal, yes they seem correct looking only at the front end - because I have actually forced them to look like that. You can clearly see that if you would be so kind to log in. It has nothing to do with my cache.
<p dir="rtl" class="p1">زيادة تمثيل الفئات المهمشة وتحديداً النساء في الهيئات القيادية.</p>
As soon as I place the text only the direction changes again.

But this should not happen. Please use my login details and check the page text modules.

May 1, 2019 at 3:37 pm #3718775

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello,

I think that the dot is written in the correct part(the end) of the sentence. See the attached image.
Can you please test to copy/past in other places to check. In an MS Word document or a Google Docs document, maybe you can try in google search to see if the dot is written at the end or no.

Maybe I still don't understand the issue the same way you do. Please elaborate further. I am activating a password private reply if you need to share a screencast.

Best regards,
Jamal

May 1, 2019 at 3:45 pm
May 1, 2019 at 4:15 pm #3718865

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello,

thank you for the screencast, it seems that the private box did not work, I'll make it private.

I think that this is only happening in your computer, as you can say when the text is copied in the "Raw/النص" tab, it is correctly aligned but not in the "Preview/المرئي" tab. And not in the preview, it does not happen for me, please see this screencast
hidden link

Can you try to create a new WordPress install without WPML and set the site language to Arabic. Use Divi and let me know if you have different behavior. I suppose you will have the same.
Can you also try with a different browser? Or in the same browser, but settings a different language for the browser? I currently have English for my browser language.
I remain at your disposal.

Best regards,
Jamal

May 1, 2019 at 4:27 pm #3718911

carmenT

Hi Jamal, as soon as I delete <p dir="rtl" class="p1"></p> in my plain text field the dot moves to the left. This happens to all text on this particular page. And the funny thing is this is the only page with this problem. The other pages seem to be fine. This is why I cannot compare this issue to other Divi installations or browsers.
It seems like something is "telling" the text of this particular page to be LTR. Maybe something went wrong when the Translation was generated via the Advanced translation manager?

May 2, 2019 at 11:17 am #3724041

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello,

Thank you for your feedback, I understand the issue better know.
After investigation it seems that this issue is caused by the following CSS code, see the attached image(divi-ltr.png).

/* Equalize Column Heights */
	.et_pb_row.et_pb_equal_columns,
	.et_pb_row_inner.et_pb_equal_columns,
	.et_pb_section.et_pb_equal_columns > .et_pb_row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		direction: ltr;
	}

A quick workaround is to implement the following code in WPML->Languages->Language switcher options->Additional CSS. I already implemented it as you can see in the attached image(wpml-css.png).

Then I removed <p dir="rtl" class="p1"></p> from the first column and the issue seems resolved.

html[dir=rtl] .et_pb_blurb_description {
	direction: rtl;
}

Let me know if this is a viable solution for you!

Best regards,
Jamal

May 9, 2019 at 3:04 pm #3777493

carmenT

Hello and sorry for the late reply. The problem is still there unfortunately it also affects the other text parts on this page. Please see the screenshots below.