Kryptis - CSS-gudrybės

Anonim

directionCSS nuosavybė nustato, kad turinio srautą per blokas lygio elementas kryptį. Tai taikoma teksto, įterptiniams ir įterptiniams elementams. Taip pat nustatomas numatytasis teksto išlygiavimas ir kryptis, kuria lentelės langeliai teka lentelės eilutėje.

.main-content ( direction: rtl; /* Right to Left */ )

Galiojančios vertės yra:

  • ltr - Iš kairės į dešinę, numatytasis nustatymas
  • rtl - Iš dešinės į kairę
  • inherit - paveldi savo vertę iš pirminio elemento

Šio puslapio tekstas nustatytas numatytąja ltrkryptimi. Dažniausias nustatymo atvejis rtlyra tinklalapiai su hebrajų arba arabų kalba. Čia pateikiamas arabų rinkinio rtl pavyzdys:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

Taip pat yra HTML atributas, skirtas nustatyti kryptį:

Tiek CSS ypatybė, tiek HTML atributas pakopomis nukreips palikuonių elementus. Rekomenduojama naudoti HTML atributą, nes tai veiks net tuo atveju, jei CSS nepavyks arba dėl kokios nors priežasties neturės įtakos puslapiui.

Taip pat yra speciali HTML žyma, kurią galima naudoti norint pakeisti teksto kryptį: dvikryptis nepaisymo elementas. Tai egzistuoja, todėl yra elementas be semantikos, kurį galima naudoti tik šiam tikslui. Pavyzdžiui:

This text will go left to right. This text will go right to left.

Norėdami susieti visa tai su CSS ...

*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )

„Bidi“ = „dvikryptis“

Kurdami maketus „pre-flexbox“ išankstinio tinklelio pasaulyje, žmonės, norėdami sukurti stulpelius, dažnai rinkosi tarp „float“ ir „inline-block“. Vienas „inline-block“ privalumas, išskyrus tai, kad nereikia išvalyti plūdės, yra tai, kad pakeitus krypties savybę, pakeičiamas ir išdėstymas. Tai netinka plūdėms, kurias reikės iš naujo nustatyti, jei tinklalapis palaiko kelias kalbas ir kalbos kryptis pakeista iš ltr į rtl arba atvirkščiai.

Jei reikia pakeisti įterptojo elemento kryptį (atsižvelgiant į jo pagrindinio bloko lygio elementą), turėsite naudoti elementą arba užtikrinti, kad įterptasis elementas tinkamai nustatytų ypatybę „unicode-bidi“:

Some regular text reverse direction text text reverse direction
span(dir) ( unicode-bidi: bidi-override; )

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
2.0+ 1,3+ Bet koks 9,2+ 5,5 ir daugiau Bet koks 3.1+