Search code examples
csstexttranslationarabicdirection

I want to Change the Direction of Text in Arabic From Right to Left

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

Solution

  • 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.