Het element <bdi>

Attributen

Zoals alle andere HTML-elementen ondersteunt dit element de globale attributen, met dien verstande dat het dir-attribuut zich anders gedraagt dan gebruikelijk: het staat standaard op auto, wat betekent dat de waarde nooit wordt overgenomen van het bovenliggende element. Dit betekent dat, tenzij je een waarde van rtl of ltr opgeeft voor dir, de user agent de juiste richting bepaalt op basis van de inhoud van de <bdi>.

Voorbeelden

Geen bdi met alleen LTR

Dit voorbeeld toont een lijst met winnaars van een wedstrijd met alleen <span>-elementen. Wanneer de namen alleen LTR-tekst bevatten, zien de resultaten er goed uit:

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

Geen bdi met RTL-tekst

Dit voorbeeld toont een lijst met winnaars van een wedstrijd met alleen <span>-elementen, waarbij de naam van een van de winnaars uit RTL-tekst bestaat. In dit geval neemt - 1, dat bestaat uit tekens met neutrale of zwakke richting, de richting van de RTL-tekst over, en wordt het resultaat verminkt:

<ul>
  <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

bdi gebruiken met LTR- en RTL-tekst

Dit voorbeeld toont een lijst met winnaars van een wedstrijd met <bdi>-elementen. Deze elementen geven de browser de opdracht om de naam geïsoleerd van zijn insluitende context te behandelen, zodat de voorbeelduitvoer correct geordend is:

<ul>
  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

Technische samenvatting

Zie ook

• <bdo>