When setting the editor to use RTL , the text is all over Right to left , no matter it’s left to right language or Right to left language , in cases that we have mixed RTL and LTR texts.
For example Arabic or Persian text and English text.
In SimpleNote , which is a Electron-based app like Obsidian, the mixed RTL and LTR are supported and working well, please implement this feature as it’s necessary for RTL users.
Proposed solution
Implementing Mixed layout, which supports both RTL and LTR in realtime.
the RTL text will be in Right direction and the LTR text in left.
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.
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).
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.
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
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.
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.
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.
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.
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
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.
