Change Font Size Based on Language

Question

So i have read a few suggestions with the css language tag, but it seems like everything requires placing the language in the tag in advanced. I am not able to change the html tags around the korean language, it has the same h1 tag as the english. It is because it is a translated version of the same website.

I want to have a different font and font size for the korean version than the english. Can i do this by just knowing the language? I found some other questions dealing with the unicode range that used @font-face { } , for one, I cant figure out what unicode range Korean is, i have tried looking at all the documentation but i just dont comprehend how unicode ranges are calculated and written. Also, i was hoping there was an option like,

h1{
unicode-range: korean;
font-size: 10px;
}

h1{
unicode-range: english;
font-size 20px;
}

Can this be done?

Thanks!

Answer 1

In your case the lang attribute is set on the html tag, so you could style all the elements you need based on that using the rules:

html:lang(en) h1{
    font-size: 20px;
}

html:lang(ko) h1{
    font-size: 10px;
}

Be careful, though, the the :lang pseudo-class is supported only in IE8+. Should you need support in IE7+, your best bet is going for the syntax of this type: a[lang="en"].

Answer 2

You could use the CSS :lang pseudo class if you set the lang attribute in your HTML to alter the style. For example see demo or the following code:

CSS

:lang(en) {
    font-size:20px;
}

:lang(fr) {
    font-size:10px;
}

HTML

<p lang="en">Lorem</p>
<p lang="fr">Lorem</p>