17 sierpnia 2025Polski

Kompleksowy przewodnik po CSS writing-mode, wyjaśniający, jak kontrolować kierunek tekstu dla internacjonalizacji (i18n) i tworzyć atrakcyjne, globalnie dostępne strony.

CSS Writing Mode: Opanowanie międzynarodowego kierunku tekstu dla globalnych stron internetowych

W dzisiejszym połączonym świecie strony internetowe muszą zaspokajać potrzeby zróżnicowanej publiczności, a kluczowym tego aspektem jest obsługa różnych kierunków tekstu. Właściwość CSS writing-mode to potężne narzędzie, które pozwala deweloperom kontrolować kierunek przepływu tekstu, umożliwiając tworzenie prawdziwie zinternacjonalizowanych (i18n) i wizualnie angażujących doświadczeń internetowych. Ten kompleksowy przewodnik zgłębi zawiłości writing-mode, dostarczając praktycznych przykładów i przydatnych wskazówek, które pomogą Ci opanować kierunek tekstu dla globalnych stron internetowych.

Zrozumienie trybów pisania

Właściwość CSS writing-mode określa, czy linie tekstu są układane poziomo czy pionowo oraz w jakim kierunku postępują bloki. Odgrywa kluczową rolę w dostosowywaniu stron internetowych do języków, które używają różnych kierunków pisania, takich jak:

Od lewej do prawej (LTR): angielski, hiszpański, francuski, niemiecki i wiele innych języków zachodnich.
Od prawej do lewej (RTL): arabski, hebrajski, perski i urdu.
Pionowy: tradycyjny chiński, japoński i mongolski.

Domyślnie przeglądarki internetowe używają trybu pisania horizontal-tb, który układa tekst poziomo od góry do dołu. Jednak writing-mode pozwala zmienić to domyślne zachowanie i tworzyć układy, które uwzględniają różne kierunki tekstu.

Wartości właściwości `writing-mode`

Właściwość writing-mode przyjmuje kilka wartości, z których każda określa inny kierunek tekstu i przepływ bloków:

horizontal-tb: Poziomo od góry do dołu. Linie tekstu są poziome i płyną od góry do dołu. Jest to wartość domyślna.
vertical-rl: Pionowo od prawej do lewej. Linie tekstu są pionowe i płyną od prawej do lewej. Bloki postępują w dół.
vertical-lr: Pionowo od lewej do prawej. Linie tekstu są pionowe i płyną od lewej do prawej. Bloki postępują w dół.
sideways-rl: Przestarzały alias dla vertical-rl.
sideways-lr: Przestarzały alias dla vertical-lr.

Następujące wartości są również dostępne, ale rzadziej używane:

block-flow: Użyj kierunku kontekstu formatowania blokowego, na który mogą wpływać inne właściwości.

Podstawowe przykłady

Zilustrujmy użycie writing-mode na kilku prostych przykładach:

Tekst poziomy (domyślny)

To jest domyślne zachowanie, więc nie jest potrzebne jawne użycie writing-mode:


<p>This is horizontal text.</p>

Tekst pionowy (od prawej do lewej)

Aby wyświetlić tekst pionowo od prawej do lewej, użyj vertical-rl:


<p style="writing-mode: vertical-rl;">This is vertical text (right-to-left).</p>

Tekst pionowy (od lewej do prawej)

Aby wyświetlić tekst pionowo od lewej do prawej, użyj vertical-lr:


<p style="writing-mode: vertical-lr;">This is vertical text (left-to-right).</p>

Praktyczne zastosowania `writing-mode`

Oprócz podstawowego kierunku tekstu, writing-mode oferuje szereg praktycznych zastosowań do tworzenia wizualnie angażujących i międzynarodowo dostępnych stron internetowych:

1. Dostosowanie do języków RTL

Dla stron internetowych obsługujących języki RTL, takie jak arabski czy hebrajski, writing-mode jest niezbędne do poprawnego wyświetlania tekstu. Możesz użyć selektorów CSS, aby zastosować writing-mode: rtl; do określonych elementów lub całego dokumentu na podstawie atrybutu języka:


<html lang="ar">
  <body>
    <p>هذا نص عربي.</p>
  </body>
