Virziens - CSS-triki

Anonim

directionĪpašums CSS nosaka virzienu satura plūsmas ietvaros bloka līmeņa elements. Tas attiecas uz teksta, iekļautajiem un iekļautajiem blokiem. Tas arī nosaka noklusējuma teksta izlīdzināšanu un virzienu, kādā tabulas šūnas plūst tabulas rindā.

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

Derīgās vērtības ir:

  • ltr - no kreisās uz labo, noklusējums
  • rtl - no labās uz kreiso
  • inherit - manto savu vērtību no vecāku elementa

Šīs lapas teksts ir iestatīts noklusējuma ltrvirzienā. Visizplatītākais iestatīšanas gadījums rtlir tīmekļa lapas ar ebreju vai arābu tekstu. Šeit ir arābu kopas piemērs rtl:

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

Ir arī HTML atribūts virziena iestatīšanai:

Gan CSS īpašums, gan HTML atribūts kaskādēs virzienu uz pēcteča elementiem. Ieteicams izmantot HTML atribūtu, jo tas darbosies pat tad, ja CSS neizdodas vai kādu iemeslu dēļ neietekmē lapu.

Ir arī īpašs HTML tags, ko var izmantot teksta virziena maiņai: divvirzienu ignorēšanas elements. Tas pastāv, tāpēc ir elements bez semantikas, ko izmantot tikai šim nolūkam. Piemēram:

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

Lai to visu savienotu pārī ar 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” = “divvirzienu”

Veidojot izkārtojumus pirms-flexbox pirms-režģa pasaulē, kolonnu izveidošanai cilvēki bieži izvēlējās starp pludiņiem un inline-block. Viena inline-block priekšrocība, izņemot nepieciešamību notīrīt pludiņu, ir tā, ka, mainot virziena rekvizītu, tiek mainīts arī izkārtojums. Tas neattiecas uz pludiņiem, kurus vajadzētu atiestatīt, ja vietne atbalsta vairākas valodas un valodas virziens tiek mainīts no ltr uz rtl vai otrādi.

Ja jums ir jāmaina inline elementa virziens (salīdzinot ar tā vecākā bloka līmeņa elementu), jums būs jāizmanto elements vai jānodrošina, lai inline elements pareizi iestatītu rekvizītu unicode-bidi:

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

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Jebkurš 9.2+ 5.5+ Jebkurš 3.1+