W przypadku zagnieżdżonego tekstu HTML wybierz izolację, gdy każda fraza powinna zachować własny kierunek bez wpływu na sąsiednie frazy. Używaj osadzania tylko wtedy, gdy zamierzony jest wpływ na otaczający tekst, a nadpisania — gdy projekt wyraźnie wymaga wymuszenia kolejności znaków.

Ten przewodnik pomoże osobie edytującej stronę HTML na Macu wybrać odpowiedni mechanizm, zachować zagnieżdżone etykiety i interpunkcję oraz sprawdzić wynik w przeglądarce na komputerze. Przykłady wykorzystują wymyślone etykiety, liczby i znaki geometryczne.

Który mechanizm pasuje do zadania związanego z układem?

Zacznij od dwóch pytań: czy przeglądarka powinna stosować zwykłe reguły dwukierunkowego układania tekstu wewnątrz frazy i czy ta fraza powinna wpływać na kolejność otaczającego tekstu? Odpowiedzi prowadzą do poniższego praktycznego porównania. Dokumentacja unicode-bidi w MDN opisuje podstawowe zachowania CSS.

Wymaganie Mechanizm Zalecane podejście w HTML
Wyznaczenie granicy dla frazy o znanym kierunku Izolacja Istniejący element liniowy z dir="ltr" lub dir="rtl"
Izolacja frazy o nieznanym kierunku Izolacja z automatycznym kierunkiem bdi lub istniejący element liniowy z dir="auto"
Utworzenie zakresu kierunkowego, który nadal wpływa na otaczającą kolejność Osadzanie Specjalny przypadek CSS z użyciem unicode-bidi: embed
Wymuszenie kolejności znaków z jednoczesną izolacją wyniku Izolowane nadpisanie bdo z jawnym dir="ltr" lub dir="rtl"
Wymuszenie kolejności znaków z zachowaniem wpływu na otaczający tekst Nieizolowane nadpisanie Specjalny przypadek CSS z użyciem unicode-bidi: bidi-override

W zwykłym autorstwie HTML za punkt wyjścia przyjmij znaczniki kierunku tekstu. W3C zaleca ciasne otaczanie każdej frazy o przeciwnym kierunku i wyrażanie fraz zagnieżdżonych przez zagnieżdżone znaczniki. Dzięki temu zamierzone granice są widoczne w dokumencie. W3C: Znaczniki liniowe i tekst dwukierunkowy w HTML.

Jak oznaczać zagnieżdżony izolowany tekst?

Wyznacz osobną granicę kierunku dla każdej pełnej frazy. Jeśli istniejący element liniowy zawiera już dokładnie tę frazę, dodaj tam dir. W przeciwnym razie wprowadź element span. Interpunkcję należącą do frazy umieść wewnątrz jej znacznika; interpunkcję otaczającego zdania pozostaw na zewnątrz. W3C nazywa to „ciasnym otaczaniem” frazy. Wskazówki W3C dotyczące znaczników liniowych.

W przypadku syntetycznej etykiety kształtu, która ma być zapisana od prawej do lewej i zawiera identyfikator biegnący od lewej do prawej, struktura mogłaby wyglądać tak w przykładowym fragmencie:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Występują tu trzy celowo wyznaczone zakresy: zdanie zewnętrzne, sekwencja kształtów i zagnieżdżony identyfikator. Liczba należy do zdania, więc pozostaje poza sekwencją kształtów. Oznaczenie tylko zewnętrznej frazy pozostawiłoby wewnętrzny identyfikator bez własnej, jawnej granicy. To zagnieżdżenie odpowiada zalecanej przez W3C strukturze dla zmian kierunku. Wskazówki W3C dotyczące fraz zagnieżdżonych.

Gdy kierunek wstawionej etykiety jest nieznany, bdi zapewnia izolację i domyślnie automatycznie wykrywa kierunek. Zwykły element span bez dir nie zapewnia tego samego domyślnego zachowania. WHATWG określa, że bdi domyślnie używa auto, zamiast w zwykły sposób dziedziczyć kierunek. Standard HTML: element bdi.

