stackedit
stackedit copied to clipboard
RTL support
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:
Thank you.
+1
+1
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 vsLTR
in the same file1, The viewer by stackedit doesn't actually distinguish fromRTL
andLTR
. - In addition to that, the text isn't shown from right to left when exporting to disk as template.
What you Should Know:
- 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.
- 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. - 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 thedir="rtl"
attribute to the<body>
tag at the advanced settings at "Default Template". just like that: Instead of<body>
, use<body dir="rtl">
- You can add
<p dir="rtl">
before every section you want to be inRTL
mode although the document's body is inLTR
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. - 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:
- choose whether the whole document will be
LTR
orRTL
(with the settings or specific to the document with the<body>
tag inside it). - 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>
. - 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"
.
- 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.
- 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.
- 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.
This is really annoying, can we put some css into place ? via the template ?
Can we add LTR/RTL button to add the direction to the paragraph?
What about using dir="auto"
property for each node?
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.
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?
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.
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!
I just share what is done by my Firefox addon plus little more manual modification to the live MD editor:
It works perfectly as far as I see.
I just share what is done by my Firefox addon plus little more manual modification to the live MD editor:
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?
Add dir="auto"
to all <div class="cledit-section">
.