RTL when translating to Arabic with TranslatePress
Hello,
Im trying to translate my client site juridikservice.se to arabic using TranslatePress. I've noticed that the RTL-customization will be quite tricky, mostly because the brizy text field act unpredictable in combination with TranslatePress automaticly switching direction to RTL when changing to arabic. Let me explain:
First of, i have a textfield as left aligned in the editor and when the previewing in arabic it is still left aligned (even though everyting else is changing to rtl)
But then i switch to this alignment in brizy
which makes the text also align to the left in the editor, but when previewing in arabic now the text aligns to the right as it should.
This is very confusing and I don't want to use this alignment option in every text of the site.
What is the correct way to adapt a website to RTL together with TranslatePress?
-
Hi Kristoffer,
Thank you for reaching out.
Please try adding the following CSS and see if this helps:
/* Force RTL layout when Arabic is active */
body.rtl {
direction: rtl !important;
text-align: right !important;
}
/* Fix Brizy text alignment */
body.rtl .brz-rich-text,
body.rtl .brz-rich-text p,
body.rtl .brz-rich-text div,
body.rtl .brz-rich-text span,
body.rtl .brz-rich-text li {
direction: rtl !important;
text-align: right !important;
text-align-last: right !important;
}
/* Prevent justified text */
body.rtl .brz-rich-text * {
text-align: right !important;
}
/* Ensure sections and rows follow RTL */
body.rtl .brz-section,
body.rtl .brz-row,
body.rtl .brz-column {
direction: rtl !important;
}You can add this in WordPress by going to Dashboard > Appearance > Customize > Additional CSS, paste the code there, and click Publish.
This will ensure Brizy text automatically aligns to the right when Arabic (RTL) is active without needing to change each text element.
Best regards,
Ariel H.0 -
Thank you, works great!
0
Please sign in to leave a comment.
Comments
2 comments