Avage CSS-i loogiliste atribuutide võimsus ülemaailmseks veebidisainiks, keskendudes kirjutamisrežiimi ja suuna atribuutidele ning nende vastendustele rahvusvahelistatud kujunduste jaoks.
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ääratemargin-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-leftasemel on meilmargin-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 viitabmargin-block-startploki 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 */
}
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;
}
Kui writing-mode on vertical-rl:
- Sisemine telg on vertikaalne (ülevalt alla).
- Ploki telg on horisontaalne (paremalt vasakule).
margin-inline-startviitab nüüd teksti voolu ülemisele marginaalile.margin-block-startviitab 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;
}
writing-mode: vertical-lr puhul:
- Sisemine telg on vertikaalne (ülevalt alla).
- Ploki telg on horisontaalne (vasakult paremale).
margin-inline-startviitab teksti voolu ülemisele marginaalile.margin-block-startviitab 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;
}
Kui rakendatakse direction: rtl:
- Sisemine progresseerumine on paremalt vasakule.
margin-inline-startviitab nüüd elemendi paremale küljele.margin-inline-endviitab nüüd elemendi vasakule küljele.padding-inline-startjapadding-inline-endkohanduvad samuti vastavalt.text-alignväärtused nagustartjaendvahetuvad samuti.text-align: startviiks 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:
| Loogiline atribuut | writing-mode: horizontal-tb, direction: ltr |
writing-mode: horizontal-tb, direction: rtl |
writing-mode: vertical-rl |
writing-mode: vertical-lr |
|---|---|---|---|---|
margin-block-start |
margin-top |
margin-top |
margin-right |
margin-left |
margin-block-end |
margin-bottom |
margin-bottom |
margin-left |
margin-right |
padding-block-start |
padding-top |
padding-top |
padding-right |
padding-left |
padding-block-end |
padding-bottom |
padding-bottom |
padding-left |
padding-right |
border-block-start |
border-top |
border-top |
border-right |
border-left |
border-block-end |
border-bottom |
border-bottom |
border-left |
border-right |
inset-block-start |
top |
top |
right |
left |
inset-block-end |
bottom |
bottom |
left |
right |
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:
| Loogiline atribuut | writing-mode: horizontal-tb, direction: ltr |
writing-mode: horizontal-tb, direction: rtl |
writing-mode: vertical-rl |
writing-mode: vertical-lr |
|---|---|---|---|---|
margin-inline-start |
margin-left |
margin-right |
margin-top |
margin-top |
margin-inline-end |
margin-right |
margin-left |
margin-bottom |
margin-bottom |
padding-inline-start |
padding-left |
padding-right |
padding-top |
padding-top |
padding-inline-end |
padding-right |
padding-left |
padding-bottom |
padding-bottom |
border-inline-start |
border-left |
border-right |
border-top |
border-top |
border-inline-end |
border-right |
border-left |
border-bottom |
border-bottom |
inset-inline-start |
left |
right |
top |
top |
inset-inline-end |
right |
left |
bottom |
bottom |
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>
: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);
}
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;
}
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 */
}
Selles näites:
.content-boxpuhul onpaddingjamarginloogiliselt seatud.padding-inlinerakendub LTR-is vasakule/paremale japadding-blockrakendub ülalt/alt.- Kui lisatakse `.rtl`, rakendub
padding-inlinenüüd paremale/vasakule küljele. - Kui lisatakse `.vertical` koos
writing-mode: vertical-rl, rakendubpadding-inlineülevalt/alt japadding-blockvasakule/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, siistext-align: startjoondab teksti sisemise telje algusesse jatext-align: endjoondab 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.
| Loogiline `text-align` | writing-mode: horizontal-tb, direction: ltr |
writing-mode: horizontal-tb, direction: rtl |
writing-mode: vertical-rl |
|---|---|---|---|
text-align: start |
text-align: left |
text-align: right |
text-align: top |
text-align: end |
text-align: right |
text-align: left |
text-align: bottom |
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, eelistadesmargin-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: startjaalign-items: startkä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.