Skip to content

markdown editors with bidirectional support

Beni Cherniavsky-Paskin edited this page Jun 6, 2020 · 2 revisions

Mathdown's bidi support is really very bad, even with (undiscoverable) ?dir=rtl mode, due to CodeMirror bidi being limited, and me being stuck on an old CodeMirror. https://github.com/cben/mathdown/issues/23

Editors with bidi support

Decent alternatives I found, especially with math support:

  • retext (GTK editor โ€” great bidi; conversion via python-markups).
    Enable WebKit option for <style> to take effect in preview.
    Enable mathjax extension in settings.

  • https://gitlab.gnome.org/somas/apostrophe (GTK editor โ€” great bidi, conversion via pandoc).

    • Con: it applies "negative margin" to LTR (but not RTL!) header and list lines, so the # and bullets / numbers protrude to the left of the main body of text. I see why people try this trick, but IMHO it's very confusing to understanding markdown indentation rules ๐Ÿ‘Ž
  • https://github.com/wereturtle/ghostwriter (GTK editor โ€” great bidi, conversion via pandoc)

  • https://github.com/fabiocolacio/Marker (GTK editor โ€” great bidi, conversion via scidown/pandoc)

    • Con: no <div dir=... support? In preview, not

    • Con: no line wrapping, which means if you have a long line anywhere, your edit pane has to be at least that wide, or the RTL lines will be out of viewport.

    • Con: no syntax highlighting at all?!?

Editing trick: split lines into RTL/LTR segments

Avoid GitHub-like engines where every line break means a line break in output. Use the ability to break paragraphs into lines in source to your advantage:

1. ืชื•ื›ื™ื—ื• ืฉ:
    $\frac{1}{2}^n$ converges
    ื‘ื”ื—ืœื˜.

This allows you to avoid editing mixed lines, which makes life so much simpler.

Improving HTML output

P.S. The export and preview in most editors that use a real layout engine can be much improved by starting the doc with something like:

<style>
*{ text-align: start; unicode-bidi: isolate; }
li, h1, h2, h3, h4, h5, h6 { unicode-bidi: plaintext; } 
pre, code, .sourceCode, .ltr { direction: ltr; text-align: left; unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: isolate; }
</style>

<div dir=auto markdown=1>

(and closing with a </div> if feeling generous ;-)

Note: the empty lines around <div and </div> are important for CommonMark parsers to treat following text as markdown, not HTML.
If this makes whole output look like one paragraph, give up the <div :-(

Having to use explicit <div dir=... is still suboptimal. A good converter would slap dir=auto on like every element. This can not be simulated by any value of CSS.

TODO: explore unicode-bidi: plaintext;... It does auto-detect directions in many places, but in funny ways, e.g. list bullets still remain on right side but LTR text will be left-aligned... This actually has some benefits on a mixed list, but it shows it's not equivalent to setting dir=auto or dir=ltr.