2025 m. rugpjūčio 17 d.Lietuvių

Išsamus CSS rašymo režimo vadovas, nagrinėjantis, kaip valdyti teksto kryptį internacionalizacijai (i18n) ir kurti vizualiai patrauklias, visame pasaulyje prieinamas svetaines.

CSS Rašymo Režimas: Tarptautinės Teksto Krypties Valdymas Globalioms Svetainėms

Šiuolaikiniame tarpusavyje susijusiame pasaulyje svetainės turi būti pritaikytos įvairiai auditorijai, o svarbiausias to aspektas – skirtingų teksto krypčių valdymas. CSS writing-mode yra galingas įrankis, leidžiantis kūrėjams kontroliuoti teksto srauto kryptį, suteikiant jiems galimybę kurti tikrai internacionalizuotas (i18n) ir vizualiai patrauklias interneto patirtis. Šiame išsamiame vadove bus nagrinėjamos writing-mode subtilybės, pateikiami praktiniai pavyzdžiai ir veiksmingos įžvalgos, padėsiančios jums įvaldyti teksto krypties valdymą globalioms svetainėms.

Rašymo Režimų Supratimas

CSS savybė writing-mode nurodo, ar teksto eilutės išdėstomos horizontaliai ar vertikaliai ir kuria kryptimi juda blokai. Ji atlieka lemiamą vaidmenį pritaikant tinklalapius kalboms, kurios naudoja skirtingas rašymo kryptis, pavyzdžiui:

Iš kairės į dešinę (LTR): anglų, ispanų, prancūzų, vokiečių ir daugelis kitų Vakarų kalbų.
Iš dešinės į kairę (RTL): arabų, hebrajų, persų ir urdu.
Vertikali: tradicinė kinų, japonų ir mongolų.

Pagal numatytuosius nustatymus, naršyklės naudoja horizontal-tb rašymo režimą, kuris išdėsto tekstą horizontaliai iš viršaus į apačią. Tačiau writing-mode leidžia pakeisti šį numatytąjį elgesį ir sukurti maketus, kurie prisitaiko prie skirtingų teksto krypčių.

Savybės `writing-mode` Reikšmės

Savybė writing-mode priima kelias reikšmes, kurių kiekviena nurodo skirtingą teksto kryptį ir bloko srautą:

horizontal-tb: Horizontalus iš viršaus į apačią. Teksto eilutės yra horizontalios ir eina iš viršaus į apačią. Tai yra numatytoji reikšmė.
vertical-rl: Vertikalus iš dešinės į kairę. Teksto eilutės yra vertikalios ir eina iš dešinės į kairę. Blokai juda žemyn.
vertical-lr: Vertikalus iš kairės į dešinę. Teksto eilutės yra vertikalios ir eina iš kairės į dešinę. Blokai juda žemyn.
sideways-rl: Pasenęs vertical-rl sinonimas.
sideways-lr: Pasenęs vertical-lr sinonimas.

Taip pat galimos šios reikšmės, tačiau jos naudojamos rečiau:

block-flow: Naudoti bloko formatavimo konteksto kryptį, kurią gali paveikti kitos savybės.

Pagrindiniai Pavyzdžiai

Iliustruokime writing-mode naudojimą keliais paprastais pavyzdžiais:

Horizontalus Tekstas (Numatytasis)

Tai yra numatytasis elgesys, todėl nereikia aiškiai nurodyti writing-mode:


<p>Tai yra horizontalus tekstas.</p>

Vertikalus Tekstas (Iš Dešinės į Kairę)

Norėdami rodyti tekstą vertikaliai iš dešinės į kairę, naudokite vertical-rl:


<p style="writing-mode: vertical-rl;">Tai yra vertikalus tekstas (iš dešinės į kairę).</p>

Vertikalus Tekstas (Iš Kairės į Dešinę)

Norėdami rodyti tekstą vertikaliai iš kairės į dešinę, naudokite vertical-lr:


<p style="writing-mode: vertical-lr;">Tai yra vertikalus tekstas (iš kairės į dešinę).</p>

Praktinis `writing-mode` Taikymas

Be pagrindinės teksto krypties valdymo, writing-mode siūlo daugybę praktinių pritaikymų, skirtų kurti vizualiai patrauklias ir tarptautiniu mastu prieinamas svetaines:

1. Pritaikymas RTL Kalboms

Svetainėms, kurios palaiko RTL kalbas, tokias kaip arabų ar hebrajų, writing-mode yra būtinas teisingam teksto atvaizdavimui. Galite naudoti CSS selektorius, kad pritaikytumėte writing-mode: rtl; konkretiems elementams ar visam dokumentui, atsižvelgiant į kalbos atributą:


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


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

