结合 LTR 和 RTL 内容改变负数的方向答案

【问题标题】：Change direction of negative number with combination of LTR and RTL content结合 LTR 和 RTL 内容改变负数的方向
【发布时间】：2016-12-19 17:17:58
【问题描述】：

这是我的 HTML 结构：

div{
  direction: rtl;
}

span{
  direction: ltr;
}

<div>
  <span>امروز -2</span>
  </div>

这是预期的结果：

如您所见，- 符号应该出现在数字的开头。我该怎么做？

注意：div的方向应该是rtl。

ٍ编辑：我生成这样的数字：

$sums_value = sprintf("%+d",$sums_value);

/* 
sums_value = -2 //=> -2
sums_value = 2  //=> +2

所以数字有正确的格式，但我不知道为什么它会在输出中被破坏：

【问题讨论】：

它可能将-2 视为一个项目，因此它不会反转它。只需在标记中正常写入数字即可。
我知道这可能很明显，但是没有理由可以简单地以 ltr 格式编写它吗？（是动态内容吗？）
@Carcigenicate 该数字通常写在标记中。如您所见，它是检查元素框中的-5。但是我不知道为什么会在5-这样的网站上反转...
@DBS 是的，它是动态内容。

标签： html css bidi

【解决方案1】：

以下内容对我有用：

span {
  unicode-bidi: plaintext;
}

顺便说一下，'bidi' 是双向的缩写。

【讨论】：

@A.J.关于它在 Safari 中不起作用的好处；我没有注意到。

【解决方案2】：

由于您的屏幕截图在不同的 span 元素中有“-2”，因此您可以在该特定范围内使用 unicode-bidi 选项：

div{
  direction: rtl;
}

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

<div>
  امروز 
  <span>-2</span>
</div>

unicode-bidi 的总体思路是能够在同一页面上有多种语言的情况下更改文本方向性的默认行为。

由于您使用的是RTL 语言，并且您希望-2 出现在LTR 中，因此unicode-bidi: bidi-override 非常方便。

【讨论】：

优秀.. 点赞...你知道，到目前为止我从未见过unicode-bidi .. 玩得很好..！

【解决方案3】：

您可以使用before pseudo element 添加连字符。

q::before { 
  content: "-";
  color: blue;
}


<q>Some quotes</q>, he said.

将呈现为

-Some quotes, he said.

【讨论】：