QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads CSS For Multi-language Website

CSS For Multi-language Website

lang-css

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

Content-Language: en

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 lang="en">

</html>

Specifying the language of specific portion of webpage.

<!-- this paragraph content is in french -->
<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.

View Demo

<?php
    //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>

Jun 26, 2014Narayan Prusty
requestAnimationFrame TutorialDetecting If Browser Is Online Or Offline Using JavaScript
Comments: 1
  1. Victor
    3 years ago

    Thanks for the tutorial, Narayan. I didn’t know how to do the coding part. However there are quite a few other things a multilingual website requires, maybe you could give some other tips later on? For now, I have been using SITE123 (http://site123.com/) to build my multilingual website. It takes care of all the coding involved and that saves me quite some time.

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • How does browser identify website language?
  • Design based on language using CSS
Related Articles
  • Redirection And Duplicate Content In Websites
  • Create a Crawlable AJAX Website using PHP
  • How to check if someone copied my website
  • Prioritising Downloading Of Webpage Resources
  • Tabs Using HTML And CSS Only
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license