Nors direction: rtl; yra labai svarbi nustatant pagrindinę kryptį, jums taip pat gali prireikti unicode-bidi: bidi-override;, kad užtikrintumėte teisingą mišrios krypties teksto apdorojimą. Šiuolaikiniai metodai dažnai teikia pirmenybę loginėms savybėms, kurios aptariamos vėliau.

2. Vertikalių Navigacijos Meniu Kūrimas

writing-mode gali būti naudojama kuriant vertikalius navigacijos meniu, kurie dažnai matomi japonų ir kinų svetainėse. Tai gali suteikti jūsų svetainei unikalų vizualinį akcentą:


<ul class="vertical-menu">
  <li><a href="#">Pagrindinis</a></li>
  <li><a href="#">Apie</a></li>
  <li><a href="#">Paslaugos</a></li>
  <li><a href="#">Kontaktai</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;
}

Šiame pavyzdyje text-orientation: upright; naudojama siekiant užtikrinti, kad tekstas vertikaliuose meniu elementuose būtų rodomas stačiai, o ne pasuktas.

3. Žurnalo Stiliaus Maketų Kūrimas

writing-mode gali būti integruota siekiant sukurti žurnalo stiliaus maketus. Pavyzdžiui, galite turėti didelį vaizdą su vertikaliu tekstu, uždėtu ant jo, kad sukurtumėte įspūdingą vizualinį efektą.


<div class="magazine-section">
  <img src="image.jpg" alt="Magazine Image">
  <div class="vertical-text">Išskirtinis Interviu</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); /* Reikalinga teisingam atvaizdavimui visose naršyklėse */
}

transform: rotate(180deg); dažnai yra būtinas norint užtikrinti nuoseklų atvaizdavimą skirtingose naršyklėse, ypač senesnėse versijose.

4. Duomenų Vizualizacijos Gerinimas

Duomenų vizualizacijoje writing-mode gali būti naudinga žymint ašis diagramose ir grafikuose, ypač kai trūksta vietos. Pavyzdžiui, galite pasukti etiketes ant vertikalios ašies, kad jos neuždengtų viena kitos.

Pažangios Technikos ir Aspektai

Norėdami visapusiškai išnaudoti writing-mode galią, atsižvelkite į šias pažangias technikas ir svarbius veiksnius:

1. Loginės Savybės ir Reikšmės

Šiuolaikinis CSS pristato logines savybes ir reikšmes, kurios suteikia lankstesnį ir semantiškesnį būdą valdyti maketą ir kryptį. Vietoj fizinių savybių, tokių kaip left ir right, naudojamos loginės savybės, tokios kaip start ir end, kurios prisitaiko prie rašymo krypties. Pavyzdžiui:

margin-inline-start: Atitinka margin-left LTR ir margin-right RTL.
padding-block-start: Atitinka padding-top horizontaliuose rašymo režimuose ir padding-left arba padding-right vertikaliuose rašymo režimuose.

Naudojant logines savybes, jūsų CSS tampa lengviau pritaikomas ir prižiūrimas, ypač dirbant su keliomis rašymo kryptimis.

2. `writing-mode` Derinimas su Kitomis CSS Savybėmis

writing-mode sąveikauja su kitomis CSS savybėmis, tokiomis kaip text-orientation, direction ir unicode-bidi, siekiant kontroliuoti teksto išvaizdą ir elgesį. Suprasti šias sąveikas yra labai svarbu norint pasiekti norimus rezultatus.

text-orientation: Nurodo simbolių orientaciją vertikaliuose rašymo režimuose. Reikšmės apima upright, sideways, mixed ir use-glyph-orientation.
direction: Nurodo pagrindinę teksto kryptį (LTR arba RTL).
unicode-bidi: Kontroliuoja, kaip Unicode dvikryptis algoritmas taikomas elementui.

3. Mišrios Krypties Teksto Tvarkymas

Dirbant su tekstu, kuriame yra ir LTR, ir RTL simbolių (pvz., angliškas tekstas arabiškoje pastraipoje), svarbu naudoti savybę unicode-bidi, kad būtų užtikrintas teisingas atvaizdavimas. Reikšmė bidi-override dažnai naudojama norint priverstinai nustatyti konkrečią kryptį.


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

4. Šriftų Aspektai

