Anki is not respecting RTL (right to left) text

I have Arabic script set RTL (in the field) but when reviewing the text still comes up left to right.

Version ⁨2.1.44 (b2b3275f)⁩

You need to modify your card template to set the CSS direction property to rtl.

Open the card templates screen from the Cards button in the editor and replace the contents of the styling section with the following text (Or just add direction: rtl under .card if you’ve customized your template):

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
  direction: rtl;

This works for the Jawi/Arabic script but I also have Latin text and Chinese script on the card which is reversed too.

Also, I’ve noticed that if the arabic/jawi text has a “?” on the end then it seems to be displaying correctly.

More information about what I’m trying to achieve on a card.

  1. I’m learning Indonesian through lots of sentences.
  2. Originally the front has the Latinized Indonesian script.
  3. The back has Chinese.
  4. As in future I would like to learn Arabic I decided to add the Jawi (Arabic script) on the front of the card with the Indonesian Latin script. In this way I hope to get natural exposure to this Arabic script and recognize patterns.

I’ve not changed the styling to RTL. But the field the jawi is in is set to RTL

When the Jawi text has a question mark I think it displays correctly.

With a full stop or something else at the end of the sentence though text is incorrectly displayed.

If I change the text direction in the styling to RTL both jawi text with full stop and a question mark is displayed correctly. However, the Chinese text and the latin script now have the full stop in the wrong place.

What I have found is that jawi script with a “?” is always displayed in the field in the right place no matter whether the field is set to RTL or not. This isn’t the case with “.” or “!” which is only displayed correctly when the field is set to RTL.

Set to RTL

Not set to RTL

You can apply RTL direction to individual fields instead of the whole card by wrapping field references in your template with some HTML:

<div dir="rtl">{{INJAWI}}</div>

Thankyou abdo