Изменение CSS элемента относительно разных языков - PullRequest
Новая
       26

Изменение CSS элемента относительно разных языков

3 голосов
/ 01 марта 2011

Есть ли способ использовать CSS для стилизации текста в зависимости от языка?

Например, шрифт Tahoma широко используется для арабского текста, но его размер очень мал, когда речь идет о тексте на английском языке с таким же размером текста.

Итак, когда у нас есть некоторый английский текст в арабском тексте, есть ли способ автоматически обнаружить изменение в текстовом языке, а затем использовать больший размер шрифта для английского текста, который находится внутри арабского.

Спасибо.

1 Ответ

4 голосов
/ 01 марта 2011

У CSS нет механизма для этого, но вы можете попытать счастья, перебирая все текстовые узлы в JavaScript и проверяя символы AZ без учета чувствительности (match(/^[a-z]+$/i) (хотя это не гарантирует, что текст будет английский ).

Если true, вы можете присоединить класс к родительскому элементу, например, appears-english, а затем использовать CSS, например .appears-english { font-size: 120% }.

Обновление

Согласно запросу, вот код ...

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 .

Из скрипта видно, что он не совпадает, если есть числа - вы можете сделать так, чтобы он совпадал с числами, буквами и подчеркиванием путем изменения [a-z] в регулярном выражении на \w.

Кстати, если вы хотите обновить английские символы в элементе, который также содержит арабские символы, вам нужно будет использовать replace() и обернуть их элементами span, из которых вы затем добавите appears-english к.

...