| type |
|---|
static |
This is the preview of the same Markdown as you'd see it on GitHub.
Suppose you want to list the winners of a competition:
<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;
}This works fine as long as the names are LTR, but when you insert an RTL name, then the -1, which consists of characters with neutral or weak directionality, will adopt the directionality of the RTL text, and the result will be garbled:
<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;
}You can use <bdi> to instruct the browser to treat the name in isolation from its embedding context:
<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;
}