CODEWITHSUNDEEP
csstexttranslationarabicdirection
Mohammad Usman
Mohammad Usman

Reputation: 3

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

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

Upvotes: -2

Views: 3966

Answers (1)

Rene van der Lende
Rene van der Lende

Reputation: 5291

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.

Upvotes: 0

Related Questions