css математические операторы в текстовом содержимом div получают специальную обработку

Question

Это развернутая версия класса css, над которым я работаю:

.display {
   overflow: hidden
   white-space: nowrap;
   text-align: right;
   direction: rtl;
}

Предполагается, что это текст, который отображается как калькулятор - справа налево.

Это прекрасно работает при добавлении чисел к текстовому содержимому, но любой добавленный математический оператор добавляется с левой стороны новейшей строки чисел.

Я не могу понять, почему это происходит, я запутался, почему это будет иметь такое запутанное поведение, без указания.

Answer 1

direction: rtl определяет текстовое поведение, которое вы хотели бы для языка с правым левым потоком. См. здесь :

Используйте RTL для языков, написанных справа налево (например, иврит или арабский c)

Правило direction заботится о некоторых лингвистических c характеристиках различных символов (числа, символы слова, специальные символы и т. д. c.), которые на первый взгляд могут быть неочевидными.

Это, например, помогает нам в следующем сценарии: скажем, у нас на сайте есть:

<h1>
    1 My Headline
</h1>

Теперь предположим, что наш сайт многоязычен и может заменить «Мой заголовок» соответствующими переводами на разных языках, если пользователь нажимает кнопку.

Предположим, «enildaeH yM» - это перевод «My Headline» на некотором воображаемом языке RTL (я не могу использовать настоящий арабский c или иврит, потому что я не говорю на нем). Затем мы можем просто оставить 1 там, где он есть, просто перевести фактическое содержание для каждого языка и добавить правильное direction правило:

.display {
    direction: rtl;
}

<h1 class="display">
    1 enildaeH yM
</h1>

Обратите внимание, как это сохраняет порядок слов и просто перемещает 1 в (правильное) начало.

В вашем сценарии с калькулятором я думаю использовать * Правило 1031 * - это неправильный подход, так как вы не имеете дело с языками, и сложные свойства этого правила здесь нежелательны. Может быть, text-align уже достаточно для вашей цели?