Is RTL Text Possible in Markdown Source Mode?

[FarisNajem]

Hello,

I’ve been using DEVONthink for about two months and have been very happy with the experience.
I would like to ask about automatically formatting Markdown text in both the source and preview modes. Specifically, I want the text to be right-to-left (RTL) when writing in Arabic and left-to-right (LTR) when writing in English.

I’ve tried adding CSS code in the settings, but it didn’t work as expected—the text still appears left-to-right, as is showing in the below screenshot. Here’s the code I used:

body {
direction: auto;
unicode-bidi: embed;
text-align: start;
font-family: “Scheherazade New”;
font-size: 16px;
line-height: 1.6;
}

If automatic text direction detection is not supported, how can I ensure that the text always appears right-to-left in the source mode?

I’ve also tested the issue in the DEVONthink 4 beta release, but unfortunately the same problem persists—Markdown text written in Arabic still defaults to left-to-right alignment in source mode , where the direction appears to be forcibly set and cannot be changed, regardless of the CSS settings.

Interestingly, this issue does not occur with RTF documents in DEVONthink.

I’d really appreciate any guidance or workaround for this. Thank you in advance!

Best regards,
Faris

DEVONthink (3.9.9)
MacBook Pro 16″, M1 Pro, 16GB RAM, 1TB SSD, macOS Sequoia 15.4

[korm]

This is not an answer, but a query. If you open the markdown document in an external editor that supports RTL languages, and later view that document in DEVONthink, is the text correctly displayed? Equally important, does search in DEVONthink find the text?

[chrillek]

According to the W3C, you should set the dir attribute on the html element of the document. Which is not possible with an MD document, since the html element is added by the preview processor.

Structural markup and right-to-left text in HTML

The same article expressly discourages using CSS for direction settings.

So, the more relevant question would be: what are the lang and the dir attributes in the resulting HTML? You can see that by converting the MD file to HTML in DT and then looking at its source (the HTML one’s, that is).

It might be possible to set the direction on the HTML element with a script like this one

document.addEventListener('onDocumentLoad', (e) => {
  const htmlElement = document.querySelector('html');
  htmlElement.dir = 'rtl';
});

You can put that in a file that you reference in your global DT preferences or you can add it to the top of the MD file inside a script element.

And there’s a language metadata key in MultiMarkDown. You could try to set that to arabic and see if it does anything useful to the html attribute.

There’s also been a thread on language support for MD in the forum:

Language setting in Markdown notes

I’m writing notes in Markdown, mostly in German but also some in English. I’ve set my editor pane to a quite narrow column, so I’ve activated hyphenation in the style sheet for my Markdown notes. I use DEVONthink with the English user interface. And there lies the rub: DEVONthink sets the language in the rendered Markdown to the language of the user interface. This means that the hyphenation in my German notes is kaputt. As far as I know, there’s no way to set the language in CSS. I know there…

[korm]

Does putting your text in the DEVONthink markdown editor into a block like this work?

<div dir="rtl">
محتوى بالعربية هنا
</div>

(This is not in the CSS it is in the editor itself.)

[FarisNajem]

@korm

This is not an answer, but a query. If you open the markdown document in an external editor that supports RTL languages, and later view that document in DEVONthink, is the text correctly displayed? Equally important, does search in DEVONthink find the text?

Thank you for your interest.

Regarding your first question: I did try opening the document in the CotEditor app, which supports right-to-left editing (screenshot below), but when I opened the same document again in DEVONthink, I got the same result: Arabic text editing is left-to-right!

The answer to your second question:
Yes, text search in DEVONthink finds the text in this document.
Thanks again.

[BLUEFROG]

That behavior isn’t specifically supported in DEVONthink 3.x. It has changed for DEVONthink 4.

[FarisNajem]

Hi Korm,

I’m afraid my post wasn’t clear enough. What I meant was not preview mode, but source mode. Preview mode works fine from right to left after I’ve used CSS in the preferences, but the problem is with source mode.

The code you sent only works in preview mode, which is what the CSS actually does. My problem occurs when I’m editing. It’s annoying when I’m writing from right to left, while the text alignment is left to right.

Thank you, and I appreciate your advice.

[FarisNajem]

Actually I tried DEVONthink 4 also. The results are same: RTL in preview mode, LTR in source mode. The below screenshots show this!

[BLUEFROG]

See Format > Alignment > Writing Direction. And in the Help…

[FarisNajem]

Hi,

Thank you for the helpful explanation.

I understand now that the dir attribute should be set on the <html> element, and that this isn’t possible in Markdown directly, since the HTML structure is generated by the preview processor. I’ve also read the W3C guidance and understand why CSS alone isn’t enough.

However, my issue is not with the preview of the Markdown file. It displays correctly when using a custom stylesheet.

The problem I’m facing is with the source mode while writing Markdown inside DEVONthink. The text in that mode is always left-aligned and doesn’t follow the direction of the script (like Arabic). Since the source mode is a plain-text editor, I believe none of the HTML or scripting workarounds can affect it.

I’d really appreciate any suggestions.
Thanks again!

[FarisNajem]

Thank you very much for your response and for pointing me to the Format > Alignment > Writing Direction option.

I already tried that in both versions 3 and 4. It works when I select some text and change its direction to RTL. But when I continue typing, the text goes back to LTR automatically.

The screenshot below shows this.
Thank you again for your help!