Стилизовать текст для использования разных шрифтов для разных языков?

Question

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

Допустим, у меня есть такой абзац:

الإنجليزية.Предыдущее предложение на арабском языке, но это на английском языке.

Я хочу, чтобы арабское предложение отображалось шрифтом X, а английское предложение - шрифтом Y.

Есть ли способсделать это, не назначая каждому набору текста отдельный стиль CSS на основе знаний сервера о его языке, т. е. заключать каждое предложение в другой класс CSS?

Спасибо

Answer 1

Невозможно установить разные шрифты для разных языков без различения фрагментов текста по языку на уровне разметки. Обычно вы используете теги <span> с атрибутом class, атрибутом lang или обоими. Атрибут lang является логическим выбором, тогда как styleling работает несколько более надежно при использовании class (поскольку селекторы class поддерживаются всеми браузерами с поддержкой CSS).

Обратите внимание, что вам может понадобиться такая разметка и для других целей. В случае арабского текста на страницах с преобладанием английского языка обычно лучше использовать разметку bdi вместе с атрибутами lang=ar и dir=rtl, а также bdi { unicode-bidi: embed } в CSS, чтобы справиться с направленностью. (В вашем сообщении текст на арабском языке в начале, то есть справа, смещен в начале, то есть справа из-за проблем с направленностью.)

Можно использовать код на стороне клиента, который запускает некоторую программу угадывания языка и соответствующим образом модифицирует DOM, но это ненадежно и несколько сложно.

Как правило, все копии текста в документе должны быть одного шрифта. Это может быть трудно обработать (нет действительно всеобъемлющего шрифта, который можно успешно использовать на веб-страницах), и на некоторых языках могут потребоваться специальные шрифты на практике. Но есть несколько разумных шрифтов, например, английский и арабский.

Answer 2

Юкка прав, вы не можете различать языки автоматически. Вам может потребоваться установить атрибут lang, если это необходимо. У вас есть следующие варианты:

• Использовать CSS2: псевдо-селектор lang;
• Используйте псевдо-селекторы CSS3: ltr или: rtl, чтобы установить шрифт на основе направленности текста (на самом деле не обязательно, лучшая идея);
• Использовать CSS3: псевдо-селектор скрипта. Из того, что я вижу, вы, вероятно, ищете это, на самом деле.

Фрагмент кода для первого решения выглядит следующим образом:

body {
  font-family:Palatino,serif;
}

:lang(ar) {
  font-family: "Traditional Arabic",serif;
}

Что касается второго варианта, я уже сказал, что это не такая уж хорошая идея. Это не так, потому что многие языки пишутся слева направо или справа налево. Вы, конечно, не хотите использовать шрифт «Традиционный арабский» для текста на иврите. Я упомянул эту опцию, потому что она может помочь вам решить другие проблемы.

Для последнего:

:script(Arab) {
  font-family: "Traditional Arabic",serif;
}

Внешние ссылки

• Статья W3C i18n о переключателе языков
• Презентация Гуннара Биттерсманна из Многоязычная веб-мастерская в Лимерике - вот откуда берутся эти фрагменты кода (я мог легко создать их самостоятельно, но решил обратиться к эксперту).

Answer 3

Функция

ниже обернет различные языки в класс span .en и .ar CSS с соответствующим шрифтом

Answer 4

Предполагая, что один из языков не включает глифы другого, вы должны иметь возможность использовать запасные варианты семейства шрифтов.Неанглийские шрифты иногда включают английские глифы, поэтому в качестве основного языка выберите английский, а в качестве запасного - арабский.Когда текст отрисовывается, он будет использовать английский шрифт, а когда он встречает глиф, которого нет в английском шрифте (то есть любую арабскую букву), он будет использовать арабский шрифт.

Примерно так:

@font-face {
  font-family: 'your_arabic_font';
  src: url('../fonts/arabic_font.ttf');
}

@font-face {
  font-family: 'your_english_font';
  src: url('../fonts/english_font.ttf') format("opentype");
}

p {
  font-family: 'your_english_font', fallback, 'your_arabic_font';
}

Надеюсь, это поможет.

Answer 5

Если вы используете кодировку UTF-8, содержимое должно отображаться в правильной кодировке, но все равно будет использоваться тот же шрифт.

Вам нужно будет назначить класс CSS для элементов, содержащих арабский. CSS не может обнаружить это самостоятельно.

Вы можете сделать это, используя JavaScript для выполнения этой задачи во время загрузки, проверяя элементы и определяя используемый диапазон символов.