Automatyczne określanie kierunku to heurystyka oparta na pierwszym znaku o silnym kierunku, z określonymi wyjątkami dotyczącymi zagnieżdżonych elementów kierunkowych. Nie rozpoznaje zamierzonego znaczenia etykiety. Etykieta zaczynająca się od A1 dostarcza więc wskazówki od lewej do prawej, nawet jeśli jej dalsza treść sugeruje inny sposób prezentacji. Jeśli znasz wymagany kierunek, użyj go jawnie. MDN: globalny atrybut dir.

Etykieta składająca się wyłącznie z kształtów i cyfr wymaga szczególnej uwagi: nie zawiera litery o silnym kierunku. W zwykłych przykładach z elementami liniowymi opisany tu algorytm HTML przyjmuje kierunek od lewej do prawej, gdy automatyczne określanie kierunku nie znajduje kwalifikującego się znaku. Jeśli ta syntetyczna sekwencja ma mieć podstawowy kierunek od prawej do lewej, określ dir="rtl". Standard HTML: atrybut dir.

Kiedy używać osadzania i nadpisań?

Osadzanie tworzy kolejny poziom kierunkowy, zachowując zwykłą kolejność znaków wewnątrz niego. Jego granica wpływa także kierunkowo na otaczający tekst. Izolacja zapewnia zawartości własny zakres, a jednocześnie sprawia, że sekwencja zachowuje się neutralnie względem otoczenia. Specyfikacja W3C wyraźnie rozróżnia te wewnętrzne i zewnętrzne skutki. CSS Writing Modes Level 3: Osadzanie i nadpisywanie.

Wybierz osadzanie tylko wtedy, gdy taki zewnętrzny wpływ kierunkowy jest częścią zamierzonego wyniku. W przypadku niezależnej zagnieżdżonej etykiety, po której następuje osobna liczba, zwykle odpowiednia jest izolacja. Sam głębszy poziom zagnieżdżenia nie uzasadnia wyboru embed: izolowane elementy span mogą same zawierać kolejne elementy span określające kierunek.

Nadpisanie zmienia regułę wewnętrzną. Wymusza sekwencję tekstu w określonym kierunku zamiast pozwalać zwykłemu algorytmowi rozstrzygać kierunek jego fragmentów. isolate-override dodaje granicę izolacji wokół tej wymuszonej kolejności. Są to odrębne zachowania, a nie silniejsze ustawienia służące do poprawiania zwykłej frazy. MDN: wartości unicode-bidi.

Do celowego zademonstrowania kolejności znaków użyj bdo z dir="ltr" lub dir="rtl". Standard HTML wymaga jawnego kierunku i zabrania używania auto w tym elemencie. Reguły renderowania stosują unicode-bidi: isolate-override, dlatego bieżące zachowanie HTML bdo obejmuje izolację. Standard HTML: element bdo, Standard HTML: Renderowanie tekstu dwukierunkowego.

To rozróżnienie ma znaczenie w przypadku etykiet łacińskich: zwykły kierunek podstawowy od prawej do lewej nie oznacza „odwrócenia każdej łacińskiej litery”. Nadpisanie może wymusić taką sekwencję. Nawet wtedy poszczególne glify zachowują swoją orientację; bdo nie rysuje liter jako lustrzanych odbić. MDN: element bdo.

Wypróbuj kompletną stronę porównawczą na Macu

Poniższa samodzielna strona wymaga jedynie przeglądarki i edytora zwykłego tekstu. Jej pierwsze dwa wiersze porównują zwykłe obsługiwanie kierunku z wymuszoną kolejnością. Pozostałe wiersze pokazują opcje zagnieżdżenia i wyznaczania granic. Wiersz z osadzaniem CSS ma zademonstrować mechanizm; w przypadku zwykłej, niezależnej etykiety punktem wyjścia powinien być wiersz z izolacją HTML.

W TextEdit wybierz File > New, a następnie Format > Make Plain Text. Wklej cały poniższy kod. Wybierz File > Save, nazwij plik bidi-demo.html i jeśli pojawi się monit, wybierz Use .html. Są to kroki opisane przez Apple do utworzenia pliku HTML. Otwórz zapisany plik w przeglądarce na komputerze. Apple: Praca z dokumentami HTML w TextEdit na Macu.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Przed wprowadzeniem zmian obejrzyj pierwsze dwa wiersze. Zwykły kierunkowy span powinien zachować ABC w kolejności liter od lewej do prawej. Nadpisanie powinno wyświetlać CBA, gdy odczytuje się je od lewej krawędzi. Jest to przewidywanie wynikające z udokumentowanych mechanizmów, a nie wynik pomiaru przeglądarki. MDN: działanie bdo.

