Атрибут lang тега <dialog>
Описание
Атрибут lang определяет язык содержимого диалогового окна <dialog>. Это важно для:
- Корректного отображения и произношения текста
- Работы средств доступности (скринридеров)
- Автоматического перевода контента
- Правильной типографики (переносы, кавычки)
<dialog lang="en">
<h3>Welcome</h3>
<p>This dialog content is in English</p>
</dialog>
<dialog lang="ru">
<h3>Добро пожаловать</h3>
<p>Содержимое этого диалога на русском</p>
</dialog>
<dialog lang="ar" dir="rtl">
مرحبا
هذا المحتوى باللغة العربية
</dialog>Форматы языковых тегов:
| Пример | Язык/регион | Стандарт |
|---|---|---|
lang="en" |
Английский | ISO 639-1 |
lang="pt-BR" |
Португальский (Бразилия) | BCP 47 |
lang="zh-Hans" |
Китайский (упрощенный) | BCP 47 |
Динамическое изменение языка:
<dialog id="multiLangDialog">
<h3 id="dialogTitle">Title</h3>
<p id="dialogContent">Content</p>
</dialog>
<button onclick="showDialog('en')">English</button>
<button onclick="showDialog('es')">Español</button>
<script>
const translations = {
en: {
title: "Information",
content: "This is an important message."
},
es: {
title: "Información",
content: "Este es un mensaje importante."
}
};
function showDialog(lang) {
const dialog = document.getElementById('multiLangDialog');
dialog.lang = lang;
document.getElementById('dialogTitle').textContent = translations[lang].title;
document.getElementById('dialogContent').textContent = translations[lang].content;
dialog.showModal();
}
</script>
Использование с CSS:
<style>
/* Стили для разных языков */
dialog[lang="en"] {
font-family: "Helvetica", sans-serif;
}
dialog[lang="ja"] {
font-family: "Meiryo", sans-serif;
line-height: 1.8;
}
dialog[lang="ar"] {
font-family: "Tahoma", sans-serif;
text-align: right;
}
</style>
<dialog lang="ja">
情報
これは重要なメッセージです。
</dialog>Лучшие практики:
- Всегда указывайте язык основного контента страницы
- Для многоязычных диалогов используйте динамическое изменение
- Сочетайте с атрибутом
dirдля RTL-языков - Для смешанного контента используйте вложенные элементы с разными
lang - Проверяйте работу с скринридерами
SEO и доступность:
- Помогает поисковым системам правильно индексировать многоязычный контент
- Позволяет скринридерам выбирать правильное произношение
- Улучшает пользовательский опыт при автоматическом переводе
- Влияет на типографику (кавычки, переносы, пробелы)
Примечание: Для профессиональных многоязычных приложений рассмотрите использование систем i18n (Internationalization), таких как i18next или formatjs, которые предоставляют более мощные инструменты для управления переводами, чем простой атрибут lang.