support for RTL languages

[majidasgari]

Have you plan to support RTL languages, Joplin supprts Farsi as its interface language, but when we type in persian in the text editor, all texts are viewed in left to right mode.

• Idea on forum: https://discourse.joplinapp.org/t/support-rtl-notes/4977/22?u=laurent
• Related issue with some more ideas: https://github.com/laurent22/joplin/issues/2047

[majidasgari]

we can show any rtl text in the current version using div tags

<div dir="rtl">
یک متن فارسی یا عربی.
<div>

but it is rather hard.

[sabo3]

In addition to the above, I would like to report that when using Joplin on android with Arabic locale, the app layout is messed up. The side menu looks disoriented as shown in the attached photo.

[majidasgari]

I think Joplin supports RTL currently but it can be facilitated by placing a button somewhere.

[chromer030]

https://github.com/laurent22/joplin/issues/3723 Any progress or plan to support ?

[chromer030]

@laurent22 SImpleNote has nearly perfect support for RTLs , tested Hebrew , Persian , Arabic. Its weird why Joplin as the best open-source Note taking platform hasn't yet integrated RTLs support ?

[laurent22]

Let's keep this bug open to track this issue, and I've also added a few links from past discussion in the top post.

What's not working by the way? It would be good if someone could confirm what works or not on the following elements.

• Desktop: Markdown editor
• Desktop: Markdown viewer
• Desktop: Rich Text
• Mobile: Text editor
• Mobile: Text viewer

Also please provide some example Arabic text: the actual text (that can be copied and pasted, not a screenshot), and how it's supposed to look (a screenshot), because I don't know Arabic language so I don't know when it's displayed RTL or LTR.

[chromer030]

Hi @laurent22 , Thank you for your attention on this issue , you will really save the RTL users from this annoying bug.

Desktop : Markdown editor and Marktop viewer :

In Desktop client , on markdown editor and viewer , we can write in RTL languages and languages are supported but layout is not respected and it's remain on LTR :

Hebrew : Arabic : Persian :

Desktop: Rich Text :

Layout is not respected :

Mobile : Text Editor :

Layout and RTL is OK.

Mobile : Text Viewer :

RTL languages are supported but layout is not respected :

Correct layout of RTL :

As you see in screenshot , RTL should start from right to left and this is true form.

Some example texts in Arabic , Hebrew and Persian :

Arabic :

بعد أن تلقى الملايين حول العالم اللقاحات المختلفة لفيروس كورونا المستجد، برزت أسئلة عديدة، أبرزها ما مدى إمكانية نقل الفيروس من الشخص الذي تلقى اللقاح إلى الأصحاء؟ وهل اللقاحات المطروحة حالياً فعّالة ضد السلالات المتحورة من فيروس كوفيد-۱۹؟

Hebrew :

"אני שומע כל הזמן שיח על תעדוף, אלה רוצים ואלה רוצים. אבל יש ועדת תעדוף, הם אלו שקובעים ואנחנו הולכים אחרי מה שהם אומרים לנו", אמר אדלשטיין, "במקום להמשיך בדיון הזה, שווה לחשוב מה יקרה אם האסיר יחלה ונצטרך לזבזב עליו צוות רפואי ומכשירי אקמו. מה שוועדת התעדוף החליטה זה מה שאנחנו עושים. אני לא בודק אם נותנים את החיסון לאסיר או לסוהר".

Persian :

نسخه پایه پرچمدار امسال سامسونگ گلکسی اس ۲۱ نام داشته و باید آن ارزان‌قیمت‌ترین و در عین حال ساده‌ترین نوع گوشی گلکسی اس ۲۱ عرضه شده در بازار بدانیم. نسخه دوم گلکسی اس ۲۱ پلاس است که ظاهراً تنها در ابعاد نمایشگر و کلی دستگاه با نسخه پایه متفاوت است ولی برخی تغییرات مانند جنس بدنه را نیز در ردیف تفاوت‌های دو دستگاه جای دهیم.

Test Devices :

Desktop : Joplin 1.6.7 appimage on Arch Linux , Kernel 5.10.7. Mobile : Joplin 1.6.6 on Android 7.1.2 arm64

[ma-sadeghi]

@laurent22 @chromer030

I found a workaround to fix Desktop rendering of RTL notes: I simply added:

#rendered-md p {
    unicode-bidi: plaintext;
}

to userstyle.css. The beauty of it is that it also works fine with mixed RTL-LTR notes. Here's how it looks like:

The first line is pure Farsi, the second line is mixed Farsi-English, and the third line is pure English, which they all render properly.

There's still one issue that makes it a bit inconvenient working with the editor. If you look at the second line (mixed Farsi-English) in the editor (not the rendered markdown), it doesn't look right.

Similar issue for the first line in the editor: look at the placement of the "dot", which should be at the end of the sentence (like it is in the rendered markdown)

Edit: Here's a mixed Farsi-English note for reference: متن فارسی به همراه کلمه English در میان

which is btw not rendered properly on GitHub!

[Ahmad45123]

Is someone working on this ? Or is it already fixed ? I'm Arabic and I'd be able to give it a go and test myself easily.

[roman-r-m]

Is someone working on this ? Or is it already fixed ?

No and no

[Ahmad45123]

So I've added RTL support for the actual text editors (markdown and tinymce). There's also another places that could use the same fix like where I have a rex box but I'm not so sure about it.

The UI itself is not RTL so why make all text in the UI go RTL, like for instance that title bar would look really off if it was to the right beside the time. The only way it'd look nice would be if all the info buttons and date/time also swap.

As much as I'd like full RTL support, It's not a simple thing and I don't think it's something that Joplin wants right now ? IDK.

Let me know what you guys think!

[laurent22]

