Poznaj Programowanie

Tagi HTML: dir

Piotr Grochal 6 min. czytania

Atrybut dir to globalny atrybut HTML, który określa kierunek wyświetlania tekstu w elemencie: od lewej do prawej (ltr) lub od prawej do lewej (rtl). Jest kluczowy na stronach wielojęzycznych, szczególnie dla języków takich jak arabski, hebrajski czy perski.

Czym dokładnie jest atrybut dir i dlaczego jest ważny?

W świecie web developmentu, gdzie treści są międzynarodowe, atrybut dir rozwiązuje problemy dwukierunkowego algorytmu Unicode (BiDi). Bez jawnego kierunku przeglądarka może źle zinterpretować kolejność znaków w mieszanych tekstach (np. arabski i angielski w jednym zdaniu). Atrybut dir ustawia bazowy kierunek lub nowy kontekst dla algorytmu BiDi, co zapobiega błędom w wyświetlaniu.

W HTML5 dir jest atrybutem globalnym, więc możesz go stosować do wszystkich elementów HTML. W starszym HTML 4.01 był dostępny dla większości elementów, z ważnymi wyjątkami. W HTML 4.01 atrybut nie był dostępny dla następujących elementów:

  • applet,
  • base,
  • br,
  • frame,
  • iframe,
  • param,
  • script.

Dostępne wartości atrybutu dir

Atrybut przyjmuje trzy główne wartości:

Wartość Opis Domyślna? Obsługa w HTML5
ltr Kierunek od lewej do prawej (np. polski, angielski) – wartość domyślna w większości przeglądarek. Tak Pełna
rtl Kierunek od prawej do lewej (np. arabski, hebrajski). Nie Pełna
auto Przeglądarka automatycznie wykrywa kierunek na podstawie pierwszego silnego znaku Unicode w treści (np. arabski znak ustawi rtl). Niezalecane dla elementu bdo. Nie Pełna

Obsługa przeglądarek jest doskonała: wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) w pełni wspierają atrybut dir.

Podstawowe przykłady użycia atrybutu dir

Zacznijmy od prostego przykładu prezentującego różnicę między domyślnym kierunkiem a rtl:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład atrybutu dir</title>
</head>
<body>
<p>Standardowy tekst po polsku (ltr domyślnie).</p>
<p dir="rtl">عينة من محتوى الوثيقة HTML. هذا نص عربي يُكتب من اليمين إلى اليسار.</p>
</body>
</html>

Rezultat w przeglądarce: pierwszy akapit jest wyświetlany od lewej do prawej, natomiast akapit arabski zaczyna się po prawej stronie i płynie w lewo.

Drugi przykład pokazuje działanie wartości auto dla dynamicznych treści:

<p dir="auto">Mixed text: Hello عينة من محتوى الوثيقة!</p>
<p dir="auto">English first: Hello world عربي ثاني.</p>

Rezultat: w pierwszym wierszu kierunek zostanie ustawiony na rtl (pierwszy silny znak to arabski), w drugim na ltr (zaczyna się od angielskiego).

Zaawansowane zastosowania – elementy specjalne i atrybuty tekstowe

Atrybut dir ma szczególne znaczenie dla elementów bdi (BiDi Isolated) i bdo (BiDi Override), które izolują lub nadpisują kierunek w mieszanych tekstach.

Przykład z bdi i bdo

Poniższy przykład ilustruje izolowanie i nadpisywanie kierunku w praktyce:

<ul>
<li>Imię: <bdi>أحمد</bdi> (automatycznie rtl).</li>
<li><bdo dir="ltr">RTL overridden to LTR: أحمد</bdo></li>
</ul>

Takie podejście zapobiega „przeskakiwaniu” numerów i niepożądanym przetasowaniom wierszy w mieszanych listach.

dir wpływa też na wartości innych atrybutów. Przykładowe atrybuty, których kierunek może być interpretowany w kontekście dir to:

  • alt w img, area, input,
  • title,
  • placeholder w input, textarea,
  • content w meta,
  • label w option, optgroup.

Przykład użycia z obrazkiem i atrybutem dir osadzonym na tagu img:

<img src="flaga.png" alt="علم العربية" dir="rtl" title="Flaga arabska">

Uwaga historyczna: zdeprecjonowany tag <dir>

W starym HTML 4.01 istniał tag <dir>, który tworzył wielokolumnowy spis katalogu. Jest zdeprecjonowany i nieużywany w HTML5 – zastąp go listami <ul> lub <ol> oraz odpowiednim CSS.

Integracja z CSS i JavaScript

Atrybut dir ustawia właściwość CSS direction, którą w razie potrzeby możesz nadpisać. Przykładowe reguły wyglądają tak:

*[dir="ltr"] { direction: ltr; text-align: left; }
*[dir="rtl"] { direction: rtl; text-align: right; }

W JavaScript możesz dynamicznie zmieniać kierunek elementu następująco:

document.querySelector('p').setAttribute('dir', 'rtl');
// Lub:
element.style.direction = 'rtl';

Poniżej znajdziesz przykład prostej strony wielojęzycznej z przełącznikiem, który zmienia kierunek i treść sekcji:

<!DOCTYPE html>
<html>
<head>
<style>
.lang-switch { margin: 20px; }
.content[dir="rtl"] { text-align: right; }
</style>
</head>
<body>
<button class="lang-switch" onclick="setLang('pl')">Polski</button>
<button class="lang-switch" onclick="setLang('ar')">العربية</button>

<section id="content" class="content" dir="ltr">
<h1>Witaj!</h1>
<p>Treść strony.</p>
</section>

<script>
function setLang(lang) {
const content = document.getElementById('content');
if (lang === 'ar') {
content.setAttribute('dir', 'rtl');
content.innerHTML = '<h1>مرحبا!</h1><p>محتوى الصفحة.</p>';
} else {
content.setAttribute('dir', 'ltr');
content.innerHTML = '<h1>Witaj!</h1><p>Treść strony.</p>';
}
}
</script>
</body>
</html>

To tworzy interaktywny przełącznik języka z automatyczną zmianą zarówno kierunku tekstu, jak i treści.

Najlepsze praktyki i pułapki

Stosuj poniższe wskazówki, aby wdrożyć atrybut dir w sposób przewidywalny i dostępny:

  • używaj z lang – połącz z atrybutem lang="ar" lub innym odpowiednim dla pełnej semantyki i lepszej dostępności;
  • dla RTL layoutu – ustaw na poziomie dokumentu regułę html[dir="rtl"] { direction: rtl; }, aby zapewnić spójny kierunek w całej stronie;
  • testuj w RTL – korzystaj z narzędzi deweloperskich (np. Chrome DevTools > Rendering > Emulate RTL), aby wychwycić problemy układu;
  • unikaj nadużywania auto – w złożonych treściach może działać nieprzewidywalnie i powodować niespójności;
  • responsywność – w CSS rozważ użycie unicode-bidi: plaintext; dla zaawansowanych przypadków mieszania kierunków;
  • SEO i a11y – czytniki ekranowe i przeglądarki lepiej interpretują jawnie ustawiony dir.