Строка в вопросе не запускает неправильный порядок отображения, если в строке имени пользователя нет управляющих символов, но, например, сообщение вида
User (N badges) wrote:
сделает это, если пользователь будет заменен наимя арабскими буквами, скажем, أحمد, а N были заменены на число, скажем, 3. Тогда рендеринг будет
أحمد (3 значка):
Технически это неошибка;это следует из правил двунаправленности Unicode - сильная направленность арабских букв справа налево (RTL) влияет на символы со слабой направленностью, такие как круглые скобки.Но это все неправильно в практическом плане, конечно.Любая строка, которая может содержать символы RTL в общем контексте слева направо, должна быть защищена, изолирована.В документах HTML есть три способа сделать это:
- Уровень символов: используйте управляющие символы U + 202B (встраивание справа налево, RLE) перед и U + 202C (направленное форматирование pop, PDF) после строки.В HTML вы можете использовать
‫ и ‬ для них.Это поддерживается IE 9, но не большинством других браузеров. - Уровень разметки: используйте разметку
<bdi>.Как уже упоминалось, он еще не поддерживается браузерами. - Таблица стилей: используйте
unicode-bidi: embed.Обычно это поддерживается современными браузерами.
Вы можете комбинировать подход таблиц стилей с подходом разметки.Это логично, и в будущих браузерах этот двойной подход будет работать даже при отключенных таблицах стилей:
<script>
document.createElement('bdi');
</script>
<style>
bdi { unicode-bidi: bidi-override; }
</style>
...
<bdi>أحمد</bdi> (3 badges) wrote:
Код скрипта предназначен для того, чтобы старые версии IE распознавали элемент <bdi>, так чтостили будут влиять на это.Это, конечно, потерпит неудачу, когда сценарии отключены, поэтому было бы немного безопаснее использовать <span> с классом, и вы все равно можете обернуть его внутри <bdi>.Таким образом, альтернатива
<style>
.bdi { unicode-bidi: bidi-override; }
</style>
...
<bdi><span class=bdi>أحمد</span></bdi> (3 badges) wrote: