A directionpropriedade em CSS define a direção do fluxo de conteúdo em um elemento de nível de bloco. Isso se aplica a elementos de texto, embutidos e blocos embutidos. Ele também define o alinhamento padrão do texto e a direção em que as células da tabela fluem dentro de uma linha da tabela.
.main-content ( direction: rtl; /* Right to Left */ )Os valores válidos são:
ltr- Da esquerda para a direita, o padrãortl- Direita para esquerdainherit- herda seu valor do elemento pai
O texto nesta página é definido na ltrdireção padrão . O caso de uso mais comum a ser definido rtlé para páginas da web com texto hebraico ou árabe. Aqui está um exemplo de árabe definido em rtl:
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
Também existe um atributo HTML para definir a direção:
Tanto a propriedade CSS quanto o atributo HTML irão cascatear a direção para os elementos descendentes. É recomendado que você use o atributo HTML, pois isso funcionará mesmo se o CSS falhar ou não afetar a página por qualquer motivo.
Há também uma tag HTML específica que pode ser usada para alterar a direção do texto: o elemento de substituição bidirecional. Isso existe para que haja um elemento sem semântica para usar apenas para esse propósito. Por exemplo:
This text will go left to right. This text will go right to left.Para emparelhar tudo isso com 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” = “bidirecional”
Ao criar layouts em um mundo pré-grade pré-flexbox, as pessoas geralmente escolhem entre flutuadores e blocos embutidos para criar colunas. Uma vantagem do inline-block, além de remover a necessidade de limpar o float, é que alterar a propriedade direction reverte o layout também. Isso não é verdade para flutuantes, que precisariam ser redefinidos se uma página da web oferecer suporte a vários idiomas e a direção do idioma mudasse de ltr para rtl ou vice-versa.
Se você precisar alterar a direção de um elemento embutido (em relação ao que é seu elemento de nível de bloco pai), você precisará usar o elemento ou garantir que o elemento embutido defina a propriedade unicode-bidi corretamente:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Nenhum | 9,2+ | 5.5+ | Nenhum | 3.1+ |