Ne visi šriftai tinka vertikaliam rašymui. Kai kuriuose šriftuose gali nebūti glifų, skirtų vertikaliam rašymui, arba jie gali būti atvaizduojami neteisingai. Naudodami vertikalius rašymo režimus, rinkitės šriftus, kurie yra specialiai sukurti vertikaliam tekstui arba kurie gerai palaiko vertikalius glifus.

Rytų Azijos šalių (Kinijos, Japonijos, Korėjos) šriftai paprastai labai gerai palaiko vertikalų rašymą.

5. Prieinamumas

Užtikrinkite, kad jūsų naudojamas writing-mode neigiamai nepaveiktų prieinamumo. Pateikite alternatyvų tekstą paveikslėliams ir kitam netekstiniam turiniui bei užtikrinkite, kad tekstas būtų skaitomas ir suprantamas neįgaliems vartotojams. Naudokite semantinius HTML elementus ir ARIA atributus prieinamumui pagerinti.

6. Naršyklių Suderinamumas

writing-mode yra gerai palaikoma šiuolaikinėse naršyklėse, tačiau senesnėms naršyklėms gali prireikti tiekėjų prefiksų (pvz., -webkit-writing-mode, -ms-writing-mode). Naudokite CSS pirminio apdorojimo įrankius, tokius kaip Sass ar Less, kad automatizuotumėte tiekėjų prefiksų pridėjimą, arba naudokite įrankį, pvz., „Autoprefixer“.

Geriausios `writing-mode` Naudojimo Praktikos

Norėdami efektyviai naudoti writing-mode ir kurti visame pasaulyje prieinamas svetaines, laikykitės šių geriausių praktikų:

Kai tik įmanoma, naudokite logines savybes ir reikšmes. Tai padarys jūsų CSS labiau pritaikomą ir lengviau prižiūrimą.
Pasirinkite tinkamus šriftus vertikaliems rašymo režimams. Išbandykite savo šriftus, kad įsitikintumėte, jog jie teisingai atvaizduojami vertikaliame tekste.
Atsižvelkite į prieinamumą. Užtikrinkite, kad jūsų naudojamas writing-mode neigiamai nepaveiktų prieinamumo neįgaliems vartotojams.
Išbandykite savo maketus skirtingose naršyklėse ir įrenginiuose. Užtikrinkite, kad jūsų maketai būtų teisingai atvaizduojami skirtingose platformose.
Naudokite CSS pirminio apdorojimo įrankius arba „Autoprefixer“, kad tvarkytumėte tiekėjų prefiksus. Tai sutaupys jūsų laiką ir pastangas bei užtikrins, kad jūsų CSS būtų suderinamas su senesnėmis naršyklėmis.
Atskirkite turinį nuo pateikimo. Naudokite CSS, kad kontroliuotumėte savo turinio pateikimą, ir venkite naudoti HTML stiliaus tikslais.

Pasaulinių Svetainių, Naudojančių `writing-mode`, Pavyzdžiai

Daugelis svetainių visame pasaulyje naudoja writing-mode įvairiems tikslams – nuo prisitaikymo prie RTL kalbų iki vizualiai unikalių maketų kūrimo. Štai keli pavyzdžiai:

Naujienų svetainės arabų ar hebrajų kalbomis: Šiose svetainėse naudojama direction: rtl ir galimai writing-mode korekcijos teisingam teksto atvaizdavimui.
Japonijos ir Kinijos meno bei kultūros svetainės: Dažnai naudoja vertikalų rašymą antraštėms, meniu ir dekoratyviniams elementams.
Mados žurnalai: Dažnai naudoja vertikalų tekstą vizualiuose maketuose stilistiniams efektams pasiekti.

Išvada

CSS writing-mode yra galingas įrankis kuriant internacionalizuotas ir vizualiai patrauklias svetaines. Suprasdami skirtingas savybės reikšmes ir jos sąveiką su kitomis CSS savybėmis, galite kurti maketus, kurie prisitaiko prie skirtingų teksto krypčių ir pagerina vartotojo patirtį pasaulinei auditorijai. Nepamirškite atsižvelgti į prieinamumą, naršyklių suderinamumą ir šriftų pasirinkimą, kad jūsų svetainės būtų prieinamos ir vizualiai patrauklios visiems vartotojams.

Interneto svetainių kūrimui toliau evoliucionuojant, tokių technikų kaip writing-mode įvaldymas tampa vis svarbesnis kuriant tikrai globalias ir įtraukias internetines patirtis. Išnaudokite internacionalizacijos galią ir kurkite svetaines, kurios rezonuoja su vartotojais iš visų pasaulio kampelių.