Add dir="auto" to cards for stable card direction

[MoamenAbdelsattar]

Currently, the direction in which a card is rendered is not stable by default. If the UI of Anki is English, text direction is left-to-right by default. If the UI of Anki is Arabic, text direction is right-to-left by default. Although this can be changed from the settings (e.g. by changing css), the card direction should be stable by default, being viewed in the same way regardless of the direction of the UI.

The direction of the card must be the same, not dependent on the UI language.

This commit solves the issue by adding dir="auto" by default for all cards. It will not break existing cards that specify a direction via css or html, but it will make cards that don't specify a direction stable.

I tested adding <div dir="auto"> to the card template and found that it makes the direction stable, regardless of the direction of the UI.

[MoamenAbdelsattar]

Ankidroid has the same issue: https://github.com/ankidroid/Anki-Android/pull/19472

[GithubAnon0000]

The direction of the card must be the same, not dependent on the UI language.

Why? One could argue that the user is probably going to create cards in their native language. Probably, they will use their native language as the gui language. In this case, they will expect that ankis text direction in the cards is accurate for their current locale.

Sure, if the user is learning a language with another direction, then they'd have to tweak the css a little bit; but I don't see why the card direction "must" not be dependent on the gui language as a solid default.

Edit: Also: the tests must pass in order to be considered for merging. Please solve the issue (in this case: you need to add yourself to CONTRIBUTERS).

[MoamenAbdelsattar]

Hi @GithubAnon0000

Let's say I'm native-Arabic learning English and other stuff in Arabic, so my GUI was Arabic at first. I learnt English, so I decided to switch the GUI to English to practice. Should I expect my Arabic cards to change the way they render?

the user is probably going to create cards in their native language.

The user does not expect the direction to depend on the GUI language, rather than on the card content language. If the content of the card is Arabic, it should be rtl. If it's English, it should be ltr. I was affected by this issue, since a lot of my cards (medicine for example) are in English, and a lot are in Arabic. I expected the direction to be automatic by content, without need to manually choose. I decided to add <div dir="auto"> to the card template to solve the issue, but I believe this attribute should be added by default. A card should be rendered the same no matter what the language of the UI is.

The dir="auto" value should be used for data with an unknown directionality, like data coming from user input or external data. See Mozilla specifications.

auto state for direction is sometimes not accurate. It decides the direction based on the first character with strong directionality. However, this approach is still more stable than the current approach that depends on the UI rather than the content.

Please solve the issue (in this case: you need to add yourself to CONTRIBUTERS).

I think someone with a permission must add me, I can't just add myself.

[GithubAnon0000]

Makes sense to me, thanks for explaining it!

Please solve the issue (in this case: you need to add yourself to CONTRIBUTERS).

I think someone with a permission must add me, I can't just add myself.

For legal reasons, you have to add yourself by your own. You should be able to go to your fork and the appropriate branch and edit the file there. In your case, it would be this file: https://github.com/MoamenAbdelsattar/anki/blob/main/CONTRIBUTORS. If you save it you should get the option to either commit to a new branch or to the current one. Choose the current one and this PR should automatically be updated to include the changes you have made.

[MoamenAbdelsattar]

Oh I'm sorry I didn't see that. Thanks for clarification. I added myself to CONTRIBUTERS.

[MoamenAbdelsattar]

This PR fixes only the viewer/reviewer. I'd like to suggest another change to fix the editor. in anki/ts/editor/base.ts Modify setupEditor function and add the following:

    document.documentElement.setAttribute("dir", "auto");

I have not tested that though.

[abdnh]

Anki has an option to set field direction in the editor. My guess is that dir=auto needs to be set on the field element, not the root, but this is untested.

[MoamenAbdelsattar]

Hi @abdnh, I think you care about bilingual cards. If that's the case, setting a separate direction for each field is a bit misleading. There will be a mismatch between how a card is rendered in the editor and how it is rendered in the viewer. The current default template for basic card is {{front}}<hr>{{back}}. There is no two separate directions for the front and back of the card. If we need bilingual cards to be rendered correctly and automatically we need to change the default basic card template to:

<div dir="auto">
{{front}}
</div>
<hr>
<div dir="auto">
{{back}}
</div>

But this might break some existing css for the old default template. Then, we can set a separate automatic direction for every editable field by:

document.querySelectorAll('[contenteditable="true"]').forEach((el) => {
      el.setAttribute("dir", "auto");
 });

If that change is desired make sure existing users with old cards won't have their card template changed, as this might break some existing js/css.

[MoamenAbdelsattar]

My opinion is: first stabilize the direction (make it independent of the UI language) with this change. Then as a next step improve further by giving each field a separate direction.

[MoamenAbdelsattar]

Update: A good CSS rule that can help render bilingual cards correctly without changing template is:

*{
unicode-bidi:plaintext
}

It will fix where punctuation marks are placed, but will not fix the list/bullet point alignment.