I made a double language website using angular 4 and ngx-translate. one rtl and the other one ltr. How can I change the direction of text and text alignment on language change?
I cant use because I don't know how to change this attribute in angular.
html:lang(en) h1{
text-align: left;
}
Any way I can target each language in style.css??
What you need to modify in order to convert a left-to-right stylesheet to a right-to-left one:
Change html tag so it becomes <html dir="rtl">. This sets the base direction for the whole document to be right-to-left.
Modify margin values when margin-left and margin-right of some element are not equal. The same applies for padding.
Change the values of position properties: left and right. For example: left: 200px on some element in a ltr document becomes right: 200px in a rtl document.
After that, take a look at the page, and see if you need any additional minor modifications like box-shadow, text-shadow, etc.
You can use CSSJanus to do the second and third steps above for you. However, you will need to do the <html> step yourself.
Visit this page from W3C, which answers the question:
How should I use the dir attribute and related markup to set text direction on structural elements in HTML?