Home / GitHub Page

Support RTL notes

I’m moving 2000+ notes from Evernote to Joplin. Quite some of my notes are in Arabic or mixed between Arabic and English.
Since Joplin today is not supporting RTL automatically, I have to surround all my Arabic text with HTML tag:<div dir="rtl" lang="ar"></div> to see it correctly aligned in the preview which is really annoying task.

Hopefully, I can write and preview RTL support in Joplin soon.

1 Like

This has come up a few times and as much as we would like to make this happen, it’s not something that can be fixed in Joplin.

Markdown-it does not support RTL languages - or better said the proper rendering of them. If you have any suggestions on how to support RTL languages in Joplin, please let us know.

I found this:

I’ve come up to a more simple and nice solution. Just add dir=“auto” to the elements

@tessus : I think, according to the above, just changing <div id="rendered-md">
to <div id="rendered-md" dir="auto"> will resolve the issue.

I tried it in Developer Tools and it works. Unfortunately there is no auto in css direction property.

1 Like

I’m not sure I understand.

How do you write lists or checkboxes in an RTL language? This div change doesn’t change the engine of markdown-it. Or am I missing something.

The markdown editor is not impacted by this <div>, only the rendered preview. Here is a screenshot to explain more:


As you can see, although both are written in same way in the markdown, the 1st part direction is from right-to-left because it’s surrounded by <div dir="auto"> and the 2nd is the normal left-to-right.

Hopefully this make things more clear.

Thanks Rami. This makes more sense now. But I was not talking about the editor, but how the engine might render the text and interprets markdown.

e.g. in both examples you wrote

- [ ] RTL text
- RTL text

which is still not truly RTL, because it is a mix of LTR and RTL. Otherwise it would have to look like this:

RTL text [ ] -
RTL text -

But the engine is not able to render this, because markdown-it does not do RTL. So in either case it has to be a mix, which is highly confusing - at least to me.

But, if the div helps, maybe we can add it to the rendered output. @laurent is there a way to add that dir=auto to the output? It’s not a perfect solution, but it seems to make it at least better than it currently is.

I can understand it’s hard to imagine RTL for LTR people :slight_smile:

I put the mixed situation above because this is scenario that words are disordered.
Let me try to explain in english. Assume you write this sentence in any RTL language:
“This is Arabic part, this is English part”
1st part are written in Arabic letters
1st word is: This
2nd word is: is
3rd word is: Arabic
4th word is: part
2nd part is written in English. You know the order…

With dir=ltr which is the default, it’ll be shown as:
“part arabic is This, this is English part” and aligned to left.

So the Arabic words are written backward and I should start reading from the middle from right (middle) to left (start) “This” -> “is” -> “Arabic” -> “part” and then start again from middle to read the English part from left(middle) to right(end) “this” -> “is” -> “English” -> “part”.

The correct way to have 1st word “This” at the beginning from right, with dir=rtl or dir=auto,
like this:

"this is English part ،part Arabic is This"

As you see 1st word “This” comes 1st from right side, I should start read it from right (the correct beginning from RTL prospective) “This” -> “is” -> “Arabic” -> “part” … and then start from left to right to read the English part.

Here is the same screenshot with Arabic words numbered to illustrate the above.

Hopefully this make sense and not complicating things. If you still didn’t get it, don’t blame yourself, it’s a complex language anyway :smiley:

Thanks again for the explanation.

I know a bit about Arabic and not only words but also the letters within a word are written from the right to left (except numbers).
So in a text editor or text processor that supports RTL languages, the cursor is usually on the right and moves to the left. Same as if you were to write on paper. So you start with t move to the left, write h, move to the left, write i, move to the left write s to write the word this (or better said siht).

Unfortunately I do not speak Arabic and thus I haven’t tested any input systems.

My confusion is rather about the inconsistency of bi-directional input systems.

So, if I wrote a markdown list in arabic with an RTL input system it would be like this when I wanted it to be consistent (using latin characters and English words to demonstrate):

 meti tsrif -
meti dnoces -

All I am saying is that markdown does not work this way.

I guess we could add the “direction” CSS class to the root element and see what happens.

@rami.sedhom, could you try this actually? If you wrap your entire note in <div class="direction: auto">, does it correctly align the text? Ideally it should align rtl the Arabic text and still ltr the English text.

@laurent

Indeed, I thought there would be. What if you wrap in just <div dir="auto"> then? I mean the complete text, not just individual blocks.

It seems that the whole text will be aligned according first strong character, i.e. if the note start with English letters, all following paragraphs will be LTR, and if the note start with Arabic letters, all following paragraphs will be RTL.

In another stackoverflow thread a short javascript code is suggested:

Could this work within a note ?

It shouldn’t be too hard to write a Markdown-it plugin for this: filter on block elements, check the first character and if it’s a RTL one, add the dir="auto" attribute.

I could claim that if you add dir="auto" in every block, you don’t need to check first character, this check will be done automatically by setting this attribute to “auto”.

Maybe, but I wonder if that would be too heavy for large notes? And I think if someone goes through the trouble of implementing this, they may as well add the element conditionally, as it’s probably not too difficult to detect RTL text.

I also wish this feature would be implemented. I love Joplin, but writing Arabic or mixed Arabic and English is not as I would hope it would be.

I think this is more a question for the Ace editor and markdown-it. Joplin depends on these 2 packages.

I really do not know how Joplin itself could make RTL work, if those 2 packages don’t support it.

Looking at Ace editor, it looks like they do support RTL now.

Here is the issue I was looking at:

PRs:


and

I did not find anything from markdown-it though.