CSS loogilised atribuudid: kirjutamisrežiimi ja suuna valdamine ülemaailmseks veebidisainiks

Tänapäeva omavahel seotud maailmas peab veebidisain teenindama tõeliselt ülemaailmset publikut. See nõuab arusaamist, kuidas erinevad keeled ja kultuurid esitavad teavet. Traditsiooniliselt tugines CSS füüsilistele atribuutidele, nagu margin-left, padding-top või text-align: left, mis on lahutamatult seotud sisulehe füüsilise vooga, tavaliselt vasakult paremale ja ülalt alla. See lähenemisviis aga laguneb, kui tegemist on keeltega, mida loetakse vertikaalselt, paremalt vasakule, või millel on ainulaadne teksti paigutus.

Tutvustame CSS loogilisi atribuute. See võimas CSS-i atribuutide kogum võimaldab arendajatel määrata kujundust ja paigutust sisuloogilise voo, mitte füüsilise esituse põhjal. See muudatus on revolutsiooniline rahvusvahelisuse (i18n) ja kohanduvate, vastupidavate veebikogemuste loomisel, mis tunduvad kasutajatele loomulikud olenemata nende keelest või piirkonnast.

See põhjalik juhend sukeldub sügavale kriitilistesse loogilistesse atribuutidesse, mis on seotud teksti suuna ja vooga: writing-mode ja direction. Uurime nende vastendusi, praktilisi rakendusi ja seda, kuidas need annavad teile võimaluse luua tõeliselt ülemaailmseid veebisaite.

Aluse mõistmine: füüsilised vs. loogilised atribuudid

Enne writing-mode ja direction'i juurde asumist on oluline mõista füüsiliste ja loogiliste CSS-i atribuutide põhierinevust.

• Füüsilised atribuudid: Need on atribuudid, millega oleme kõige tuttavamad. Need viitavad vaateaknas konkreetsetele suundadele, nagu margin-top, margin-right, padding-bottom, border-left, text-align. Kui määrate margin-left: 10px, on see marginaal alati elemendi vasakul küljel, olenemata teksti lugemise suunast.
• Loogilised atribuudid: Need atribuudid vastenduvad sisu sisemisele voole. Need on määratletud writing-mode ja direction abil. Näiteks margin-left asemel on meil margin-inline-start. See atribuut rakendab marginaali sisesuuna algusesse, mis võib olla vasakpoolne vasakult paremale lugemise keeles või parempoolne paremalt vasakule lugemise keeles. Samamoodi viitab margin-block-start ploki telje algusele.

Loogilised atribuudid on loodud automaatselt kohanema vastavalt dokumendi kehtestatud kirjutamisrežiimile ja suunale, muutes need asendamatuks paindlike ja kaasavate kujunduste loomisel.

writing-mode roll CSS-is

writing-mode atribuut on sisuvoolu arutamisel vaieldamatult kõige mõjukam. See määrab tekstiplokkide paigutuse suuna lehel ja ridade virnastamise nendes plokkides.

writing-mode peamised väärtused on:

• horizontal-tb (vaikimisi): Tekst liigub horisontaalselt vasakult paremale (nagu inglise, hispaania, prantsuse keeles) või paremalt vasakule (nagu araabia, heebrea keeles) ning plokid virnastatakse ülalt alla. See on paljude läänemaiste keelte kõige levinum kirjutamisrežiim.
• vertical-rl: Tekst liigub vertikaalselt ülalt alla ja veerud paigutatakse paremalt vasakule. See on levinud traditsioonilises Ida-Aasia tüpograafias, näiteks mõnes jaapani ja hiina keele vormis.
• vertical-lr: Tekst liigub vertikaalselt ülalt alla ja veerud paigutatakse vasakult paremale. See on vähem levinud, kuid seda kasutatakse mõnes vähemuskeeles ja spetsiifilistes stiilides.

Uurime neid näidetega:

writing-mode: horizontal-tb

See on standard enamiku ladina-põhiste ja paljude teiste keelte jaoks. Sisu liigub vasakult paremale ja uued read loovad uued, ülalt alla virnastatud read.

