Recently Vasilis van Gemert authored a very useful article on Smashing Magazine about Logical Breakpoints For Your Responsive Design. The article touches on how it you could theoretically produce different reading lengths and breakpoints for different languages. To support this idea Vasilis introduces an insightful little tool showing how the contrasting word length between different languages influences reading length.
This tool is worth bookmarking if you are designing multi-lingual layouts. You can take it a step further by responding to the user’s language using CSS.
The language of an HTML document is defined by the ‘lang’ attribute in the ‘<html>’ tag at the root of the document. This gives us a hook that we can use in CSS to apply globally to the document.
Imagine a scenario where we had a blog that has a language switcher between English and German. Generally German words are longer than English so we might want to set the reading length on the German version of our article to a slightly wider value.
The CSS might look something like this:
article {
max-width:33em;
}
:lang(de) article {
max-width:40em;
}
As soon as the ‘lang’ attribute is changed from the default ‘en’ to ‘de’ (through a mechanism like a language select dropdown) the width of the ‘<article>’ changes to a wider reading length making a (potentially) easier read for our German readers.
You could extend this technique to tweak the rest of the layout to adapt to the changing line-length. The fact that the language attribute is at the root of the document makes for a nice and clean base to apply global rules that respond to different languages.
