Adjusting styles based on a language

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.

Adjusting styles based on a language

Comments

More from this blog

@supports API

Using the :has selector to display full with of a container

first-of-type

Text Input Validation & Error without JavaScript

Mega Menu using CSS only

Command Palette

Comments

More from this blog