Правац - ЦСС-трикови

Anonim

directionИмовина у ЦСС поставља правац од садржаја тока у елементу на блок нивоу. Ово се односи на елементе текста, уметнуте елементе и уградне блокове. Такође поставља подразумевано поравнање текста и правац кретања ћелија табеле унутар реда табеле.

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

Важеће вредности су:

  • ltr - Лево надесно, подразумевано
  • rtl - Десна на лево
  • inherit - наслеђује своју вредност од надређеног елемента

Текст на овој страници подешен је у подразумеваном ltrсмеру. Најчешћи случај употребе rtlје за веб странице са хебрејским или арапским текстом. Ево примера арапског језика постављеног у ртл:

Заборавили сте лозинку? Можете да се одлучите за било шта друго.

Постоји и ХТМЛ атрибут за подешавање смера:

И својство ЦСС и ХТМЛ атрибут каскадно ће усмерити ка силазним елементима. Препоручује се да користите ХТМЛ атрибут, јер ће то функционисати чак и ако ЦСС не успије или не утиче на страницу из било ког разлога.

Постоји и посебна ХТМЛ ознака која се може користити за промену правца текста: двосмерни надјачани елемент. Ово постоји, тако да постоји елемент без семантике који се користи само у ту сврху. На пример:

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

Да бисте све ово упарили са ЦСС-ом ...

*(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; )

„Биди“ = „двосмерно“

При креирању распореда у свету пре-грид мреже пре-мреже, људи су често бирали између пловака и уграђених блокова да би креирали колоне. Једна од предности инлине-блока, осим уклањања потребе за чишћењем флоат-а, је та што промена својства правца обрће и изглед. Ово не важи за флоат-ове, које би требало ресетовати ако веб страница подржава више језика и ако се смер језика промени из лтр у ртл или обрнуто.

Ако требате да промените правац уметнутог елемента (у односу на оно што је његов родитељски елемент на нивоу блока), мораћете или да користите елемент, или да осигурате да инлине елемент правилно поставља својство уницоде-биди:

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

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
2.0+ 1.3+ Било који 9.2+ 5.5+ Било који 3.1+