</html>


html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Chociaż direction: rtl; jest kluczowe do ustawienia podstawowego kierunku, możesz również potrzebować unicode-bidi: bidi-override;, aby zapewnić prawidłową obsługę tekstu o mieszanym kierunku. Nowoczesne podejścia często preferują właściwości logiczne, które zostaną omówione później.

2. Tworzenie pionowych menu nawigacyjnych

writing-mode można użyć do tworzenia pionowych menu nawigacyjnych, które często można zobaczyć na japońskich i chińskich stronach internetowych. Może to dodać unikalnego wizualnego charakteru Twojej witrynie:


<ul class="vertical-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>


.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

W tym przykładzie, text-orientation: upright; jest używane, aby zapewnić, że tekst w elementach pionowego menu jest wyświetlany pionowo, a nie obrócony.

3. Projektowanie układów w stylu magazynowym

writing-mode można włączyć, aby osiągnąć układy w stylu magazynowym. Na przykład, możesz mieć duże zdjęcie z nałożonym na nie pionowym tekstem, aby stworzyć uderzający efekt wizualny.


<div class="magazine-section">
  <img src="image.jpg" alt="Magazine Image">
  <div class="vertical-text">Exclusive Interview</div>
</div>


.magazine-section {
  position: relative;
  width: 500px;
  height: 300px;
}

.magazine-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-text {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform-origin: top right;
  transform: rotate(180deg); /* Required to render correctly across browsers */
}

transform: rotate(180deg); jest często konieczne, aby zapewnić spójne renderowanie w różnych przeglądarkach, zwłaszcza w starszych wersjach.

4. Ulepszanie wizualizacji danych

W wizualizacji danych writing-mode może być przydatne do etykietowania osi na wykresach i diagramach, zwłaszcza gdy przestrzeń jest ograniczona. Na przykład, możesz obrócić etykiety na osi pionowej, aby zapobiec ich nakładaniu się.

Zaawansowane techniki i zagadnienia

Aby w pełni wykorzystać moc writing-mode, rozważ te zaawansowane techniki i ważne czynniki:

1. Właściwości i wartości logiczne

Nowoczesny CSS wprowadza właściwości i wartości logiczne, które zapewniają bardziej elastyczny i semantyczny sposób obsługi układu i kierunku. Zamiast właściwości fizycznych, takich jak left i right, używane są właściwości logiczne, takie jak start i end, które dostosowują się do kierunku pisania. Na przykład:

margin-inline-start: Odpowiednik margin-left w LTR i margin-right w RTL.
padding-block-start: Odpowiednik padding-top w poziomych trybach pisania oraz padding-left lub padding-right w pionowych trybach pisania.

Używanie właściwości logicznych sprawia, że Twój CSS jest bardziej elastyczny i łatwiejszy w utrzymaniu, zwłaszcza gdy masz do czynienia z wieloma kierunkami pisania.

2. Łączenie `writing-mode` z innymi właściwościami CSS

writing-mode wchodzi w interakcje z innymi właściwościami CSS, takimi jak text-orientation, direction i unicode-bidi, aby kontrolować wygląd i zachowanie tekstu. Zrozumienie tych interakcji jest kluczowe do osiągnięcia pożądanych rezultatów.

text-orientation: Określa orientację znaków w pionowych trybach pisania. Wartości obejmują upright, sideways, mixed i use-glyph-orientation.
direction: Określa podstawowy kierunek tekstu (LTR lub RTL).
unicode-bidi: Kontroluje, jak algorytm dwukierunkowy Unicode jest stosowany do elementu.

3. Obsługa tekstu o mieszanym kierunku

W przypadku tekstu zawierającego zarówno znaki LTR, jak i RTL (np. tekst angielski w akapicie arabskim), ważne jest, aby użyć właściwości unicode-bidi w celu zapewnienia poprawnego renderowania. Wartość bidi-override jest często używana do wymuszenia określonego kierunku.


<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>

4. Kwestie dotyczące czcionek