Näide:

            
.container {
  writing-mode: horizontal-tb;
  /* Muud CSS atribuudid */
}

            

              
                Copy
              
            
          

Selles režiimis vastab margin-inline-start atribuudile margin-left ja margin-block-start atribuudile margin-top.

writing-mode: vertical-rl

Siin muutuvad asjad visuaalselt erinevaks. Tekstiread loetakse ülalt alla ja järgnevad read paigutatakse eelneva rea vasakule poole. See hõlmab sageli muutusi tähemärkide pööramisel.

Näide:

            
.traditional-asian {
  writing-mode: vertical-rl;
}

            

              
                Copy
              
            
          

Kui writing-mode on vertical-rl:

• Sisemine telg on vertikaalne (ülevalt alla).
• Ploki telg on horisontaalne (paremalt vasakule).
• margin-inline-start viitab nüüd teksti voolu ülemisele marginaalile.
• margin-block-start viitab nüüd teksti voolu paremale küljele (ploki suuna alguses).

See mõjutab otseselt seda, kuidas loogilised atribuudid nagu margin-inline-start ja margin-block-start käituvad.

writing-mode: vertical-lr

Sellel režiimil on samuti vertikaalne teksti voog, kuid veerud on paigutatud vasakult paremale.

Näide:

            
.alternative-vertical {
  writing-mode: vertical-lr;
}

            

              
                Copy
              
            
          

writing-mode: vertical-lr puhul:

• Sisemine telg on vertikaalne (ülevalt alla).
• Ploki telg on horisontaalne (vasakult paremale).
• margin-inline-start viitab teksti voolu ülemisele marginaalile.
• margin-block-start viitab teksti voolu vasakule küljele.

direction mõju

Kui writing-mode määrab teksti orientatsiooni plokis (horisontaalne või vertikaalne) ja plokkide virnastamise, siis direction atribuut kontrollib spetsiifiliselt sisemise progresseerumise suunda plokis. Seda nähakse kõige sagedamini keeltes, mida loetakse paremalt vasakule (RTL) võrreldes vasakult paremale (LTR).

direction peamised väärtused on:

• ltr (vaikimisi): Vasakult paremale. Tekst liigub vasakult paremale.
• rtl: Paremalt vasakule. Tekst liigub paremalt vasakule.

direction on kriitiline, kui writing-mode on horizontal-tb, kuna see määrab, kas tekst liigub vasakult paremale või paremalt vasakule.

Näide RTL keelte jaoks:

            
.arabic-text {
  direction: rtl;
  writing-mode: horizontal-tb;
}

            

              
                Copy
              
            
          

Kui rakendatakse direction: rtl:

• Sisemine progresseerumine on paremalt vasakule.
• margin-inline-start viitab nüüd elemendi paremale küljele.
• margin-inline-end viitab nüüd elemendi vasakule küljele.
• padding-inline-start ja padding-inline-end kohanduvad samuti vastavalt.
• text-align väärtused nagu start ja end vahetuvad samuti. text-align: start viiks RTL kontekstis teksti paremale joondamisele.

Vastendamise maagia: kuidas loogilised atribuudid töötavad

Loogiliste atribuutide tõeline võimsus peitub nende võimes kohaneda valitseva writing-mode ja direction järgi. Jaotame levinumad vastendused:

Plokitelje atribuudid

Need atribuudid on seotud plokkide või ridade vooga dokumendis.

• margin-block-start: Vastendub ploki voolu alguses oleva marginaaliga.
• margin-block-end: Vastendub ploki voolu lõpus oleva marginaaliga.
• padding-block-start: Vastendub ploki voolu alguses oleva täidisega.
• padding-block-end: Vastendub ploki voolu lõpus oleva täidisega.
• border-block-start: Vastendub ploki voolu alguses oleva piiriga.
• border-block-end: Vastendub ploki voolu lõpus oleva piiriga.
• inset-block-start: Vastendub ploki voolu alguses oleva nihkega (paigutamiseks).
• inset-block-end: Vastendub ploki voolu lõpus oleva nihkega (paigutamiseks).

