CODEWITHSUNDEEP
htmlcssalignmentarabicdirection
Akhil Chandran
Akhil Chandran

Reputation: 123

Direction: rtl, Date alignment issue

When I use direction:rtl for the Arabic view, the details on the date are not in showing incorrect order. E.g. in ltr it's showing like 03 February 2016 but in rtl it's wrongly aligned as February 2016 03.

div {
  font-size: 20px;
}
<div style="direction:rtl;">
  03 February 2016
</div>

Is there any way to rectify it. Or it's just the natural way of showing date in the Arabic view?

Upvotes: 3

Views: 4296

Answers (5)

Penny Liu
Penny Liu

Reputation: 17498

You can also use the dir attribute to assign rtl directionality. It makes your code much cleaner and easy to read.

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


/*Only supported in Firefox*/
:dir(rtl) {
  float: left;
}
<div dir="rtl">
  15 &#8235;January&#8236; 2020
</div>

Upvotes: 0

neel upadhyay
neel upadhyay

Reputation: 347

this is common, if you use direction RTl you can view mirror image of text, so if you use arabic data it shows perfect.

Upvotes: 0

Nehal Soni
Nehal Soni

Reputation: 186

&#x202b;03 February &#x202c;2016 solution works good for chrome. But it changes the output as 'mm ddyyyy' in firefox and IE.

Following works consistently in chrome, firefox and IE.

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

If you are working with angular js and want to apply the solution in date formatter then, you can write as below:

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

Input in angular expression should be valid javascript date object. Given input '1463725737789' is time in milliseconds.

Upvotes: 2

Basheer
Basheer

Reputation: 328

Answering your next question: 

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

Upvotes: 4

VahidN
VahidN

Reputation: 19186

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>

Upvotes: 2

Related Questions