Zettlr: [ENHANCEMENT] Enable RTL/LTR editor switching

[ahangarha]

Description

As mentioned in the title, tha app doesn't support RTL text. As the result, it shows the RTL script, LTR which makes problem. Further more, it shows red dot instead of ZWNJ character which is very much common in Persian.

Reproducing

Simply open the app and write the following text:

# یک متن جهت بررسی پشتیبانی از RTL
همان‌طور که مشخص است، نه از RTL پشتیبانی می‌شود و نه از نیم‌فاصله

you should see it like this:

# یک متن جهت بررسی پشتیبانی از RTL همان‌طور که مشخص است، نه از RTL پشتیبانی می‌شود و نه از نیم‌فاصله

but you don't. You see it like what you see in the screenshot which is wrong!

Expected behaviour

It renders text in LTR direction.

Screenshots

Platform

• OS and version: Kubuntu 19.10
• Zettlr Version: built from this commit: 5b92cd9fd2cbf8672a1a5197dd30495ed223a14c
• Screen Resolution: 1366x768

Additional information

The solution would be to add bidi support by using dir="auto" HTML attribute and unicode: plaintext; CSS property to relevant elements.

[nathanlesage]

Hmm, prompts me to some issues CodeMirror had before. They're still struggling to fully support bidi modes — the red dot for instance also comes from CodeMirror… Sounds like something might be afoul in the configuration!

[ahangarha]

I might be able to help. Which project is responsible for parsing MD to
HTML?

در تاریخ شنبه ۱۱ آوریل ۲۰۲۰،‏ ۲۲:۲۱ Hendrik Erz [e-mail]
نوشت:

Hmm, prompts me to some issues CodeMirror had before. They're still
struggling to fully support bidi modes — the red dot for instance also
comes from CodeMirror… Sounds like something might be afoul in the
configuration!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Zettlr/Zettlr/issues/656#issuecomment-612476398, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/ACVYOY57B7WQZF2VEK2KYMLRMCUZ3ANCNFSM4MF72M3A
.

[nathanlesage]

Parsing MD to HTML? That would be something different than you are describing — what your Screenshot shows is the Persian inside the editor, which would be CodeMirror/codemirror, whereas exporting (MD --> HTML) is done via jgm/Pandoc — but as I said, it might just be a configuration error on my side. I never had to deal with this until now :)

[ahangarha]

I mean still you are parsing md into html to show it on web. no?
Which part of the code is doing this? I can fix the problem. If there is external module, let me know so I can fix the problem there. Otherwise I try to fix it here

[nathanlesage]

I mean still you are parsing md into html to show it on web.

I'm not sure I understand what you're pointing to?

Internally, Zettlr makes use of CodeMirror to show the contents of your files, but it does not convert them to HTML. The conversion to HTML is only done when you open up a print window, or export to HTML.

[ahangarha]

I think I got my answer. I need to follow up with CodeMirror to see how they render MarkDown into HTML (to show relevant style in browser like changing font-size for headings or making text bold, etc.)

[nathanlesage]

In response to this twitter thread, based upon resources from here and here, an option will follow in 1.7 allowing to switch the visual direction of the editor RTL/LTR manually.

[ahangarha]

Enforcing direction is clearly wrong. As per my understanding, the whole idea of bidi is to not enforce direction to an element which may have content with either of RTL or LTR direction.

The approach should be to do something that the browser can decide the direction. Forcing whole of the text RTL or LTR is problematic. There are many cases in which user need to use RTL or LTR text in different parts of the document.

The best approach I have found is to decide the direction based on the first character of the text (almost all headings, p, inputs and text areas,...). For this you should add dir="auto" html attribute to all elements which can have either RTL or LTR text content. In some cases it good to use unicode-bidi: plaintext; css style as well.

If you tell me how I can run the app in browser, I can show you how this approach helps.

By the way, I have made a Firefox add-on called Add Bidi Support to somehow apply what I mean in pages. There are some screenshot of its impact on pages. Take a look.

Finally, I request to reopen this and take the title back to what I meant. I didn't ask for switching editor direction.

[nathanlesage]

The approach should be to do something that the browser can decide the direction.

Alright, then I clearly misunderstood your intent here.

If you tell me how I can run the app in browser, I can show you how this approach helps.

If your approach works by tweaking the options of a standard CodeMirror instance, it should work. You can simply instantiate a CodeMirror editor in an HTML file and tweak it. As soon as it looks the way you imagine it, please feel free to point me to it!

[ahangarha]

Look at this:

What I have done was to add dir="auto" to all pre tags in markdown editor. I did this by adding this script in console:

const targetNode = document.querySelector('body');
const config = { childList: true, subtree: true };

const add_bidi_support = () => {
  observer.disconnect();
  const all_elements = document.querySelectorAll("pre");

  all_elements.forEach(element => {
    element.setAttribute("dir","auto");

    element_style = window.getComputedStyle(element)['text-align'];
    if (element_style === "left"){
      element.setAttribute("style", "text-align: start");
    }
  });
  observer.observe(targetNode, config);
}

const callback = () => {
  console.log("Run add_bidi_support because of DOM update");
  add_bidi_support();
};

observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// Run the main function once
console.log("initial add_bidi_support run...");
add_bidi_support();

to test if direction is working correctly or not, I use one دو three چهار for LTR and یک two سه four for RTL.

You try this and tell me what to do. I don't know if you should solve this issue or it should be fixed on CodeMirror side.

[nathanlesage]

I don't know if you should solve this issue or it should be fixed on CodeMirror side.

Definitely CodeMirror, because I don't want to mess with any elements that CodeMirror is producing, as a lot of CodeMirror is based upon assumptions that third-party applications only use it through the integrated API. This being said, as soon as this mixed-bidi-mode is supported, just open up an issue so that I can activate the functionality in Zettlr!

[cben]

For now, CodeMirror 5 only supports whole-doc-is-LTR vs whole-doc-is-RTL modes.
So adding a manual way to switch everything to its RTL mode would help a bit, although it's still pretty buggy in my experience.
(Also it helps to set rtlMoveVisually to false, as when bidi misbehaves, it's typically because the logical order in memory is not what you wanted to write, and being able to step through characters in logical order at least makes that easier to debug...)

Upcoming CodeMirror 6 rewrite promises it will do bidi better, by relying on browser's bidi (?), but is that at all relevant for Zettlr?