Как изменить отрицательную позицию знака css

Question

У меня есть веб-сайт, который показывает его содержание в двух направлениях. RTL & LTR

Когда страница находится в режиме содержимого ltr, каждый раз в порядке, а слева от номера отображается отрицательный знак.

body {
    direction: ltr;
}

Например: -1

Но когда страница находится в режиме RTL,

body {
    direction: rtl;
}

отрицательный знак чисел отображается справа от номера.

Например: 1-

Принимая во внимание, что я хочу показать отрицательный знак слева от числа в обоих случаях. Как мне это сделать? Благодарю.

Answer 1

Оберните число в span и добавьте к нему два следующих css:

direction: ltr;
display: inline-block;

Answer 2

Проверьте код ниже!

BODY {
    direction: rtl;
}
#test {
    direction: ltr;   
    text-align: right
}

    Sample Text abc <br />
    -1
    <p id="test">-1 </p>

Answer 3

Мы также поддерживаем оба направления на нашем сайте и с большим количеством номеров. Я нашел, что это чище, потому что есть случаи, которые мы не хотим менять: display: inline-block; имущество

решение:

div {
    direction: ltr;
    unicode-bidi: bidi-override;
}

https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp для получения дополнительной информации о свойствах и параметрах

Answer 4

Это можно использовать

body {
  direction: rtl;
  unicode-bidi: plaintext;
}

Обратитесь к этой ссылке mdn

Answer 5

Упаковка чисел в span и изменение направления, похоже, не имело никакого эффекта, как показано в этой скрипке: https://jsfiddle.net/shaansingh/kLpa8ygv/.

Однако ОП обнаружил, что, добавив inline-block и писать - в промежутке решение сработало. Просто добавьте его к этому ответу, чтобы он был настолько изобретательным, насколько это возможно. Пожалуйста, проверьте комментарии и ответ ОП для более подробной информации.

direction: ltr;
display: inline-block; 

Вы всегда можете прибегнуть к небольшому JavaScript для решения проблемы. Используйте этот скрипт, чтобы определить, имеет ли тело значение rtl, и соответственно изменить его (предполагая, что ltr является значением по умолчанию в HTML):

var element = document.body,
    style = window.getComputedStyle(element),
    direction = style.getPropertyValue('direction');

if (direction == "rtl") {
    document.getElementById("neg").innerHTML = "1-";
}

Полный код находится в этой скрипке: https://jsfiddle.net/shaansingh/axpevvon/4/

Answer 6

Вы можете указать число в span и указать направление ltr как:

<span class="nagativeVal">-1</span>

CSS:

.nagativeVal
{
  direction: ltr;
}

Надеюсь, поможет.