How can I enter right to left text?

[aliphys]

When entering text in a RTL language (e.g. Persian, Arabic and Hebrew) the characters are not correctly recognized. You can see this in the image below.

With the magic ✨ of MS Paint, I can show what the Persian section should look like.

This is the Markdown code I entered. How should I change it so that the RTL text is displayed correctly?

md"""
# مساله بسل
لئونارد اولر در سال 1741 نشان داد که سری
```math
\frac{1}{1} + \frac{1}{4} + \frac{1}{9} + \cdots
```
.به عبارت زیر تمایل پیدا می کند
```math
\frac{\pi^2}{6}.
```
"""

---

Failed Solutions

• I tried using the <div dir="rtl"></div> tag as suggested here.
• Also tried adding the ‫ marker to the beginning of the line.
• Using VS Code to edit the .jl file didn't help either.

[holomorphism]

I don't know much about RTL languages, but it looks like you can use the "direction" property of CSS.
By inserting the following cell, all Markdown cells will be "right-to-left".

html"""
<style>
pluto-output div.markdown { direction: rtl; }
</style>
"""

Or if you want only the selected markdown cells to be "right-to-left" (or "left-to-right"), you can insert the following cell and use the rtl (or ltr) function.

begin
	function add_class(cls, md)
		HTML("<div class='$(cls)'>", repr(MIME"text/html"(), md), "</div>")
	end
	
	rtl(md) = add_class("rtl", md)
	ltr(md) = add_class("ltr", md)
	
	html"""
	<style>
	pluto-output div.rtl > div.markdown { direction: rtl; }
	pluto-output div.ltr > div.markdown { direction: ltr; }

	/* If you want to make rtl the default */
	pluto-output div.markdown { direction: rtl; }
	</style>
	"""
end

[aliphys]

Both approach work, thanks @holomorphism ! I especially like the small macro you made 👍 . Could you kindly explain how the code between the begin and end blocks work? I am a newcomer to the Julia world, but eager to learn. 😊

[holomorphism]

OK. I don't know if I can explain it well, but I'll try. (I rely heavily on translation engines for my English)
Also, please note that my understanding is as follows, but it might be inaccurate.

First, Pluto will render various Julia values into HTML and display them to the browser. For example, a normal Markdown string (md"""...""" or md"...") is actually a Julia value called a Markdown object, and Pluto renders it appropriately. Similarly, an HTML string (html"...") is actually an HTML object.

In my begin block, there are three functions and an HTML string. In Julia's syntax, the value of a begin block is the last value in the block, so the last HTML string will be rendered as the value of this begin block. This HTML string will add some CSS styles to the notebook.

Let me explain the function rtl() that I defined. For example, if you input md"test" |> rtl, it will be replaced by the following:

md"test" |> rtl
==> rtl(md"test")
==> add_class("rtl", md"test")
==> HTML("<div class='rtl'>", repr(MIME"text/html"(), md"test"), "</div>")

And this last value will actually be rendered as an HTML node like this:

<div class='rtl'>
(html expression of md"test")
</div>

This is an HML node that wraps the original markdown cell in a <div class'rtl'>...</div>.
This node is the target of the CSS selector

pluto-output div.rtl > div.markdown { direction: rtl; }

, and as a result, this cell will be displayed as RTL text.

You can check what the HTML node looks like using chrome's DevTools.

It's very interesting that Pluto notebooks allow such flexible display customization.

[aliphys]

I appreciate your detailed and clear explanation. Now I understand what does on to generating the Markdown in Pluto much better. 👍