Атрибут dir тега <caption>
Описание
Атрибут dir для элемента <caption> определяет направление текста в заголовке таблицы. Это особенно важно для языков с письмом справа налево (RTL), таких как арабский или иврит.
<table>
<caption dir="rtl" lang="ar">جدول البيانات الشهرية</caption>
<!-- Содержимое таблицы на арабском -->
</table>
| Значение | Направление | Применение |
|---|---|---|
ltr |
Слева направо (по умолчанию) | Для большинства языков |
rtl |
Справа налево | Арабский, иврит и др. RTL-языки |
auto |
Автоматическое определение | Для смешанного контента |
Практические примеры:
1. Смешанное направление текста:
<table>
<caption dir="auto">
جدول البيانات (2023) - Monthly Data
</caption>
<!-- Содержимое таблицы -->
</table>
2. Динамическое изменение направления:
<table>
<caption id="langCaption">Data Table</caption>
<!-- Содержимое таблицы -->
</table>
<button onclick="switchLanguage()">العربية</button>
<script>
function switchLanguage() {
const caption = document.getElementById('langCaption');
caption.dir = caption.dir === 'ltr' ? 'rtl' : 'ltr';
caption.textContent = caption.dir === 'ltr' ? 'Data Table' : 'جدول البيانات';
}
</script>
Особенности работы:
- Наследует значение от родительских элементов, если не указан
- Лучше всего работает в сочетании с атрибутом lang
- Влияет только на текст в caption, не на всю таблицу
- Для таблиц с RTL-контентом может потребоваться дополнительная CSS-стилизация
Рекомендации:
- Всегда указывайте dir вместе с lang для RTL-языков
- Используйте
dir="auto"для смешанного контента - Проверяйте выравнивание текста в заголовке
- Для сложных случаев используйте CSS-свойство direction
Совет: Для многоязычных сайтов управляйте направлением текста на серверной стороне или через CSS-переменные для согласованности.
Примечание: Хотя атрибут dir можно использовать для отдельных элементов, для целостных RTL-интерфейсов лучше задавать направление на уровне документа или секции.