Sintassi

Significato dei valori principali:

• normal: Valore predefinito. Il testo segue l'algoritmo di direzione bidirezionale standard senza modifiche.

• embed: Imposta un livello di annidamento bidirezionale, applicando la direzione specificata da direction al testo contenuto, senza sovrascrivere il testo stesso.

• isolate: Isola il testo dal contesto circostante in termini di direzione, evitando che influenzi o venga influenzato da testi esterni.

• bidi-override: Sovrascrive la direzione naturale del testo con la direzione specificata da direction, forzando la visualizzazione dei caratteri secondo tale direzione.

• isolate-override: Combina l'isolamento del testo con la sovrascrittura della direzione come nel bidi-override.

• plaintext: Tratta il testo come normale testo, ma senza ereditare il contesto bidirezionale del genitore (usato raramente).

Esempio proprietà: unicode-bidi

Codice Esempio: unicode-bidi

CODE: CSS

1. .unicode-bidi-example {

2.   border: 2px solid #50a14f;

3.   padding: 15px;

4.   width: 350px;

5.   font-size: 18px;

6.   background-color: #f0f9f4;

7. }

8. .embed {

9.   direction: rtl;

10.   unicode-bidi: embed;

11.   background-color: #d1e7dd;

12.   margin-bottom: 10px;

13.   padding: 10px;

14. }

15. .bidi-override {

16.   direction: rtl;

17.   unicode-bidi: bidi-override;

18.   background-color: #f8d7da;

19.   padding: 10px;

20. }

Contenuto Esempio: unicode-bidi

  
  <style>
    .unicode-bidi-example {
      border: 2px solid #50a14f;
      padding: 15px;
      width: 350px;
      font-size: 18px;
      background-color: #f0f9f4;
    }
    .embed {
      direction: rtl;
      unicode-bidi: embed;
      background-color: #d1e7dd;
      margin-bottom: 10px;
      padding: 10px;
    }
    .bidi-override {
      direction: rtl;
      unicode-bidi: bidi-override;
      background-color: #f8d7da;
      padding: 10px;
    }
  </style>
  
  <div class="unicode-bidi-example">
    <div class="embed">
      Questo testo è in direzione RTL (embed). مثال على نص عربي
    </div>
    <div class="bidi-override">
      Questo testo è in direzione RTL (bidi-override). مثال على نص عربي
    </div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser