Атрибут dir тега <article>

Описание

Атрибут dir определяет направление текста внутри элемента <article>. Он может принимать значения ltr (слева направо), rtl (справа налево) или auto (автоматическое определение).

Примеры использования:
<!-- Статья с текстом слева направо (по умолчанию) --> <article dir="ltr"> <h2>Web Development Trends</h2> <p>This article discusses modern web development approaches.</p> </article> <!-- Статья с текстом справа налево (для арабского, иврита и др.) --> <article dir="rtl" lang="ar"> <h2>اتجاهات تطوير الويب</h2> <p>هذه المقالة تناقش أساليب تطوير الويب الحديثة.</p> </article> <!-- Автоматическое определение направления --> <article dir="auto"> <p>هذه جملة بالعربية</p> <p>This is an English sentence</p> </article>

Особенности работы:

Значение Описание Когда использовать
ltr Текст направлен слева направо (Left-To-Right) Для языков с письмом LTR (английский, русский и большинство других)
rtl Текст направлен справа налево (Right-To-Left) Для языков с письмом RTL (арабский, иврит и др.)
auto Направление определяется автоматически по содержимому Когда содержимое может быть на разных языках

Рекомендации:

  • Важно: Для семантической разметки всегда указывайте язык статьи с помощью атрибута lang вместе с dir
  • Значение auto может быть полезно для пользовательского контента, но не всегда точно
  • Для всего документа лучше задавать направление в элементе <html>
  • CSS свойство direction имеет приоритет над HTML атрибутом dir

Пример с CSS и HTML:

<style> .arabic-article { direction: rtl; /* Это переопределит HTML атрибут */ text-align: right; font-family: 'Traditional Arabic', Arial, sans-serif; } </style> <article dir="ltr" class="arabic-article" lang="ar"> <h2>مقالة عن تطوير الويب</h2> <p>هذه المقالة مكتوبة باللغة العربية</p> </article>

Важно: Не используйте атрибут dir только для визуального эффекта - он должен соответствовать реальному направлению текста в статье.

Совет: Для многоязычных сайтов комбинируйте dir с атрибутом lang для лучшей доступности и SEO.

Примечание: Хотя современные браузеры обычно правильно определяют направление текста автоматически, явное указание dir помогает избежать ошибок рендеринга.

Лучшие практики:

<!-- Правильное использование для арабской статьи --> <article dir="rtl" lang="ar"> <header> <h2>عنوان المقالة</h2> <div class="meta">نشر في ١٠ يناير ٢٠٢٣</div> </header> <div class="content"> <p>المحتوى الرئيسي للمقالة...</p> </div> </article> <!-- Для смешанного контента --> <article dir="auto"> <p>هذه فقرة بالعربية</p> <p dir="ltr">This paragraph is in English</p> </article>