Plokitelje vastendustabel:

Sisetelja telje atribuudid

Need atribuudid on seotud teksti vooga real või elemendi paigutusega sisesuunalise suuna järgi.

• margin-inline-start: Vastendub sisemise voo alguses oleva marginaaliga.
• margin-inline-end: Vastendub sisemise voo lõpus oleva marginaaliga.
• padding-inline-start: Vastendub sisemise voo alguses oleva täidisega.
• padding-inline-end: Vastendub sisemise voo lõpus oleva täidisega.
• border-inline-start: Vastendub sisemise voo alguses oleva piiriga.
• border-inline-end: Vastendub sisemise voo lõpus oleva piiriga.
• inset-inline-start: Vastendub sisemise voo alguses oleva nihkega (paigutamiseks).
• inset-inline-end: Vastendub sisemise voo lõpus oleva nihkega (paigutamiseks).

Sisetelja telje vastendustabel:

Pange tähele, et vertikaalsetes kirjutamisrežiimides vastenduvad sisemised atribuudid ülemisele ja alumisele ning ploki atribuudid vasakule ja paremale.

Praktilised rakendused ja näited

Vaatame, kuidas need atribuudid praktilistes disainistsenaariumides avalduvad. Kasutame CSS-muutujaid (kohandatud atribuudid) oma väärtuste haldamiseks, mis on levinud ja tõhus muster rahvusvahelise stiili jaoks.

Näide 1: Globaalselt sõbralik navigeerimisriba

Mõelge navigeerimismenüüd, mis peab sujuvalt töötama inglise (LTR) ja araabia (RTL) paigutustes ning potentsiaalselt vertikaalses paigutuses.

Stsenaarium A: Põhilised LTR navigeerimine

            
<nav>
  <ul>
    <li><a href="#">Kodu</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
:root {
  --nav-link-margin-inline-start: 0;
  --nav-link-margin-inline-end: 15px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  /* Pole vaja spetsiifilisi suunast sõltuvaid stiile, kui kasutatakse flexboxi */
}

nav a {
  text-decoration: none;
  color: #333;
  padding-inline: 10px; /* Loogiline täidis */
  margin-inline-start: var(--nav-link-margin-inline-start);
  margin-inline-end: var(--nav-link-margin-inline-end);
}

/* RTL keelte jaoks */
.rtl nav a {
  margin-inline-start: var(--nav-link-margin-inline-end);
  margin-inline-end: var(--nav-link-margin-inline-start);
}

            

              
                Copy
              
            
          

Siin määratleme marginaalid, kasutades margin-inline-start ja margin-inline-end. Tavapärase LTR navigeerimise jaoks seame margin-inline-start 0-le ja margin-inline-end 15px-le. RTL paigutuse jaoks (kasutades klassi nagu `.rtl`) vahetame need väärtused.

Stsenaarium B: Kohandumine vertikaalse paigutuse jaoks

Kui sooviksime, et see navigeerimine kuvataks vertikaalselt, näiteks külgribal, võiksime muuta writing-mode ja kohandada loogilisi atribuute.

            
.vertical-nav nav ul {
  flex-direction: column; /* Virnastab üksused vertikaalselt */
  writing-mode: vertical-rl; /* Või vertical-lr */
}

.vertical-nav nav a {
  /* Kohandage loogilisi atribuute vertikaalseks vooluks */
  padding-block: 10px; /* Loogiline täidis ülevalt/alt vertikaalselt */
  margin-block-start: var(--nav-link-margin-inline-start); /* Vastendub margin-top */
  margin-block-end: var(--nav-link-margin-inline-end);   /* Vastendub margin-bottom */
  margin-inline-start: 5px; /* Marginaal paremal vertical-rl jaoks */
  margin-inline-end: 0;
}

/* Vertical-rl jaoks peame sisesuunalised marginaalid vahetama */
.vertical-nav.rtl nav a {
  margin-inline-start: 0;
  margin-inline-end: 5px;
}

            

              
                Copy
              
            
          

