stackedit icon indicating copy to clipboard operation
stackedit copied to clipboard

RTL support

Open Natinux opened this issue 9 years ago • 13 comments

Hi, It seems the markdown supports RTL or LTR languages, but only one at a time. Is it possible to mix the two? Writing English and Hebrew in the same line working fine. On one line to write English and Hebrew in the other, the English sentence are float to the right (like it was Hebrew).

For example: If I want to explain some code in Hebrew, then to show an example, see what happens: image

Thank you.

Natinux avatar Apr 08 '15 22:04 Natinux

+1

yosefw avatar Jul 20 '15 13:07 yosefw

+1

razeghi71 avatar Oct 14 '15 10:10 razeghi71

How to Mix RTL and LTR In One Document

Intro:

This solution is not perfect but it can make the difference between using stackedit or not. There is still a lot room for improvements but still, In my opinion, stackedit is the best WYSIWYM word processor there is out there. This is why I think so:

  • It's good for programmers and for mathematicians because of the code blocks and the mathjax.
  • MarkDown is easier to learn than lyx
  • Even lyx is not very good with RTL as far as I know.
  • It's integrating with the cloud.
  • It uses MarkDown which it's syntax is widely used in github and *stackexchange.com sites so everybody might learn it anyway.

What is our issue/problem all about?

  • If we write in an RTL language like Hebrew or Arabic, the editor doesn't detect it automatically and it's extremely uncomfortable to write text in that mode - It's one of those things that an English speaker might never understand.
  • Even If you use a local text-editor that distinguishes RTL languages vs LTR in the same file1, The viewer by stackedit doesn't actually distinguish from RTL and LTR.
  • In addition to that, the text isn't shown from right to left when exporting to disk as template.

What you Should Know:

  1. Most importantly, in order to achieve a great document, the best way in my opinion is to export the document to disk as a template, open it with the browser and print it to PDF.
  2. In addition, no matter if the editor is set to right to left or vise versa, it won't matter for the browser if you export the document as template.
  3. If you use only the Export Using Template option and then print it to PDF with the browser as I said, You can set the whole document to be in RTL by adding the dir="rtl" attribute to the <body> tag at the advanced settings at "Default Template". just like that: Instead of <body>, use <body dir="rtl">
  4. You can add <p dir="rtl"> before every section you want to be in RTL mode although the document's body is in LTR or vise versa. That's how it is in html - the <body> tag's attributes define the whole document unless you tell certain parts to act differently.
  5. Last but not least, You can edit the document's html with the browser's DevTools before you 'print' it to PDF.

The best solution in the meanwhile is:

  1. choose whether the whole document will be LTR or RTL (with the settings or specific to the document with the <body> tag inside it).
  2. Every time there is a part in the document that should be in the opposite direction, add <p dir="rtl"> or <p dir="ltr"> (according to the opposite direction)3 and close the tag with </p>.
  3. As noted in the 2nd footnote, The above procedure doesn't work for Code blocks so don't even try use it on them. In order to make Code blocks be viewed in LTR as they should be, Do as follows:
    • Open the exported template with your browser.
    • Right-click at the beginning of the code block you want to change.
    • Find the <code> html tag befor it all begins and add the attribute: dir="rtl".

  1. You can use a local editor on your computer and it will be synced to stackedit via a cloud storage service client on your computer. In addition, It's not exactly in the same manner, but it would have been great if there was a reload button to use for reloading the file from the cloud storage in viewer mode as well as in edit mode. Personally I prefer using gedit by Gnome for that.
  2. This works for MathJax and normal text but not for code blocks. @hkarti's solution presented in #904 it might be better than mine but it is a matter of taste.
  3. If you haven't changed the <body> tag in the settings, use <p dir="rtl"> for the opposite direction. If you did changed it to <body dir="rtl"> then use <p dir="ltr"> for the opposite direction.

doronbehar avatar Apr 18 '16 12:04 doronbehar

This is really annoying, can we put some css into place ? via the template ?

fruch avatar Aug 01 '17 10:08 fruch

Can we add LTR/RTL button to add the direction to the paragraph?

Nirvanatin avatar Aug 25 '17 05:08 Nirvanatin

What about using dir="auto" property for each node?

ahangarha avatar Apr 05 '19 15:04 ahangarha

The issue refers more to RTL support in the editor as well as in the viewer.

Sent from my Android device with K-9 Mail. Please excuse my brevity.

doronbehar avatar Apr 05 '19 16:04 doronbehar

I don't think there be any better solution that dir="rtl" for the viewer. This can be implemented till we find solution for editor. isn't it?

ahangarha avatar Apr 06 '19 13:04 ahangarha

There are three open issues (one of them from 5 years ago) regarding RTL support it would be nice if you'd do something about it.

niyumard avatar May 30 '20 14:05 niyumard

I have done several contribution to FLOSS projects and my solution works really well.

Gitlab does the same: add dir="auto" to HTML elements. I even have made a simple Firefox add-on called Add Bidi Support which does the same and works really amazing.

I don't understand why there is resistance against it!

ahangarha avatar May 30 '20 15:05 ahangarha

I just share what is done by my Firefox addon plus little more manual modification to the live MD editor:

image

It works perfectly as far as I see.

ahangarha avatar May 30 '20 17:05 ahangarha

I just share what is done by my Firefox addon plus little more manual modification to the live MD editor:

image

It works perfectly as far as I see.

Thanks. Great work. But in your screenshot, both sides seems good and in my browser, left side (editor view) not well applied. What can I do?

vghaderi avatar Jul 11 '21 10:07 vghaderi

Add dir="auto" to all <div class="cledit-section">.

ahangarha avatar Jul 11 '21 21:07 ahangarha