Headlines are not aligning right to left with multilingual feature

Ask the community
, ,
1

Question:
All the heading tag are not reflecting right to left alignment setting applied from “translation manager” while all paragraph tags are working fine.

Product:
Wix Studio Editor

What are you trying to achieve:
I am using multilingual feature to translate my client’s website from english to arabic.

What have you already tried:
All the Paragraph tags are working fine when I apply text direction to RTL but not working in case of Headling Tags.

Additional information:
Right to left text alignment via “Translation Manager”

2

Appreciate any responses on this.

3

Have you tried editing the site in Arabic? Like changing the language and then editing it…

4

Hey, Thanks for response.

Yes I did but it won’t change the text direction from right to left. If we manually applied the text direction it will change the English version as well.

Stating “This will affect all the languages”.

Thanks.

5

Try this code, This should work for text. If you need for other elements just add similar code with that element

import wixWindow from 'wix-window';

$w.onReady(function () {
  const language = wixWindow.multilingual.currentLanguage;

  if (language === 'ar') {
    applyRtl();
  }
});

function applyRtl() {
  $w('Text').forEach(textElement => {
    textElement.html = `<div style="direction: rtl;">${textElement.html}</div>`;
  });

 

}
6

Thanks for the reply.

This works for adding RTL overrides to all text element, I also had to add text-align right to it - but there is a bug.

It replaces the AR content with English content on all the repeater components that to with the first child content.

7

Pushing it up for any other recommendation.

8

May you try this once, replace the element IDs-

import wixWindow from 'wix-window';

$w.onReady(function () {
  
  const language = wixWindow.multilingual.currentLanguage;

  if (language === 'ar') {
    applyRtl();
  }
});

function applyRtl() {
  $w('Text').forEach(textElement => {
    textElement.html = `<div style="direction: rtl; text-align: right;">${textElement.html}</div>`;
  });
  $w('#myRepeater').onItemReady(($item, itemData) => {
    $item('Text').forEach(textElement => {
      textElement.html = `<div style="direction: rtl; text-align: right;">${textElement.text}</div>`;
    });
  });
}
9

Thanks, but it doesn’t work.

All the code is getting wrap with Div tag to all the text elements like H1 tags or P.

Further investigating I found that the H1,p tags are getting below class assigned to it, forcing it to be on left;

#comp-ljrkktzs :is(p,h1,h2,h3,h4,h5,h6,ul,ol,span[data-attr-richtext-marker],blockquote){
color: #FFFFFF;
text-decoration: none;
text-align: left;
line-height: 1;
}

//

Tried overriding with Global.css still not doing the job.

It render something like below.
…
#SITE_CONTAINER #main_MF .css-editing-scope #wixui-comp-ljrkktzs :is(p,h1,h2,h3,h4,h5,h6,ul,ol,span[data-attr-richtext-marker],blockquote){
text-align: right !important;
}