Changing an element's CSS with respect to different languages

Is there a way to use CSS to style text depending on 开发者_JAVA技巧the language?

For example the font Tahoma is widely used for Arabic text, but its size is very tiny when it comes to English text with the same text size.

So, when we have some English text within an Arabic text, is there a way to automatically detect the change in text language and then use a bigger font size for the English text that is withing the Arabic one.

Thanks.

CSS doesn't have a mechanism to do this, but you could try your luck by iterating over every text node in JavaScript and testing for characters A-Z insensitively (match(/^[a-z]+$/i) (though this doesn't guarantee the text will be English).

If true, you could attach a class to the parent element, something like appears-english and then have CSS like .appears-english { font-size: 120% }.

Update

As per request, here is some code...

JavaScript

var divs = document.getElementsByTagName('div');

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
  var div = divs[i];

    if (div.firstChild.nodeValue.match(/^[a-z]+$/)) {
       div.className += 'appears-english';
    }  

}

CSS

.appears-english {
   font-size: 170%;  
}

jsFiddle.

You can see from the fiddle it doesn't match if there are numbers - you can make it match numbers, letters and underscore by changing [a-z] in the regex to \w.

BTW, if you want to update English characters within an element that also contains Arabic characters, you will need to use replace() and wrap them with span elements, of which you then add appears-english to.