Suunta - CSS-temppuja

Anonim

directionOminaisuus CSS näyttää suunnan sisällön virtauksen sisällä lohko-tason elementti. Tämä koskee teksti-, inline- ja inline-block-elementtejä. Se asettaa myös tekstin oletusasetuksen ja suunnan, jota taulukon solut virtaavat taulukkorivillä.

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

Kelvolliset arvot ovat:

  • ltr - Vasemmalta oikealle, oletus
  • rtl - Oikealta vasemmalle
  • inherit - perii arvonsa pääelementiltä

Tämän sivun teksti on asetettu ltroletussuuntaan. Yleisin käyttötapaus asetettaessa rtlon verkkosivustot, joissa on hepreaa tai arabiaa. Tässä on esimerkki arabiasta, joka on asetettu rtl: ssä:

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

Suunnan asettamiseen on myös HTML-attribuutti:

Sekä CSS-ominaisuus että HTML-attribuutti lisäävät suunnan jälkeläisille. On suositeltavaa käyttää HTML-määritettä, koska se toimii, vaikka CSS epäonnistuu tai ei vaikuta sivuun jostain syystä.

Siellä on myös erityinen HTML-tagi, jota voidaan käyttää tekstin suunnan muuttamiseen: kaksisuuntainen ohituselementti. Tämä on olemassa, joten on vain semanttista elementtiä, jota voidaan käyttää juuri tähän tarkoitukseen. Esimerkiksi:

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

Yhdistä tämä kaikki CSS: n kanssa…

*(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" = "kaksisuuntainen"

Luodessaan asetteluja pre-flexbox-esiruudukkoa käyttävässä maailmassa ihmiset valitsivat sarakkeiden luomiseksi usein kelluvien ja rivinvaihtolohkojen välillä. Yksi etu rivinvaihdossa, lukuun ottamatta uimurin poistamisen tarvetta, on se, että suuntaominaisuuden muuttaminen kääntää myös asettelun. Tämä ei päde kellukkeisiin, jotka on nollattava, jos verkkosivu tukee useita kieliä ja kielen suunta muutetaan ltr: stä rtl: ksi tai päinvastoin.

Jos haluat muuttaa inline-elementin suuntaa (sen päälohkotason elementin suhteen), sinun on joko käytettävä elementtiä tai varmistettava, että inline-elementti asettaa unicode-bidi-ominaisuuden oikein:

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

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
2.0+ 1.3+ Minkä tahansa 9.2+ 5.5+ Minkä tahansa 3.1+