rtl 方向带撇号的数字

Question

我目前正在为我们的网站进行从右到左布局的本地化。我们有一些数字，每三位数字用单引号分隔，例如-1'190.55。在 rtl 中，这个数字应该是 1'190.55-。但是当把 'direction: rtl' 放到样式中时，数字就变成了 190.55'1-。数字是动态放置的，不能手动剪切。

HTML:

<div>-1'190.55</div>

CSS:

div { direction: rtl }

Answer 1

如果您的标记很灵活，请尝试在 <div> 和 direction:ltr

中添加 <span>

div {
  direction: rtl
}
span{
display: block;
direction: ltr;
text-align: right;
}

<div><span>-1'190.55<span></div>

Answer 2

这是可能的，方法是在 div 中放置一个跨度。因此，如果您完全可以更改 HTML，那么这是推荐的方法。
注意：将减号放在跨度之外。

div {
  direction: rtl
}

div span {
   unicode-bidi:embed; direction:ltr;
}

<div>-<span>1'190.55</span></div>

如果您不能更改 HTML，但可以使用 JavaScript，那么也可以，尽管方式更复杂。

var divs = document.getElementsByTagName('div');
for (var i = 0; i<divs.length; ++i) {
  var content = divs[i].innerHTML, min = content.indexOf('-')==0 ?1 :0;
  divs[i].innerHTML = content.substring(0,min)+'<span>'+content.substring(min)+'</span>';
}

div {
  direction: rtl
}

div span {
   unicode-bidi:embed; direction:ltr;
}

<div>-1'190.55</div>

希望对您有所帮助！

rtl 方向带撇号的数字

Number with apostrophe in direction rtl

html

css

localization

right-to-left