Propriedade CSS unicode-bidi - Uso, Sintaxe e Exemplos

A propriedade unicode-bidi controla como o texto bidirecional (bidi) — texto que mistura scripts da esquerda para a direita e da direita para a esquerda — é disposto, permitindo que você substitua o algoritmo bidirecional Unicode integrado do navegador.

A maioria das páginas nunca precisa disso. Os navegadores já reordenam corretamente textos mistos em Latin/árabe/hebraico usando o Algoritmo Bidirecional Unicode. Você recorre ao unicode-bidi apenas quando esse comportamento padrão está incorreto: por exemplo, quando um valor isolado (um número de telefone, um nome de usuário, um preço) vaza sua direção para a frase ao redor, ou quando você deliberadamente deseja forçar uma ordem visual.

Na prática, unicode-bidi é combinado com a propriedade direction: direction define a direção base do texto, e unicode-bidi decide com que intensidade essa direção base é aplicada. Juntas, elas são o equivalente CSS do atributo HTML dir e dos elementos <bdo>/<bdi>.

Informação

unicode-bidi só tem efeito visível quando o elemento também contém texto de direção mista. Por si só, não faz nada — funciona em conjunto com a propriedade direction.

Valor Inicial	normal
Aplica-se a	Todos os elementos, embora alguns valores não tenham efeito em elementos não inline.
Herdado	Sim.
Animável	Não.
Versão	CSS2
Sintaxe DOM	object.style.unicodeBidi = "isolate";

Sintaxe

Valores CSS de unicode-bidi

unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit;

Exemplo da propriedade unicode-bidi:

No exemplo abaixo, o bloco .text usa direction: rtl com unicode-bidi: embed. A frase em árabe mantém sua ordem natural da direita para a esquerda, enquanto o embedding adiciona um nível extra de bidi para que o bloco inteiro seja tratado como da direita para a esquerda — a pontuação e as palavras em Latin são posicionadas em relação a essa base da direita para a esquerda.

Exemplo de código CSS unicode-bidi

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.text {
        direction: rtl;
        unicode-bidi: embed;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-bidi property example</h2>
    <div>Normal writing direction. مرحبا بالعالم</div>
    <div class="text">Using "embed" value. مرحبا بالعالم</div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade unicode-bidi com o valor "bidi-override":

bidi-override é o valor mais agressivo: ele ignora a direção inerente dos caracteres e dispõe cada caractere estritamente na ordem definida pela direction. Com direction: rtl abaixo, até o texto em Latin é invertido caractere por caractere, portanto esse valor é útil principalmente para efeitos especiais, e não para texto de documento real.

Exemplo CSS unicode-bidi bidi-override

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.text {
        direction: rtl;
        unicode-bidi: bidi-override;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-bidi property example</h2>
    <div>Normal writing direction. مرحبا بالعالم</div>
    <div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
normal	Não sugere um nível adicional de embedding.
embed	Abre um nível adicional de embedding quando o elemento é inline.
bidi-override	Cria uma substituição para um elemento inline. Para elementos contêiner de bloco, esse valor cria uma substituição para descendentes de nível inline.
isolate	O elemento é isolado de seus irmãos. Este valor especifica que a direcionalidade do contêiner do elemento deve ser calculada sem considerar o conteúdo deste elemento.
isolate-override	Aplica o comportamento de isolamento ao conteúdo ao redor e o comportamento de substituição ao conteúdo interno.
plaintext	Este valor se comporta como o valor isolate, mas a direcionalidade é calculada usando as regras P2 e P3 do Algoritmo Bidirecional Unicode.
initial	Define a propriedade como seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

Qual valor usar?

Apenas incorporando uma frase na direção oposta? Use embed junto com a direction correspondente. Este é o caso clássico de "citar algo em árabe dentro de um parágrafo em português".
Inserindo texto gerado pelo usuário de direção desconhecida (um nome, um comentário, um termo de busca)? Prefira isolate. Ele impede que esse trecho inverta a direção das palavras ao redor — a mesma proteção que o elemento HTML <bdi> oferece.
plaintext é para conteúdo como mensagens de chat ou linhas de log onde cada parágrafo deve escolher sua própria direção a partir de seu primeiro caractere forte, em vez de herdar uma da página.
bidi-override deve ser raro. Use-o apenas quando você intencionalmente deseja forçar a ordem visual (por exemplo, espelhar texto como efeito), pois ele substitui a ordem de leitura natural de cada caractere.

Observe que unicode-bidi não é animável, portanto transições e animações não têm efeito sobre ela.

Propriedades relacionadas

direction — define a direção base do texto (ltr ou rtl) sobre a qual unicode-bidi atua.
writing-mode — controla o fluxo de bloco horizontal versus vertical.
text-align — alinha o texto dentro de sua caixa de linha, o que muitas vezes precisa de ajuste para conteúdo RTL.

Prática

A propriedade unicode-bidi

especifica o comportamento do texto bidirecional em um documento.permite substituir o algoritmo Unicode.permite controlar o embedding de texto.não é uma propriedade animável.