-2

Anybody can help me out? I am using webflow for one of my client. The Website uses Weglot to translate text from arabic. The problem I am facing is the text direction issue. When a Plugin translates the text from English to arabic, It does not change the direction that should be from right to left for arabic.

I checked the Inspector element and found the problem. The style should be inherited from Body tag which is not happening. Can anybody know to fix this?

I want to change the text direction in arabic. The plugin uses html[lang="ar"] to make changes in arabic.

Images: Image 1 Image 2

InSync
  • 4,851
  • 4
  • 8
  • 30
Mohammad Usman
  • 3
  • 3
  • 1
    Please share the relevant (*minimal*) code in your question in order that we can reproduce the problem, *pictures* of code are of no use whatsoever, are actively inaccessible, and serve to impede those trying to help (nobody wants to transcribe code from an image). Please, see the "*[mcve]*" and "*[ask]*" guidance. – David Thomas Apr 16 '23 at 11:39

1 Answers1

0

The easiest way to go is to not define any default text alignment at all as HTML automatically adjusts the document default alignment based on the direction property and/or dir attribute. This automatically means that when the text-align property gets specifically defined in CSS, its inverse behavior will have to be defined as well.

Simple rule of thumb: don't define any text alignment and search for exceptions to correct as not all HTML tags behave as expected.

However, with <html lang="ar" dir="rtl"> you can test for the [dir] attribute in CSS, like

html[dir="ltr"] .body-display { text-align: left  }
html[dir="rtl"] .body-display { text-align: right }

Alternatively, for on-the-fly use throughout the document:

[dir="ltr"] { text-align: left  }
[dir="rtl"] { text-align: right }

Specific cases requiring manual definition of text alignment will require manual testing for [lang] and/or [dir].

MDN reference: 'dir' attribute.

Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25