Nie wszystkie czcionki nadają się do pisma pionowego. Niektóre czcionki mogą nie zawierać glifów do pisma pionowego lub mogą nie renderować się poprawnie. Używając pionowych trybów pisania, wybieraj czcionki specjalnie zaprojektowane do tekstu pionowego lub takie, które mają dobre wsparcie dla pionowych glifów.

Czcionki z krajów Azji Wschodniej (Chiny, Japonia, Korea) zazwyczaj mają bardzo dobre wsparcie dla pisma pionowego.

5. Dostępność

Upewnij się, że użycie writing-mode nie wpływa negatywnie na dostępność. Zapewnij tekst alternatywny dla obrazów i innej zawartości nietekstowej oraz upewnij się, że tekst jest czytelny i zrozumiały dla użytkowników z niepełnosprawnościami. Używaj semantycznych elementów HTML i atrybutów ARIA, aby poprawić dostępność.

6. Kompatybilność z przeglądarkami

writing-mode ma dobre wsparcie w nowoczesnych przeglądarkach, ale starsze przeglądarki mogą wymagać prefiksów producentów (np. -webkit-writing-mode, -ms-writing-mode). Użyj preprocesora CSS, takiego jak Sass lub Less, aby zautomatyzować dodawanie prefiksów producentów lub użyj narzędzia takiego jak Autoprefixer.

Najlepsze praktyki używania `writing-mode`

Aby efektywnie używać writing-mode i tworzyć globalnie dostępne strony internetowe, postępuj zgodnie z tymi najlepszymi praktykami:

Używaj właściwości i wartości logicznych, gdy tylko to możliwe. Dzięki temu Twój CSS będzie bardziej elastyczny i łatwiejszy w utrzymaniu.
Wybieraj odpowiednie czcionki dla pionowych trybów pisania. Przetestuj swoje czcionki, aby upewnić się, że renderują się poprawnie w tekście pionowym.
Weź pod uwagę dostępność. Upewnij się, że użycie writing-mode nie wpływa negatywnie na dostępność dla użytkowników z niepełnosprawnościami.
Testuj swoje układy w różnych przeglądarkach i na różnych urządzeniach. Upewnij się, że Twoje układy renderują się poprawnie na różnych platformach.
Używaj preprocesorów CSS lub Autoprefixera do obsługi prefiksów producentów. Zaoszczędzi Ci to czas i wysiłek oraz zapewni, że Twój CSS będzie kompatybilny ze starszymi przeglądarkami.
Oddzielaj treść od prezentacji. Używaj CSS do kontrolowania prezentacji treści i unikaj używania HTML do celów stylizacyjnych.

Przykłady globalnych stron internetowych używających `writing-mode`

Wiele stron internetowych na całym świecie wykorzystuje writing-mode do różnych celów, od dostosowania do języków RTL po tworzenie unikalnych wizualnie układów. Oto kilka przykładów:

Strony z wiadomościami w języku arabskim lub hebrajskim: Te strony używają direction: rtl i potencjalnie dostosowań writing-mode do poprawnego wyświetlania tekstu.
Japońskie i chińskie strony internetowe o sztuce i kulturze: Często wykorzystują pismo pionowe w nagłówkach, menu i elementach dekoracyjnych.
Magazyny o modzie: Często używają tekstu pionowego w układach wizualnych dla efektów stylistycznych.

Podsumowanie

CSS writing-mode to potężne narzędzie do tworzenia zinternacjonalizowanych i wizualnie angażujących stron internetowych. Rozumiejąc różne wartości tej właściwości i jej interakcje z innymi właściwościami CSS, możesz tworzyć układy, które dostosowują się do różnych kierunków tekstu i poprawiają doświadczenie użytkownika dla globalnej publiczności. Pamiętaj, aby uwzględnić dostępność, kompatybilność z przeglądarkami i dobór czcionek, aby zapewnić, że Twoje strony internetowe są dostępne i atrakcyjne wizualnie dla wszystkich użytkowników.

W miarę jak tworzenie stron internetowych ewoluuje, opanowanie technik takich jak writing-mode staje się coraz ważniejsze dla tworzenia prawdziwie globalnych i inkluzywnych doświadczeń online. Wykorzystaj moc internacjonalizacji i twórz strony internetowe, które rezonują z użytkownikami z całego świata.