Creating universal solutions is the goal, but in the global internet we all have different needs. Some languages need more space than others for all the characters to convey the message. A good example of this is the English phrase “Gifts and Apparel” in German “Geschenk- ind Bekleidungsartikel”, 32 characters compared to 17 for english, almost twice as many. As you can imagine there is a need for more space.
The goal is to create universal solutions that are flexible and scalable. But sometimes it just doesn’t scale as smoothly as we would like. There is a need for a unique language solution, enter the pseudo class :lang(). Lets say you have a drop down, in English it only needs to be about 200 pixels wide, in German it needs to be about 400 pixels wide.
HTML
The language attribute is applied to all the children of the parent item. Below is an example of the HTML code.
<html lang=“de”>
<-- All children items will be identified as German langue -->
</html>
<div lang="de">
<-- All children items will be identified as German langue -->
</div>
List of ISO lang codes
CSS
Use the lang attribute as the hook and targeting specific elements to create rules based on language. Below is an example of the CSS pseudo class to achieve this.
.className:lang(de) {
width:400px;
}
Browser support
- Chrome
- Safari
- Firefox
- Opera
- IE 8+
- Android
- iOS
:lang() is a recommendation of the CSS Level 2 Revision 1 spec and originally recommended as a part of the CSS Level 2 spec.
