bdi- ja bdo-elementit

Englannin- ja arabiankielisiä nimiä sisältävä käyttäjäluettelo voi aiheuttaa sen, että arabialaisen nimen RTL-suunta leviää ympäröivään tekstiin. Kun kukin nimi ympäröidään <bdi>-elementillä, se eristetään: asettelu pysyy yhdenmukaisena riippumatta siitä, kumpaan suuntaan nimi sattuu olemaan.

<bdo dir="rtl"> (kaksisuuntaisuuden ohitus) pakottaa sisällölle tietyn suunnan ja ohittaa luonnollisen bidi-tulkinnan. Käytä sitä, kun haluat näyttää tekstin luonnollisesta poikkeavassa suunnassa — esimerkiksi renderöidäksesi koodiesimerkit LTR-suuntaisina RTL-sivulla.

Tavallisen elementin dir-attribuutti asettaa perussuunnan, mutta bidi-algoritmi toimii edelleen elementin sisällä. <bdo> poistaa bidi-algoritmin käytöstä sisällöltään — jokainen merkki kulkee tarkasti määritettyyn suuntaan kirjoitusjärjestelmästä riippumatta.

Aina, kun käyttäjän luomaa tekstiä upotetaan ympäröivään käyttöliittymätekstiin — esimerkiksi nimiä chat-otsikoihin, käyttäjänimiä kommentteihin tai otsikoita syöteluettelon kohteisiin. Eristys varmistaa, ettei käyttäjän kirjoittama teksti vaikuta käyttöliittymän asetteluun.

Harvoin. Ainoa varsinainen käyttötarkoitus on kaksisuuntaisen tekstin opettaminen (sen näyttäminen, miltä merkkijono näyttää käännettynä) tai huonosti merkittyjen tietojen korjaaminen silloin, kun luonnollinen bidi-resoluutio tuottaa väärän visuaalisen järjestyksen.

Tuntemattoman suunnan käyttäjäsisällössä kannattaa käyttää <bdi dir="auto">-elementtiä kaksinkertaisen varmistuksen vuoksi: automaattinen tunnistus valitsee perussuunnan sisällön perusteella, ja bdi estää tämän suunnan vuotamisen ympäröivään tekstiin.

bdi:tä ja bdo:ta tuetaan kaikissa moderneissa selaimissa. Ne kuuluvat HTML5:een, ja ne ovat olleet vakaita jo vuosia. IE:n vanhemmista versioista puuttuu bdi, mutta nämä versiot ovat toiminnallisesti vanhentuneita; moderneissa sivustoissa bdi:tä voi käyttää vapaasti.

Ruudunlukijat noudattavat bidi-eristystä: teksti <bdi>-elementin sisällä luetaan omalla kieliäänellään (kun lang on määritetty), eikä ympäröivä konteksti pääse vaikuttamaan siihen. bdi auttaa myös puhesynteesiä tuottamaan asianmukaiset tauot eristettyjen ilmausten ympärille.

Mallineissa, joissa on paikanvaraajia ("Tervetuloa, {name}"), paikanvaraaja kannattaa ympäröidä <bdi>-elementillä: Welcome, <bdi>{name}</bdi>. Käyttäjän nimi — englanniksi, arabiaksi tai näitä sekoittaen — näytetään oikein häiritsemättä muun tervehdyksen esitystä.

bdi eristää osan tekstin suunnan niin, ettei se vaikuta ympäröivään tekstiin — sitä käytetään upotettuun käyttäjäsisältöön, kuten nimissä mallineissa. bdo pakottaa tietyn suunnan ohittaen bidin, ja sitä tarvitaan harvoin opetusesimerkkien ulkopuolella. Yhdistämällä bdi:n määritteeseen dir="auto" käyttäjän antamaa, tuntemattomalla kielellä olevaa tekstiä voidaan käsitellä turvallisesti.