See näide rõhutab, kuidas loogilised atribuudid lihtsustavad kohandumist. Selle asemel, et iga stsenaariumi jaoks kõik margin-top, margin-bottom, margin-left ja margin-right ümber kirjutada, haldame loogilisi vastet ja laseme brauseril vastenduse kirjutamisrežiimi põhjal teha.

Näide 2: Elementide stiilimine erinevates kirjutamisrežiimides

Mõelge lihtsa kasti stiilimisele piiride ja täidisega, mis peaks käituma erinevates suundades ühtlaselt.

            
.content-box {
  /* Vaikimisi LTR Horisontaalne */
  writing-mode: horizontal-tb;
  direction: ltr;

  /* Ühtlase paigutuse jaoks loogilised atribuudid */
  padding: 20px;
  margin: 10px;
  border: 2px solid black;

  /* Loogiliste atribuutide eksplitsiitne kasutamine */
  padding-inline: 30px;
  padding-block: 15px;
  margin-inline-start: 25px;
  margin-block-start: 5px;
}

.content-box.rtl {
  direction: rtl;
}

.content-box.vertical {
  writing-mode: vertical-rl;
  /* Kohandused vertikaalseks vooluks */
  padding-inline: 15px;
  padding-block: 30px;
  margin-inline-start: 5px;
  margin-block-start: 25px;
}

/* Vertikaalrl jaoks tähendab sisesuunaline ülemist/alumist, plokiline vasakut/paremat */
.content-box.vertical.rtl {
  /* Kui peate vertikaalrl-s vahetama sisesuunda, mis on haruldane */
  /* Näiteks võivad mõned Jaapani skriptid omada erinevalt pööratud tähemärke */
  /* See osa sõltub tugevalt kontekstist ja hõlmab sageli text-orientation */
}

            

              
                Copy
              
            
          

Selles näites:

• .content-box puhul on padding ja margin loogiliselt seatud. padding-inline rakendub LTR-is vasakule/paremale ja padding-block rakendub ülalt/alt.
• Kui lisatakse `.rtl`, rakendub padding-inline nüüd paremale/vasakule küljele.
• Kui lisatakse `.vertical` koos writing-mode: vertical-rl, rakendub padding-inline ülevalt/alt ja padding-block vasakule/paremale.

Lisaks seotud atribuudid

Kuigi writing-mode ja direction on kesksed, täiustavad teised atribuudid teksti paigutuse ja orientatsiooni üle kontrolli:

• text-orientation: See atribuut määrab tähemärkide paigutuse reas. Seda kasutatakse peamiselt vertikaalsetes kirjutamisrežiimides. Levinud väärtused hõlmavad:
• mixed: Tähemärgid on paigutatud vastavalt nende skripti vaikimisi sätetele. Jaapani keeles on Kanji vertikaalne, Kana on vertikaalne ja ladina tähemärgid võivad olla 90 kraadi võrra päripäeva pööratud (sideways) või mitte pööratud (upright).
• sideways: Tähemärgid on pööratud 90 kraadi päripäeva.
• upright: Tähemärgid pole pööratud, mis tähendab, et nad kuvatakse nagu horisontaalses kirjutamisrežiimis, kuid vertikaalse rea sees. See on ideograafiliste skriptide puhul vähem levinud, kuid seda võib kasutada ladina tähemärkide puhul teatud kontekstides.
• text-align: Kui seda kasutatakse koos loogiliste atribuutidega, siis text-align: start joondab teksti sisemise telje algusesse ja text-align: end joondab teksti lõppu. See on kriitiline RTL keelte ja vertikaalsete kirjutamisrežiimide jaoks.
• white-space: Kuigi see pole otseselt seotud suunaga, mõjutab see teksti ümberpaigutust ja tühikuid, mis on eriti oluline vertikaalsetes kirjutamisrežiimides, kus reavahetus toimib erinevalt.

text-align vastendamine

text-align: start ja text-align: end on füüsiliste text-align: left ja text-align: right loogilised vasted.

text-align: start ja text-align: end kasutamine tagab, et tekst on joondatud õigesti vastavalt kirjutamise suunale, olgu see siis horisontaalne või vertikaalne.

