When a CSS style sheet is included, link
the media query can be specified directly in the tag with the condition that must be met for those styles to be applied:
<link rel="stylesheet" media="(max-width: 480px)" href="moviles.css" />
Is there something similar but for the browser language? Or at least for the case of right-to-left text (eg Arabic)? Something like this:
<link rel="stylesheet" media="(lang: ar)" href="rtl.css" />
Where the style sheet would only contain things like:
.flota-izquierda { float: right; }
.float-derecha { float:left; }
.izquierda { text-align: right; }
.derecha { text-align: left; }
....
I know I could use LESS/SASS to simplify my source code, but the CSS generated on build would still be complex and large anyway, because when expanded it would look like:
[lang=ar] .flota-izquierda { float: right; } [lang=ar] .float-derecha { float:left; } [lang=ar] .izquierda { text-align: right; } [lang=ar] .derecha { text-align: left; } ....
I'd prefer an answer that uses only HTML and CSS, but if that's not an option, JavaScript would also be a possibility to consider.
An alternative way I can think of is using a bit of javascript.
direction
of the<body>
Example:
You can do it like this:
In that case, it would paint the panel yellow when the language is Italian.
Another way to do it would be like this:
And when declaring the panel you indicate the value that it would load in each case:
There are other ways, you can look at the following link:
https://www.smashingmagazine.com/2014/06/css-driven-internationalization-in-javascript/