writing-mode w CSS3

By /

CSS

writing-mode to właściwość CSS, która definiuje kierunek tekstu oraz układ linii i bloków w dokumencie. Ta właściwość jest szczególnie przydatna w przypadku języków, które nie są pisane w tradycyjnym układzie od lewej do prawej, jak np. języki azjatyckie (chiński, japoński, koreański), które mogą być pisane w pionie, czy języki pisane od prawej do lewej, jak arabski czy hebrajski. W CSS3, writing-mode umożliwia twórcom stron internetowych kontrolę nad układem tekstu, co jest istotne dla dostosowania się do różnych kultur i tradycji pisania.

Przykład wykorzystania writing-mode w HTML i CSS

Poniższy przykład demonstruje, jak można użyć writing-mode, aby zmienić tradycyjny, poziomy układ tekstu na pionowy.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania writing-mode w CSS3</title>
    <style>
        /* Styl dla kontenera */
        .container {
            width: 100%;
            border: 2px solid black;
            padding: 20px;
        }

        /* Styl dla tekstu w poziomym układzie */
        .horizontal-text {
            writing-mode: horizontal-tb;
        }

        /* Styl dla tekstu w pionowym układzie */
        .vertical-text {
            writing-mode: vertical-rl;
        }

        /* Styl dla tekstu w pionowym układzie od prawej do lewej */
        .vertical-lr-text {
            writing-mode: vertical-lr;
        }
    </style>
</head>
<body>
    <div class="container horizontal-text">
        To jest tekst w poziomym układzie.
    </div>
    <div class="container vertical-text">
        To jest tekst w pionowym układzie (od prawej do lewej).
    </div>
    <div class="container vertical-lr-text">
        To jest tekst w pionowym układzie (od lewej do prawej).
    </div>
</body>
</html>

W przykładzie użyto trzech różnych wartości właściwości writing-mode:

  • horizontal-tb: Układ tekstu jest poziomy, od góry do dołu. Jest to wartość domyślna.
  • vertical-rl: Układ tekstu jest pionowy, z liniami tekstu ułożonymi od prawej do lewej.
  • vertical-lr: Układ tekstu jest pionowy, z liniami tekstu ułożonymi od lewej do prawej.

Znaczenie writing-mode w projektowaniu stron

Właściwość writing-mode w CSS3 pozwala projektantom stron internetowych na tworzenie bardziej dostępnych i uniwersalnych projektów, które respektują różnorodność kulturową i lingwistyczną użytkowników. Jest to szczególnie ważne w kontekście globalizacji i konieczności dostosowania treści cyfrowych do potrzeb użytkowników z różnych części świata.

Podsumowanie

writing-mode w CSS3 jest potężnym narzędziem, które umożliwia twórcom stron internetowych manipulację kierunkiem tekstu, co jest kluczowe dla zapewnienia kompatybilności strony z różnymi tradycjami pisarskimi. Poprzez umożliwienie łatwego przełączania między poziomymi a pionowymi układami tekstu, writing-mode otwiera drogę do tworzenia bardziej zrozumiałych i dostępnych stron internetowych dla szerokiego spektrum użytkowników na całym świecie.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top