Note: It's now done for Markdown editor and Preview

[mikwee]

RTL support is still a problem, as someone who has to write in Hebrew.

[3droj7]

Is there any update on this issue?

[mikwee]

Using the iOS app rn, and it properly renders Hebrew text in the preview, but not in editing mode. Still have yet to see if it works like this on Android and Desktop.

[mbnoimi]

+1 RTL implementation still unpractical. I'm unable to use Joplin at all in Arabic

Although the text editor has many issues but it can render the text most of the cases in the right layout while the viewer doesn't at all. The viewer always render the text in LTR

• Joplin 2.8.8 (flatpak package)
• Linux Mint 21

[chromer030]

No RTL in vscode , no RTL in joplin , no RTL in many others , why apps like this with many users have issue with RTL ? , RTL is cursed !

[mikwee]

It's because, like most things, web dev tools are created with LTR languages in mind, since those have the most speakers. Then again, there are 365 million native speakers of Hebrew and Arabic alone, so I do think RTL support should be a major concern for software devs.

[mikwee]

In addition to the above, I would like to report that when using Joplin on android with Arabic locale, the app layout is messed up. The side menu looks disoriented as shown in the attached photo.

So this is because of RTL? I was wondering why this was happening...

[mbnoimi]

No RTL in vscode , no RTL in joplin , no RTL in many others , why apps like this with many users have issue with RTL ? , RTL is cursed !

Most editors support RTL. RTL is not needed in VSCode because most programming languages based on languages grammar in LTR. For example Flutter supports RTL by default, Qt, GTK... etc. Even Github supports it too.

[chromer030]

https://github.com/microsoft/vscode/issues/11770

[mojienjoyment]

see this fix https://github.com/laurent22/joplin/issues/6177#issuecomment-1546739810 I use it and It's OK.

[rio-codes]

I did a little testing on this with Hebrew, some Markdown features work and some do not. I used the lyrics to a song in both English and Hebrew to demonstrate:

The checkboxes are totally broken, nested bullet lists do not work, and deleting characters at the beginning or end of a line is extremely frustrating, in both keyboard layouts. It seems to always want to delete as if the language was LTR.

Apparently Showdown is able to display and edit RTL properly, I'm not sure if this can be implemented but I am willing to give it a shot.

[2i3r]

for reference and sake of tests, you may use:

text

این یک متن فارسی حاوی کلمات Complex English است. هذا نص عربي يحتوي على كلمات Complex English .

incorrect view

correct view

[mohammadZahedian]

i have problem with search in Persian language 1- you should write all letter of words or sentence to find it now i use '*' after part of word to find it faster but still if your note was misspell when you wrote it, you will never find it again

[Guyc1800]

https://github.com/laurent22/joplin/issues/6177#issuecomment-1741767309 if anyone interested i made a simple solution here using css for rendering

[mbnoimi]

if anyone interested i made a simple solution here using css for rendering

Thanks for the suggestion but it doesn't fix it correctly!!!

Your suggestion:

ul:not(ul.jop-noMdConv) {
  direction: rtl;
  & li.md-checkbox.joplin-checkbox.maps-to-line {
    position: relative;
    left: 3em;
    & input[type="checkbox"] {
      margin-left: 0.7em;
      margin-right: 1.71em;
    }
  }
}
p.maps-to-line:has(> en, ltr) + * {
  direction: ltr;
  & li.md-checkbox.joplin-checkbox.maps-to-line {
    position: relative;
    left: -3em;
    & input[type="checkbox"] {
      margin-left: 1.71em;
      margin-right: 0.7em;
    }
  }
}

[Guyc1800]

It might uses different selector for numbered lists let me fix that real quick

[Guyc1800]

if anyone interested i made a simple solution here using css for rendering

Thanks for the suggestion but it doesn't fix it correctly!!!

Your suggestion:

ul:not(ul.jop-noMdConv) {
  direction: rtl;
  & li.md-checkbox.joplin-checkbox.maps-to-line {
    position: relative;
    left: 3em;
    & input[type="checkbox"] {
      margin-left: 0.7em;
      margin-right: 1.71em;
    }
  }
}
p.maps-to-line:has(> en, ltr) + * {
  direction: ltr;
  & li.md-checkbox.joplin-checkbox.maps-to-line {
    position: relative;
    left: -3em;
    & input[type="checkbox"] {
      margin-left: 1.71em;
      margin-right: 0.7em;
    }
  }
}

:is(ul,ol,dl):not(.jop-noMdConv){ direction:rtl; & li.md-checkbox.joplin-checkbox.maps-to-line{ position:relative; left:3em; & input[type=checkbox]{ margin-left:0.7em; margin-right:1.71em; } } } p.maps-to-line:has(>en,ltr)+*{ direction:ltr; & li.md-checkbox.joplin-checkbox.maps-to-line{ position:relative; left:-3em; & input[type=checkbox]{ margin-left:1.71em; margin-right:0.7em; } }

}

Here is the fix. It still isn't perfect since when in full edit view the checkboxs override the text but it's better then nothing I guess

[mbnoimi]

:is(ul, ol, dl):not(.jop-noMdConv) {
  direction: rtl;
  & li.md-checkbox.joplin-checkbox.maps-to-line {
    position: relative;
    left: 3em;
    & input[type="checkbox"] {
      margin-left: 0.7em;
      margin-right: 1.71em;
    }
  }
}
p.maps-to-line:has(> en, ltr) + * {
  direction: ltr;
  & li.md-checkbox.joplin-checkbox.maps-to-line {
    position: relative;
    left: -3em;
    & input[type="checkbox"] {
      margin-left: 1.71em;
      margin-right: 0.7em;
    }
  }
}

~~For me it's perfect. Thank you @Guyc1800~~