Loogiliste atribuutide kasutamise eelised

Loogiliste atribuutide kasutamine oma CSS-is pakub märkimisväärseid eeliseid globaalse veebiarenduse jaoks:

• Tõeline rahvusvahelisus: Kujundused kohanduvad automaatselt erinevate kirjasüsteemidega (LTR, RTL, vertikaalne) ilma ulatusliku tingimusliku CSS-i või reasisese stiilita.
• Lihtsustatud hooldus: Säilitate ühe stiilide komplekti, mis toimivad erinevates keeltes ja paigutustes, vähendades koodi dubleerimist ja vigade võimalikkust.
• Parem ligipääsetavus: Tagab, et sisu liigub loomulikult ja ennustatavalt kasutajatele, olenemata nende keele taustast.
• Tulevikukindlus: Kuna veebistandardid arenevad ja toetatakse või tutvustatakse rohkem kirjutamisrežiime, on teie loogilistele atribuutidele tuginevad kujundused vastupidavamad.
• Täiustatud kujunduse paindlikkus: Võimaldab luua loomingulisi paigutusi, mis sisaldavad vertikaalset teksti või segapaigutustega sisu suurema kergusega.

Parimad praktikad ja kaalutlused

CSS loogiliste atribuutide tõhusaks kasutamiseks:

• Võtke omaks ainult loogilised atribuudid: Kui võimalik, loobuge füüsilistest atribuutidest nagu margin-left, eelistades margin-inline-start.
• Kasutage CSS-muutujaid: Kohandatud atribuudid on teie parimad sõbrad väärtuste haldamisel, mis võivad erinevate kirjutamisrežiimide või suundade vahel muutuda.
• Testige põhjalikult: Testige alati oma paigutusi tegeliku sisuga erinevates keeltes ja erinevate suunasätetega. Tööriistad nagu brauseri arendajate konsoolid võimaldavad teil simuleerida RTL-i või muuta kirjutamisrežiime.
• Mõistke oma sihtrühma: Kui teie sait on suunatud konkreetsetele piirkondadele, kus on RTL-keeli või vertikaalse teksti vajadusi, seadke nende kohanduste jaoks prioriteet.
• Varustrateegiad: Kuigi kaasaegsed brauserid toetavad loogilisi atribuute suurepäraselt, kaaluge vanemate brauserite jaoks varustrateegiaid, kui see on vajalik, kuigi see muutub üha vähem oluliseks.
• Paigutus Flexboxi ja Gridiga: Need kaasaegsed paigutusmoodulid töötavad loogiliste atribuutidega sujuvalt, muutes reageerivate ja kohandatavate liideste loomise lihtsamaks. Näiteks justify-content: start ja align-items: start käituvad loogiliselt.

Brauseri tugi

CSS loogiliste atribuutide, sealhulgas writing-mode ja direction, brauseritugi on nüüd väga lai kaasaegsetes brauserites nagu Chrome, Firefox, Safari ja Edge. Kuigi vanemad brauserid ei pruugi kõiki loogilisi atribuute täielikult toetada, on põhifunktsionaalsus laialdaselt saadaval, muutes need usaldusväärseks valikuks uute projektide ja progressiivsete täiustuste jaoks.

Kõige ajakohasema brauseritoe teabe saamiseks võite alati kontrollida caniuse.com.

Kokkuvõte

CSS loogilised atribuudid esindavad paradigmamuutust selles, kuidas me läheneme veebidisainile ülemaailmse publiku jaoks. Mõistes ja rakendades selliseid atribuute nagu writing-mode ja direction ning kasutades nende loogilisi vastendeid paigutuse, piiride ja positsioneerimise jaoks, saate luua veebisaite, mis on olemuselt paindlikumad, kohanduvamad ja kaasavamad.

Liikumine füüsilistelt loogilistele atribuutidele ei ole lihtsalt tehniline uuendus; see on investeering, et luua kõigile tervitatavam ja funktsionaalsem veeb. Alustage nende atribuutide integreerimist oma töövoogu juba täna ja looge tõeliselt rahvusvahelistatud veebikogemus.