Riktning - CSS-tricks

Anonim

Den directionegenskap i CSS anger riktningen för innehållsflöde inom ett block-nivå elementet. Detta gäller text-, inline- och inline-blockelement. Det anger också standardjustering av text och riktningen som tabellceller flyter inom en tabellrad.

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

De giltiga värdena är:

  • ltr - Vänster till höger, standard
  • rtl - Höger till vänster
  • inherit - ärver sitt värde från det överordnade elementet

Texten på denna sida är inställd i standardriktningen ltr. Det vanligaste användningsfallet att ställa in rtlär för webbsidor med hebreisk eller arabisk text. Här är ett exempel på arabiska i rtl:

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

Det finns ett HTML-attribut för att också ställa in riktningen:

Både CSS-egenskapen och HTML-attributet kommer att kaskadera riktningen till nedåtgående element. Det rekommenderas att du använder HTML-attributet, eftersom det fungerar även om CSS misslyckas eller inte påverkar sidan av någon anledning.

Det finns också en specifik HTML-tagg som kan användas för att ändra riktningen på texten: det dubbelriktade åsidosättande elementet. Detta finns så det finns ett semantikfritt element att använda just för detta ändamål. Till exempel:

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

För att para ihop allt detta med 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” = “dubbelriktad”

När man skapar layouter i en pre-flexbox-pre-grid-värld väljer människor ofta mellan floats och inline-block för att skapa kolumner. En fördel med inline-block, förutom att ta bort behovet av att rensa flottören, är att ändring av riktningsegenskapen också vänder layouten. Detta är inte sant för floats, vilket skulle behöva återställas om en webbsida stöder flera språk och språkriktningen ändras från ltr till rtl eller vice versa.

Om du behöver ändra riktningen för ett inbyggt element (mot vad dess överordnade blocknivåelement är) måste du antingen använda elementet eller se till att det inbyggda elementet ställer in unicode-bidi-egenskapen ordentligt:

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

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Några 9.2+ 5.5+ Några 3.1+