Language Specific Content for Web Apps using CSS :before pseudo

Uses CSS :before pseudo to set language specific content within selected elements. Separate external stylesheets could be created for each language.

by adamdbradley

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<html lang="en">
    
    <div id="lc-group" class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">
          Choose a Language... <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#" class="en">English</a></li>
        <li><a href="#" class="es">Español</a></li>
        <li><a href="#" class="de">Deutsch</a></li>
      </ul>
    </div >
    
    <fieldset class="well">
        <h3 class="lg-header"></h3>
        <label class="lg-name"></label>
        <input type="text">
        <p class="lg-name-help"></p>
        
        <label class="checkbox lg-subscribe">
        <input type="checkbox"></label>
        
        <button type="submit" class="btn lg-submit"></button>
    </fieldset>
        
</html>

CSS

/***** english.css stylesheet *****/
:lang(en) .lg-header:before {
   content: "Example Web App (English)";
}
:lang(en) .lg-name:before {
   content: "Name";
}
:lang(en) .lg-name-help:before {
   content: "Please enter your name";
}
:lang(en) .lg-subscribe:before {
   content: "Subscribe to our newsletter";
}
:lang(en) .lg-submit:before {
   content: "Submit";
}


/***** spanish.css stylesheet *****/
:lang(es) .lg-header:before {
   content: "Ejemplo de aplicación web (Español)";
}
:lang(es) .lg-name:before {
   content: "Nombre";
}
:lang(es) .lg-name-help:before {
   content: "Por favor, ingrese su nombre";
}
:lang(es) .lg-subscribe:before {
   content: "Suscríbete a nuestro boletín de noticias";
}
:lang(es) .lg-submit:before {
   content: "Someter";
}


/***** german.css stylesheet *****/
:lang(de) .lg-header:before {
   content: "Beispiel Web App (Deutsch)";
}
:lang(de) .lg-name:before {
   content: "Name";
}
:lang(de) .lg-name-help:before {
   content: "Bitte geben Sie Ihren Namen";
}
:lang(de) .lg-subscribe:before {
   content: "Abonnieren Sie unseren Newsletter";
}
:lang(de) .lg-submit:before {
   content: "Einsenden";
}

/* 
You could also eliminate the :lang(XX) selectors
and only include the specific external language stylesheet 
you want to apply to the html
*/



/***** Formatting *****/
:lang(en) .en , 
:lang(es) .es, 
:lang(de) .de {
    font-weight:bold;
}
body {
    padding:20px;   
}
#lc-group {
    margin-bottom:20px;
}

JavaScript

$('#lc-group a').click(function() {
    var langClass = $(this).attr('class');
    $('html').attr('lang', langClass);
});