Menu
I am doing a multilingual website using HTML, CSS, PHP and JS, so the text might be in English or France according to user input as am pulling the data from DB.
Is there a way in CSS that automatically checks if the text is in English so it will apply the embedded English's font, and if its in France it will apply the embedded France's font.
if I previously know the language i would apply some CSS class to the text HTML element for example <p class="en"></p> or <p class="fr"></p>. But I don't know the language as the text coming from DB.
707
Browsers won't detect the language based on the text, but if you specify it using the correct markup:
<html lang="fr">
Then you can use the language psuedo-class:
html:lang(fr) {
/* your rules */
}
There's no native way to do that with CSS, but your server presumably knows whether it's responding in English or in French. You can therefore do something like what Modernizr does and add a class to the <html> tag:
<html class='french'>
Then you can have CSS rules that work based on that:
.french body { font-family: YourFrenchFont, sans-serif; }
edit — Quentin's answer is similar but better since it uses a standard notation designed for this very purpose. However, this will work in older versions of IE, for those unfortunate enough to have to care.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
