Please fix viewing rtl notes

[0xRustlang]

Environment

Joplin version: 1.0.308
Platform: Android (haven't tested other platforms yet)

OS specifcs: Android 9 (pie)

Steps To Reproduce

Exactly as described in #631

I would like to explain more about it but that issue was locked by bot so i forced to create another one. Excuse me for that.

that the simplenote app that is open-source and also supports markdown don't have this problem,  may you please look at it if you had time so may be it can help you to fix this issue ?
Also i think it uses same programing language as joplin.

I mean this app: https://github.com/Automattic/simplenote-android

May be they fixed it by disabling showing notes as markdown by default and enable it only when user explicitly turn markdown button on.
but this is my assumption and i didn't tested markdown rtl writing in it to test if it also has problem for showing rtl like joplin or not (as i don't know about markdown syntax)

But i will test it (i will turn on that button and write a text using markdown and will update this issue in one hour)

Joplin is so great and the only problem is this issue that unfortunately made it unusable for most of my notes.

Also i don't know why but the main page of the app (joplin) that shows note titles show them completely correct and also the title direction is correct in note page.

I attached some screenshots about these.
Thanks

Describe what you expected to happen:
App show content of RTL notes correctly.

Logfile

Screenshots:

This is when when we are writing:

This is when writing completed and the app shows note:

This is the main page of the app:

[laurent22]

So is the only issue when the note is rendered as HTML? The text editor is fine? I'm completely ignorant about ltr language so I'm not sure I can do much about it, but it might be good to narrow down the issue.

[0xRustlang]

Excuse me for being late

Yes, text editor don't have problem and the problem only is when note is in viewing mode.

Also i tested in simplenote app and when i enabled the markdown, it also had same problem in its view tab.

---

Edit tab:

Preview tab:

[laurent22]

Does it work if you paste your Markdown text in there? https://markdown-it.github.io/

[0xRustlang]

No, it doesn't work.
Now i remembered, Also github has same issue
(dear-github/dear-github#147)

I think this is not Joplin's bug.
This problem is for markdown or may be its interpreter to html.

There are two workaround for this i think:

1. Making markdown viewing optional.
2. May be we should workaround this in our notes (by css or html)

Is there an easy way to do this?
May be something like template or such that we make it one time and set it as default template or such?

What do you think about this problem?

[laurent22]

It's unfortunate markdown-it (the lib we use) doesn't support RTL but it means we can't do much about it. Based on this issue it looks like there's no easy fix either.

Making markdown viewing optional is not an option as that would be too complex and doesn't even feel like a good solution (how about images, formatting, etc.).

I think we'd need someone familiar with rtl text and willing to spend lots of time to update markdown-it and add support for it. That would be the ideal solution. Perhaps a bounty or something could help achieve that, but that's something to check with the markdown-it repository.

[0xRustlang]

Oh, Thanks.
Is there any easy workaround for user to fix it by html and/or css ?
I read that Joplin supports css and html.
Has Joplin something like templates so we can add needed html or css codes to it and make it default so all notes inherit it without inserting those codes to every new note by hand?

[laurent22]

Is there any easy workaround for user to fix it by html and/or css ?

I would expect there's no easy workaround, however if you do find one, please share as in this case we might be able to add it to the app directly. See here for info on how to setup custom CSS: https://joplinapp.org/#custom-css

[0xRustlang]

Oh, Thanks.

Does mobile devices also support css?
I read in the Github issue (+) that this can fixed with css with this code: direction: rtl; text-align: right

In the end, Thank you very much for the time and energy spent for this issue and for developing Joplin.
Best Regards.

[laurent22]

@3j9fkyahunqoxwqu, could you post an example of Markdown with Arabic text, as well as an image on how it should render? I have no idea about anything here because I can't read Arabic. If I have an example then I can try to add these CSS properties you mentioned to see if they make a difference.

[CalebJohn]

@3j9fkyahunqoxwqu if you copy and paste the following code into your notes it should work.

<style>
body {
    direction: rtl;
    text-align: right
}
</style>

I tested this on my computer.

(Ace editor doesn't seem to support rtl either)

rendered

[0xRustlang]

@3j9fkyahunqoxwqu, could you post an example of Markdown with Arabic text, as well as an image on how it should render? I have no idea about anything here because I can't read Arabic. If I have an example then I can try to add these CSS properties you mentioned to see if they make a difference.

Hello
Thank you very much.
Excuse me, i have no access to PC till about two days.
I will check and send to you what i can as soon as i have access.

[0xRustlang]

@3j9fkyahunqoxwqu if you copy and paste the following code into your notes it should work.

<style>
body {
    direction: rtl;
    text-align: right
}
</style>

I tested this on my computer.

(Ace editor doesn't seem to support rtl either)

rendered

Oh, Thank you
I will test it.

[0xRustlang]

Hello
Excuse me for being late.

I tested the code that @CalebJohn wrote and it was exactly what i read about it in that github issue but because i didn't know css, i didn't know how it should be written.

This css make RTL notes far better.
The only problem will be English only lines (or if i explain it better, lines that starts with English word) in notes that have this css so user can't wrote English word in start of lines in notes that have this css code, but i think this will be a very good workaround for casual users.

This is the texts i wrote:

And this is the texts that rendered on viewing mode:

As you see in the screenshot the only problem with this workaround is lines that starts with LTR word but i think it is far better than before.

Although i think heavy user can face this problem more (for example when quoting or web clipping may be) but untill someone can fix it and send pull request, or at least has more knowledge than me to help, i think this workaround at least make joplin usable for most of personal notes and ideas.

Thank you @laurent22 @CalebJohn