Skip to content Skip to sidebar Skip to footer
Home / Angular / Css / Javascript

Change Style Sheet When Different Language Is Selected.

Post a Comment
I have a angular 6 application which supports standard Left to write content. I need arabic support so I did some research and got to know about Bootsrap RTL. I need to know if i

Solution 1:

You could change the lang attribute of the root element (<html>) via JS and set in css the rtl direction based on that attribute, so there's no need to load another resource, e.g.

JS (switch language)

document.documentElement.setAttribute('lang', 'ar');

CSS

body { 
   direction: ltr;
}

[lang="ar"]body {
   direction: rtl;
}

Solution 2:

Natively browser supports dir attribute to div elements, so you could do the direction to be modified via an dir attribute.

<div dir="ltr">Hello World. This gets displayed fromlefttoright</div><div dir="rtl">Hello World. This gets displayed fromrighttoleft</div>

Pass the dynamic variable from ts file for angular application,

<div dir="[direction]"></div>

set the direction value to ltr/rtl based on the configuration from angular application

Post a Comment for "Change Style Sheet When Different Language Is Selected."