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
entode(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.
(Source: twitter.com)
