[SOLVED] FastAPI template Arabic translation render from right to left

FastAPI template Arabic translation render from right to left

I am trying to translate Arabic for FastAPI and I created template as shown here:

<!DOCTYPE html>
<html>
<head>
    <title>{{ _("Welcome") }}</title>
</head>
<body>
    <h1>{{ _("Welcome") }}, {{username}}</h1>
    <p>{{ _("Thank you for joining us!") }}</p>
</body>
</html>

I translated to ar and store at lang/ar/LC_MESSAGES/messages.po

# Arabic translations for PROJECT.
# Copyright (C) 2024 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR <EMAIL@ADDRESS>, 2024.
#
msgid ""
msgstr ""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2024-12-28 10:16+0530\n"
"PO-Revision-Date: 2024-12-28 10:17+0530\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language: ar\n"
"Language-Team: ar <LL@li.org>\n"
"Plural-Forms: nplurals=6; plural=(n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : "
"n%100>=3 && n%100<=10 ? 3 : n%100>=0 && n%100<=2 ? 4 : 5);\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.16.0\n"

#: templates/email_service/welcome_email.html:4
#: templates/email_service/welcome_email.html:7
msgid "Welcome"
msgstr "مرحباً"

#: templates/email_service/welcome_email.html:8
msgid "Thank you for joining us!"
msgstr "شكرا لانضمامك إلينا!"

When I use ar in the Accept-Language header, it render like this:

<!DOCTYPE html>
<html>
<head>
    <title>مرحباً</title>
</head>
<body>
    <h1>مرحباً, Mohamed Azzabi</h1>
    <p>شكرا لانضمامك إلينا!</p>
</body>
</html>

It should be render from right to left instead of left to right. I know, I can add style="direction: rtl", but looking for something which can avoid this.

Solution

There is an html attribute dedicated to this problem, namely dir attribute.

Below I report the example taken from Mozilla

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>

<hr />

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>

As you can see, for right to left text, the dir attribute is used.