support for RTL languages #3991

majidasgari · 2020-10-27T22:43:05Z

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: Please fix viewing rtl notes #2047

majidasgari · 2020-10-27T22:46:05Z

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

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

but it is rather hard.

sabo3 · 2020-11-02T10:41:55Z

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.

chromer030 · 2021-01-14T16:34:10Z

@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 · 2021-01-14T17:02:36Z

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 · 2021-01-14T17:46:38Z

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 · 2021-01-14T17:58:37Z

@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!

…nd Preview. (#4822)

laurent22 · 2021-04-30T15:03:52Z

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

mikwee · 2021-07-09T10:42:13Z

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

3droj7 · 2021-07-20T14:12:52Z

Is there any update on this issue?

mikwee · 2021-07-23T19:02:11Z

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 · 2022-10-13T16:29:58Z

+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 · 2022-10-13T17:41:49Z

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 · 2022-10-13T17:53:52Z

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 · 2022-10-13T18:59:43Z

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 · 2022-10-16T10:55:38Z

microsoft/vscode#11770

mojienjoyment · 2023-05-13T20:03:19Z

see this fix #6177 (comment)
I use it and It's OK.

rio-codes · 2023-05-25T07:13:01Z

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 · 2023-08-04T10:06:12Z

for reference and sake of tests, you may use:

text

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

incorrect view

correct view

mimZD · 2023-09-02T10:12:50Z

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 · 2023-09-30T16:25:38Z

#6177 (comment)
if anyone interested i made a simple solution here using css for rendering

mbnoimi · 2023-09-30T16:43:01Z

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 · 2023-09-30T18:12:59Z

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

Guyc1800 · 2023-09-30T18:26:58Z

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 · 2023-09-30T18:43:39Z

: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~~

mbnoimi · 2023-10-03T04:39:18Z

Oops I discovered it doesn't work fine!
@Guyc1800

The above snippet force all the lists into RTL!

Guyc1800 · 2023-10-03T09:23:42Z

Oops I discovered it doesn't work fine!
@Guyc1800

The above snippet force all the lists into RTL!

Yeah this is the idea and if you want the next line or list to be ltr add this
<en></en>
Before just like in the screen shot I sent

mbnoimi · 2023-10-03T10:39:17Z

Yeah this is the idea and if you want the next line or list to be ltr add this

Add what?!

Guyc1800 · 2023-10-04T11:59:30Z

Yeah this is the idea and if you want the next line or list to be ltr add this

Add what?!

My bad . Github didn't show this because i didn't put it inside of code block
Anyway you need to add a line before
<en></en> or <ltr></ltr>

Mehrdad-Farshi · 2024-03-04T09:36:38Z

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.

as @rio-codes tested bullet points with Hebrew I've found the same issue with tables and quotes in the Linux desktop app

yuvgin · 2024-03-18T11:58:24Z

Any updates on this issue? Is anyone actively working on this?

Yolakalemowa · 2024-04-20T12:10:34Z

Any updates on this issue? Is anyone actively working on this?

wondering the same :'(

Joplin, Standard Notes, Notesnook... how come NON of them properly support RTL?

edit: SN does seem to support RTL now... nice @mojienjoyment

mojienjoyment · 2024-04-20T16:38:57Z

Ruslin-android, a note app for android can show rtl and ltr languages correctly. Devs can get idea from it on 1,2,3,4

Sad-Abd · 2024-06-12T11:05:31Z

There is a repository on GitHub that has full support for RTL languages implemented: SimpleMDE - Markdown Editor (RTL). Additionally, there is an online Markdown editor based on this implementation: Dawin. Maybe it can be used as a reference to implement support for RTL languages in Joplin. Unfortunately, I'm not familiar with JavaScript or TypeScript, so I'm unable to work on this myself.

Related to laurent22#3991. This change: - Only applies to the CodeMirror 6-based editor (not the CodeMirror 5-based editor). - Enables CodeMirror's per-line text direction option (`perLineTextDirection.of(true)`). - Adds `dir=auto` to every visible line in the CodeMirror 6 editor.

webenadam · 2024-09-08T14:28:58Z

do no RTL yet?

wael-t · 2024-10-17T00:12:24Z

Any updates on implementing rtl support?

stale bot added the stale An issue that hasn't been active for a while... label Dec 3, 2020

This comment has been minimized.

Sign in to view

stale bot removed the stale An issue that hasn't been active for a while... label Dec 5, 2020

This comment has been minimized.

Sign in to view

laurent22 added backlog We'll get to it... eventually... enhancement Feature requests and code enhancements labels Jan 14, 2021

laurent22 added desktop All desktop platforms high High priority issues and removed backlog We'll get to it... eventually... labels Jan 14, 2021

This comment has been minimized.

Sign in to view

Ahmad45123 mentioned this issue Apr 8, 2021

Mobile, Desktop: Fixes #3991: Added RTL support for CodeMirror and Preview. #4822

Merged

laurent22 closed this as completed in #4822 Apr 30, 2021

laurent22 pushed a commit that referenced this issue Apr 30, 2021

Mobile, Desktop: Fixes #3991: Added RTL support for Markdown editor a…

92b4b96

…nd Preview. (#4822)

laurent22 reopened this Apr 30, 2021

Repository owner deleted a comment from ma-sadeghi Apr 30, 2021

Repository owner deleted a comment from stale bot Apr 30, 2021

osamz mentioned this issue Mar 11, 2023

Flipped drawer hides options in Arabic on Android #7840

Closed

kiro5678 mentioned this issue Nov 27, 2023

Error when opening joplin #9402

Closed

tessus mentioned this issue Feb 24, 2024

Support RTL languages #9990

Closed

personalizedrefrigerator mentioned this issue Jul 29, 2024

Accessibility: Comply with WCAG 2 #10795

Open

personalizedrefrigerator mentioned this issue Aug 1, 2024

Mobile, Desktop: Improve RTL support in the Markdown editor #10810

Merged

personalizedrefrigerator mentioned this issue Oct 12, 2024

Desktop: Accessibility: Add ARIA information to the sidebar's notebook and tag list #11196

Merged

support for RTL languages #3991

support for RTL languages #3991

Comments

majidasgari commented Oct 27, 2020 • edited by laurent22 Loading

majidasgari commented Oct 27, 2020

sabo3 commented Nov 2, 2020 • edited Loading

This comment has been minimized.

This comment has been minimized.

chromer030 commented Jan 14, 2021

laurent22 commented Jan 14, 2021

chromer030 commented Jan 14, 2021 • edited Loading

Desktop : Markdown editor and Marktop viewer :

Desktop: Rich Text :

Mobile : Text Editor :

Mobile : Text Viewer :

Correct layout of RTL :

Some example texts in Arabic , Hebrew and Persian :

Test Devices :

ma-sadeghi commented Jan 14, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

laurent22 commented Apr 30, 2021

mikwee commented Jul 9, 2021

3droj7 commented Jul 20, 2021

mikwee commented Jul 23, 2021 • edited Loading

mbnoimi commented Oct 13, 2022

chromer030 commented Oct 13, 2022

mikwee commented Oct 13, 2022

mbnoimi commented Oct 13, 2022 • edited Loading

chromer030 commented Oct 16, 2022

mojienjoyment commented May 13, 2023 • edited Loading

rio-codes commented May 25, 2023

2i3r commented Aug 4, 2023 • edited Loading

text

incorrect view

correct view

mimZD commented Sep 2, 2023

Guyc1800 commented Sep 30, 2023

mbnoimi commented Sep 30, 2023

Guyc1800 commented Sep 30, 2023

Guyc1800 commented Sep 30, 2023

mbnoimi commented Sep 30, 2023 • edited Loading

mbnoimi commented Oct 3, 2023

Guyc1800 commented Oct 3, 2023 • edited Loading

mbnoimi commented Oct 3, 2023

Guyc1800 commented Oct 4, 2023

Mehrdad-Farshi commented Mar 4, 2024

yuvgin commented Mar 18, 2024

Yolakalemowa commented Apr 20, 2024 • edited Loading

mojienjoyment commented Apr 20, 2024 • edited Loading

Sad-Abd commented Jun 12, 2024

webenadam commented Sep 8, 2024

wael-t commented Oct 17, 2024

majidasgari commented Oct 27, 2020 •

edited by laurent22

Loading

sabo3 commented Nov 2, 2020 •

edited

Loading

chromer030 commented Jan 14, 2021 •

edited

Loading

ma-sadeghi commented Jan 14, 2021 •

edited

Loading

mikwee commented Jul 23, 2021 •

edited

Loading

mbnoimi commented Oct 13, 2022 •

edited

Loading

mojienjoyment commented May 13, 2023 •

edited

Loading

2i3r commented Aug 4, 2023 •

edited

Loading

mbnoimi commented Sep 30, 2023 •

edited

Loading

Guyc1800 commented Oct 3, 2023 •

edited

Loading

Yolakalemowa commented Apr 20, 2024 •

edited

Loading

mojienjoyment commented Apr 20, 2024 •

edited

Loading