Adjusting styles based on a language
Published
•1 min readA
I am a web developer from Navi Mumbai.
Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud.
Founder of nerul.in and gaali.in
Traditionally, language HTML files would be stored separately and load language specific CSS files.
But now we just store the language strings separately and programmatically print the language strings within the same HTML file.
Very often I find myself adjusting the style attributes a little here and there for different languages just so that it fits nicely inside a container or a navigation bar and looks the same across all languages.
Its actually easy to set style attributes based on the language attribute, lang in the HTML element.
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html[lang="en"] h2
{
color:black;
}
html[lang="hi"] h2
{
color:red;
}
</style>
</head>
<body>
<h2>The quick brown fox jumps over the lazy dog</h2>
</body>
</html>
This Example doesn’t change the text colour using JavaScript. JavaScript was used to change the lang attribute value in the html element.
