Как применить тег BDI внутри кода CSS?
Я использую тег bdi в нескольких местах на своей странице.
Я хочу знать, есть ли способ каким-либо образом применить этот тег как часть класса css?
Обновлено:
Я пытаюсь сделать это решение для элементов раскрывающихся списков, поэтому функциональность bdi исправит мою проблему со скобками внутри него:
Вот что я пробовал до сих пор:
<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>
Добро пожаловать в SO! Пожалуйста, предоставьте код, который вы уже пробовали.
@ MatějŠtágl Я думаю, не все сообщения в SO нуждаются в коде. Как и в этом вопросе, OP не намекает, как этого добиться, и как он мог создать код для этой проблемы. Просто мысль.
Класса CSS не существует. В HTML есть классы. В CSS есть селекторы классов. Действительно непонятно, о чем вы спрашиваете. Вы спрашиваете, как настроить таргетинг на элементы bdi с помощью CSS (который будет использовать селектор типа, а не селектор класса)? Вы спрашиваете, как применить семантику, которую предоставляет элемент bdi, с правилом CSS (правилом, а не классом)?
Я хотел сказать селекторы классов, и я спрашиваю, как применить семантику элемента bdl к селектору css
@roeygol, не могли бы вы показать фрагмент кода одного из текстов, который вы используете внутри bdi, чтобы было ясно, с каким типом текстов вы работаете с bdi - любым юникодом, арабским языком или чем-то еще ??
@RakibulIslam использует в основном арабский и подобные языки, которые также представлены в скобках, что делает мои данные неверными.
@roeygol Я дал ответ, надеюсь, это поможет :)
Ответы 2
Вы можете использовать свойство CSS unicode-bidi, которое при использовании вместе со свойством direction дает оттенок html bdi.
Демо-фрагмент ниже показывает рабочий пример:
.bdi {
direction: ltr;
}<select>
<option class = "bdi">English (United States)</option>
<option class = "bdi">(ישראל) עִברִית</option>
</select>Если вам нужна дополнительная информация или другие варианты использования в этом отношении, вот ссылки на страницы MDN юникод-биди и направление.
Спасибо, но мне нужно знать, как управлять этим решением для выпадающих списков, у меня тоже проблема
Не могли бы вы добавить коды ваших выпадающих списков, которые не работают, тогда будет легче отлаживать.
@roeygol Следите за внесенными мной правками, если это поможет. Я не уверен, спрашиваете вы об этом или о чем-то другом. Дай мне знать.
Я изменил его на unicode-bidi: plaintext;, и он исправил выбранный элемент, а не элементы в списке (когда список открыт), поэтому мы на половине пути
@roeygol На самом деле, я не могу понять фактический результат, который вы ожидаете. Может быть, это проясняет какая-нибудь графика или какой-нибудь демонстрационный текст.
Картинка добавляется к исходной картинке
@roeygol Молодец, теперь стало понятнее. Но я вижу, что тексты уже расположены справа налево, но каков ваш ожидаемый результат? А также, на каком языке, вы можете предоставить демонстрационный текст в своем сообщении, чтобы мы могли его протестировать. И пробовали ли вы мое предыдущее отредактированное решение, я думал, что это решит вашу проблему.
Язык - иврит, и вы можете видеть, что выбранный вариант представлен хорошо, а элемент из раскрывающегося списка - нет (элемент на английском языке). Ожидается закрепление кронштейна для английского элемента.
@roeygol Хорошо, теперь все ясно. Я дам вам знать, смогу ли я это решить.
Позвольте нам продолжить обсуждение в чате.
@roeygol Не могли бы вы теперь просмотреть фрагмент кода в моем ответе ??
Укажите направление текста через CSS
Используйте для этого direction: ltr и direction: rtl. Вам нужно выяснить направление текста каждого варианта. Затем укажите правильный класс опции:
select {
width: 200px;
}
.rtl {
direction: rtl;
}
.ltr {
direction: ltr;
}<select class = "rtl">
<option class = "ltr">English (United States)</option>
<option class = "rtl">(ישראל) עִברִית</option>
</select>Думаю, это решит вашу проблему с брекетами. Я думаю, вы хотите, чтобы все параметры были выровнены по правому краю. Я пытался заставить это работать, но не мог найти способа.