benweet / stackedit

In-browser Markdown editor
https://stackedit.io/
Apache License 2.0
21.78k stars 2.73k forks source link

RTL support #773

Open Natinux opened 9 years ago

Natinux commented 9 years ago

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.

yosefw commented 9 years ago

+1

razeghi71 commented 9 years ago

+1

doronbehar commented 8 years ago

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:

What is our issue/problem all about?

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.
fruch commented 7 years ago

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

Nirvanatin commented 7 years ago

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

ahangarha commented 5 years ago

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

doronbehar commented 5 years ago

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.

ahangarha commented 5 years ago

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?

niyumard commented 4 years ago

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.

ahangarha commented 4 years ago

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 commented 4 years ago

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.

vghaderi commented 3 years ago

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?

ahangarha commented 3 years ago

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