In one of my previous tutorial I wrote about how to build a multi-language website. But sometimes you might want to change the design of your website according to the language of your website. In this post I will show you how you can make design changes to your website based on website language.
How does browser identify website language?
There are basically two ways browsers can identity the language of the webpage content: HTTP Content-Language header and HTML lang attribute.
List of all languages code reference can be found here.
If you don’t specify the language then browsers take the page content to not be of any specific language but search engines try their best to guess the language of the content my reading the characters.
Setting webpage language using HTTP response Content-Language header
Setting webpage language using HTML lang attribute
lang attribute can be used to specify the language of the webpage and also specific portion of the webpage.
Specifying the language of whole webpage.
</html>
Specifying the language of specific portion of webpage.
<p lang="fr"></p>
<!-- this paragraph content is in english -->
<p lang="en"></p>
lang attribute overrides the Content-Language header. More on lang attribute.
There was a time when language meta tag was also used to specify the webpage language but in recent times this tag has been expired and is not recognized anymore.
Design based on language using CSS
CSS selector :lang() can be used to style webpage or specific portions based on the language. This selector comes under CSS2 specification and therefore is supported by modern browsers.
//webpage language is french
header("Content-Language: fr");
?>
<!doctype html>
<!-- overrides content-language and makes the page english -->
<html lang="en">
<head>
<style>
/*paragraph elements in english language*/
p:lang(en)
{
background-color: red;
}
/*paragraph elements in french language*/
p:lang(fr)
{
background-color: yellow;
}
/*all elements in french language*/
:lang(fr)
{
font-size: 40px;
}
</style>
</head>
<body>
<p>This is english text</p>
<!-- overrides the global lang attribute -->
<p lang="fr">Ceci est un texte anglais</p>
</body>
</html>
