方向：rtl，日期对齐问题

Question

当我对阿拉伯语视图使用 direction:rtl 时，日期的详细信息没有显示错误的顺序。例如。在 ltr 中显示为 03 February 2016 但在 rtl 中错误对齐为 February 2016 03.

div {
  font-size: 20px;
}

<div style="direction:rtl;">
  03 February 2016
</div>

有什么办法可以改正吗。或者它只是在阿拉伯语视图中显示日期的自然方式？

Answer 1

You can change this behavior by adding Unicode Character 'LEFT-TO-RIGHT EMBEDDING' (U+202A) and ending it by POP.

<div style="direction:rtl;">
&#x202a;03 February 2016&#x202c;
</div>

Answer 2

回答你的下一个问题：

  <div style="float:left; direction:rtl;">
    &#x202b;03 February &#x202c;2016
  </div>

Answer 3

‫03 February ‬2016 解决方案适用于 chrome。但它在 Firefox 和 IE 中将输出更改为 'mm ddyyyy'。

以下在 chrome、firefox 和 IE 中始终有效。

<div style="float:left; direction:rtl;">
    15 &#x202b;May&#x202c; 2017
</div>

如果你正在使用 angular js 并且想在日期格式化程序中应用解决方案，那么你可以这样写：

<div style="float:left; direction:rtl;">
   {{ 1463725737789 | date: 'dd &#x202b;MMM&#x202c; yyyy'}}
</div>

angular 表达式中的输入应该是有效的 javascript 日期对象。给定输入 '1463725737789' 是以毫秒为单位的时间。

Answer 4

这很常见，如果你使用方向 RTl 可以查看文本的镜像，所以如果你使用阿拉伯数据，它显示完美。

Answer 5

您还可以使用 dir 属性来分配 rtl 方向性。它使您的代码更加清晰易读。

div[dir='rtl'] {
  float: left;
}


/*Only supported in Firefox*/
:dir(rtl) {
  float: left;
}

<div dir="rtl">
  15 &#8235;January&#8236; 2020
</div>

Direction: rtl, Date alignment issue