Mixed RTL and LTR

[antil0l]

many electron apps support this, i wonder if the lack of it is related to md or something else

[yakikim]

I’ve wrote some workaround that includes mixed directions in one note: Obsidian - How to Set LTR Area Within RTL Note

[Badhri]

A Lots of users write their notes in more than one language some of the languages are rtl like Arabic
Unfortunately When I activate the rtl option even my English notes goes from right to left I hope if there is a dynamic solution something like google keep, twitter and a lot of other apps.
It will be really helpful.

[Afrahs]

I agree, I had the same problem so it will be useful to have dynamic RTL / LTR.

[Mustafa106]

I had the same problem, I just hope for auto RTL / LTR like in MS word. Just put the cursor and start typing in RTL or LTR direction, no black magic, no special coding hacks.

I take notes from reference in the same page, since its Arabic, I need Arabic references and English note in the same page. Found RTL Support plugin, but it can only change the entire page format.

From what I know that electron support mixed directions since this feature had been supported for a long time in browsers which what electron based on (chromium).

[mwxgaf]

I thing the solution that user @lingdocs suggested here will fix the problem. Could it be used?
<p dir='auto'>

[mwxgaf]

In continue of this:
It can be fixed by adding a dir="auto" attribute to all <div class="cm-line">s as you can see in the picture

[Mustafa106]

When typing in obsidian, the text in the editor is either LTR or RTL. There is no in between. And the non-native support of Mixed RTL and LTR in obsidian is a big problem for people who speak Arabic, Hebrew and Persian language.

there are lots of hacks and codes shared around here to partially solve this, but none completely work as intended.

I was researching a way to do an automatic and universal way without me having to put wacky code on every line to make it LTR or RTL.
I solved my problem and achieved the MS Word-like behavior of mixed RTL and LTR that I desired, and wanted to share my finding.

Here my code, it’s simple and very effective. Just type and it’s automatically will be either RTL or LTR depends on the language.

* {
    unicode-bidi: plaintext;
}

Save as text-bidi.css in snippets folder and activate it from "CSS snippets" in the setting menu. that’s it.

• Settings → appearance → CSS snippets
• Snippets folder is in Your_Vault\.obsidian\snippets
  • you can also open it from Settings → appearance → CSS snippets and then click the folder icon.

Thanks to realsarm at stackoverflow because his answer made me know about unicode-bidi: plaintext.

Here an image of some Lorem ipsum text from wikipedia to demonstrate the Mixed RTL and LTR text.

• unicode-bid: plaintext

  This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the direction property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm. This value allows the display of data that is already formatted using a tool following the Unicode Bidirectional Algorithm.
  source: unicode-bidi - CSS: Cascading Style Sheets | MDN

[WhiteNoise]

Do tables? Bullets lists, Checklist, images, embeddings work?

[Ali]

I tried this method. It is very effective and solves 80% of my problems. However, it only works with text and does not affect other blocks like bullet lists, numbered lists, quotes, etc. Also if the sentence starts with a non-rtl character (* or =) it won’t work.

[Mustafa106]

I guess i was too excited and didn’t fully test. will edit the post to reflect that.
I don’t know why it’s failed, is the problem that obsidian always assume LTR by design or it’s that unicode-bid isn’t really suitable for text with special characters.

like numbered list work as intended, but headers, tables, Bullets lists, Checklist, quotes are not. for images it works as long as there RTL character after the image URL.

[Mustafa106]

I can’t edit the post, I want to say that it isn’t the magical solution we were looking for and explain where it fail.
Should I delete the post?

[CawlinTeffid]

Don’t delete the post! A partial solution is still good info.

You’re using a very general selector to apply the style — perhaps you could try adding some more specific selectors to target the elements that aren’t receiving the style.

[Mustafa106]

I mean after tinkering with obsidian’s CSS, I don’t think a full solution is even possible with CSS, we need javascript to do the heavy lifting here to alter the HTML rendering.

[CawlinTeffid]

Ah, well. Might be worth having another look when the new default theme is released (if you’re not already using it via Insider builds).

[WhiteNoise]

I gonna merge this discussion with the FR

[mwxgaf]

I created a plugin that fixed the problem completely ( file title -file manager - reading mode - editing mode - bullet points - code blocks - callouts - bold text … )
I am preparing for deployment in obsidian community plugin list
now it is in my Github
It will be ready in hours

[Archie]

Good news, looking forward to see how it works. I wish I can handle editing part better than most othere. it is not the problem of showing right in preview, it is the issue of editing in mixed language mode is exteremly frustrating.

[mwxgaf]

Both problems are fixed in my plugin
Near to deploy just wait a little …

[mwxgaf]

I registered the plugin for review
it will be available in the community plugins if Obsidian confirms it

here is the Github repo (version 0.1.0 is ready for manual installation(until obsidian confirms then you can install from app))
repo link