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 ing from DB.
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 ing from DB.
- how do you know the language ? using php i guess ? – Youness Commented Aug 7, 2014 at 14:13
- 1 No, there is no way for CSS to automatically know what language text is. Why can't you use a specific css class? It only has to wrap all user generated content. – Reiner Gerecke Commented Aug 7, 2014 at 14:13
- i agree but with @ReinerGerecke but if you can now what language with php (a get variable containing the value "en,fr,ar....." ) then i might have a solution for you – Youness Commented Aug 7, 2014 at 14:14
- The language is called "French," not "France." :-) (Or arguably, the language is called Français.) – T.J. Crowder Commented Aug 7, 2014 at 14:14
- Sorry of bad English, but I don't know the language. But I know it should be English or France, 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>. – Hadi.M Commented Aug 7, 2014 at 14:15
2 Answers
Reset to default 8Browsers 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.