Smjer - CSS-trikovi

Anonim

directionNekretnina u CSS postavlja smjer strujanja sadržaja unutar elementa blok razini. To se odnosi na elemente teksta, umetnute elemente i ugradbene blokove. Također postavlja zadano poravnanje teksta i smjer kretanja ćelija tablice unutar retka tablice.

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

Valjane vrijednosti su:

  • ltr - Lijevo nadesno, zadano
  • rtl - S desna na lijevo
  • inherit - nasljeđuje svoju vrijednost od nadređenog elementa

Tekst na ovoj stranici postavljen je u zadanom ltrsmjeru. Najčešći slučaj postavljanja rtlje web stranica s hebrejskim ili arapskim tekstom. Evo primjera arapskog jezika postavljenog u rtl:

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

Postoji i HTML atribut za postavljanje smjera:

I svojstvo CSS i HTML atribut kaskadno će usmjeravati potomke. Preporučuje se da koristite HTML atribut, jer će to funkcionirati čak i ako CSS ne uspije ili ne utječe na stranicu iz bilo kojeg razloga.

Postoji i posebna HTML oznaka koja se može koristiti za promjenu smjera teksta: dvosmjerni nadjačani element. To postoji, tako da postoji element bez semantike koji se koristi samo u tu svrhu. Na primjer:

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

Da biste sve ovo uparili sa CSS-om ...

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

Prilikom izrade izgleda u svijetu pre-grid-mreže prije mreže, ljudi su često birali između plutajućih i ugrađenih blokova za stvaranje stupaca. Jedna od prednosti inline-bloka, osim uklanjanja potrebe za čišćenjem plutajućeg mjesta, jest ta što promjena svojstva smjera također preokreće izgled. To ne vrijedi za plutajuće slojeve, koje bi trebalo resetirati ako web stranica podržava više jezika i ako se smjer jezika promijeni iz ltr u rtl ili obrnuto.

Ako trebate promijeniti smjer umetnutog elementa (u odnosu na ono što je njegov nadređeni element na razini bloka), morat ćete upotrijebiti element ili osigurati da ugrađeni element pravilno postavi svojstvo unicode-bidi:

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

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
2.0+ 1,3+ Bilo koji 9,2+ 5,5+ Bilo koji 3.1+