Następnie porównaj wiersze z zagnieżdżoną izolacją i osadzaniem. Nie zmieniaj słów ani liczby, obserwując sekwencję kształtów i interpunkcję na jej granicy. Mechanizmy są różne, nawet jeśli konkretny przykład wygląda identycznie: nie ma gwarancji, że izolacja i osadzanie dadzą widocznie różne wyniki dla każdego ciągu. Udokumentowana różnica dotyczy udziału zakresu w rozstrzyganiu kierunku tekstu w otoczeniu. W3C: CSS Writing Modes Level 3.

Aby sprawdzić granice, przenieś dwukropek do wnętrza zewnętrznego elementu kierunkowego, zapisz plik i wczytaj go ponownie. Potem przywróć go na zewnątrz. Zmieniasz frazę, do której należy interpunkcja, więc oceń wynik zgodnie z zamierzonym przypisaniem. Na koniec zwęź okno przeglądarki, aby sprawdzić te same granice po zawinięciu wiersza.

Tło i kropkowany obrys wskazują testowany element span. Służą do jego oględzin. Nie określają kierunku ani izolacji.

Jak diagnozować wynik, który nadal wygląda nieprawidłowo?

Zacznij od najmniejszej nieprawidłowo wyświetlanej frazy, a potem poszerzaj zakres. Jednoczesna zmiana kilku właściwości kierunkowych utrudnia ustalenie, która granica spowodowała problem.

  1. Sprawdź element obejmujący frazę. Czy zawiera całą etykietę i tylko ją? Interpunkcja zdania oraz liczby powinny pozostać na zewnątrz, chyba że należą do etykiety.
  2. Sprawdź frazy zagnieżdżone. Identyfikator o niezależnym kierunku, umieszczony wewnątrz innej frazy, może wymagać własnego elementu dir.
  3. Sprawdź automatyczne określanie kierunku. Jeśli znasz zamierzony kierunek podstawowy, zastąp auto jawnym kierunkiem. Jest to szczególnie przydatne w przypadku syntetycznych kształtów i cyfr.
  4. Sprawdź nadpisania. Jeśli kolejność znaków jest nieoczekiwanie wymuszona, sprawdź bdo i deklaracje CSS unicode-bidi.
  5. Sprawdź kaskadę CSS. Reguła autora może zastąpić kierunkowe style przeglądarki. Usuń eksperymentalne reguły bidi i ponownie przetestuj znaczniki HTML.

Dwie pierwsze kontrole wynikają ze wskazówek W3C dotyczących otaczania i zagnieżdżania. Kontrola automatycznego określania kierunku wynika z dokumentacji dir w MDN; ostatnie kontrole odnoszą się do reguł renderowania HTML.

Odróżniaj też kolejność od wyrównania. text-align: right umieszcza treść liniową przy prawej krawędzi bloku; nie tworzy izolowanej frazy. text-align: start jest zgodne z kierunkiem bloku, więc zmiana kierunku podstawowego może też zmienić używaną krawędź. Problem kolejności znaków diagnozuj osobno od położenia wiersza. MDN: text-align.

WHATWG dokumentuje, że bdi i bdo są obsługiwane we wszystkich obecnych silnikach przeglądarek. Nie oznacza to jednak obsługi w każdej starszej przeglądarce ani w każdym osadzonym podglądzie. Sprawdzając inne środowisko renderowania, przetestuj rzeczywisty cel i zachowaj kierunkowe znaczniki HTML: MDN zaleca je zamiast izolacji opartej wyłącznie na CSS, ponieważ style mogą zostać zignorowane. Standard HTML: Semantyka tekstu, MDN: uwagi dotyczące użycia bdi.

Na koniec podejmij osobną, jawną decyzję dla każdej zagnieżdżonej frazy: określ jej kierunek podstawowy, granicę oraz to, czy jej wewnętrzna kolejność znaków powinna pozostać zwykła. W przypadku niezależnej etykiety zacznij od izolacji. Osadzanie lub nadpisanie pozostaw tylko wtedy, gdy układ wymaga ich konkretnego, udokumentowanego zachowania.

Źródła