Clash Royale CLAN TAG#URR8PPP

How to apply BDI tag inside css code?

I'm using bdi tag in several places in my page.

bdi

I want to know if there is a way to apply this tag as part of a css class in some way ?

EDIT:

I'm trying to make this solution for drop down lists items, so the bdi functionality will fixed my problem with the brackets inside it:

bdi

That's what I tried so far:

<form:select id="locale" path="locale">
<c:forEach items="$locales" var="loc">
<c:choose>
<c:when test="$loc.key == currentLocale">
<option itemValue="key" value="$loc.key" selected><bdi><div>$loc.value</div></bdi></option>
</c:when>
<c:otherwise>
<option itemValue="key" value="$loc.key"><bdi><div>$loc.value</div></bdi></option>
</c:otherwise>
</c:choose>
</c:forEach>
</form:select>


1 Answer
1

You can use CSS property unicode-bidi which when used along with direction property, gives the flavor of html bdi.

unicode-bidi

direction

bdi

Demo snippet below shows a working example:

.bdi
direction: ltr;


<select>
<option class="bdi">English (United States)</option>
<option class="bdi">(ישראל) עִברִית</option>
</select>

If you need more information or other use cases in this regard, here is the MDN page links of unicode-bidi and direction.

unicode-bidi: plaintext;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.