Support for RTL languages

[HamzaAbdullahMoh]

• VSCode Version: 1.5.0
• OS Version: windows 10

I can honestly dare to say that this is the best open source editor for web developers but, the missing of the small things like the Arabic language support is really frustrating!!

@alexandrudima yes I mean to work with source code files containing Arabic or Hebrew.

[iam3yal]

Yeah, I'm in the same boat when it comes to Hebrew., even though I don't use Hebrew much in my daily day job, especially when it comes to development but this can come in handy at times so :+1: from me.

[alexdima]

@HamzaAbdullahMoh @eyalsk Do you mean you'd want VSCode to be translated to Arabic or Hebrew or do you mean that you cannot work with source code files containing Arabic or Hebrew ?

[iam3yal]

@alexandrudima Well, I'll speak for myself, I refer to the capability that allows people to write from right-to-left as opposed to left-to-right.

Translation isn't needed, I don't use the Hebrew translation at all in any program that I use so personally it's less useful for me but maybe some people would want that too.

[elkebirmed]

I think @HamzaAbdullahMoh want to see an RTL vscode editor as an option, and this will be so helpful

This's the needed information i think :smile:

[kazemihabib]

:+1:

[elkebirmed]

I think this should be labeled as a requested feaure

[HamzaAbdullahMoh]

@alexandrudima @elkebirmed @kazemihabib @eyalsk @ramya-rao-a First of all, a huge thank you for all of you. What I really meant is that if I can edit the text in the code itself not the interface, because half of my time I develop sites which they include Arabic texts. I am sure some of you had to write some rtl text and find it hard with most of text editors!!

[atlanteh]

Just to clarify, the problem is that RTL words get messed up: rtlB rtlA looks like rtlA rtlB rtlD rtlC engA engB rtlB rtlA looks like rtlA rtlB engA engB rtlC rtlD

[iddan]

To clarify the problem: when typing in an RTL language in VSCode there are two notable problems:

• It should be aligned to the right while it aligns to the left
• The cursor should be in the left edge of the line while it is in the right

Google Docs is a good example for a product that solved the problems listed above.

Unlike Sublime in VSCode there is no problem of chars in the wrong order.

[kookma]

Yes, Persian, Arabic and Hebrew are right-to-left languages. The editor should support BIDIRECTIONAL (BIDI) texts to lets RTL language users develop their code inside VSCode editor. Most of the time we work with mixed of English -Persian or in better words mixed of RTL and LTR texts. Microsoft Word, Google Docs support BIDI feature and allow mixed language typing.

This feature is very useful for a crowd users around the world with RTL language.

[Parsoa]

It is really frustrating that many otherwise great tools (Atom, VS Code, Sublime, you name it!) lack bidirectional editing capabilities. I usually end up writing each word in a separate line when working with HTML that includes Persian.

[athamzaabdullah]

It is been almost two years since we discussed and requested this feature, yet, nothing had changed. I still suffer a great deal when I venture to edit Arabic.

Nonetheless, I tried PHPStorm editor and it astonished me in how it supports RTL languages!!.

I wonder is it still that hard to do the same in VSCode or are we trying to solve geopolitical conflict here!!?!?

[iddan]

I feel your pain, but this is an open source project so anyone can open a PR that fixes this. For the great majority of editors RTL hasn't been top priority and I guess that's the same situation with VSCode.

[athamzaabdullah]

Why it is not top priority??!

[iam3yal]

@iddan That's actually far-fetched, I haven't looked into the code but I think that before anyone would even consider sending a PR the core team needs to have a plan for this so people would know what components/things require work.

[iddan]

An undirected PR is better than no PR. The VSCode team would probably have to be involved in the process, not necessarily the first commit.

[urielha]

FYI, I found an earlier version of this issue (containing less data) #4994

[marktani]

I agree @iddan. Can you, or someone else, offer advice on where in the code base to start looking? I'm interested in helping with the implementation for this feature.

[iddan]

Hey! I'm not familiar with the code base at all. Can someone from the Code team can give an advice?

[alihardan]

I think this issue should be closed, The main problem is #65648

VSCode has good support from RTL, the main problem is VSCode won't changes line direction to RTL when line starts with RTL text.

[athamzaabdullah]

It has been almost four years! I could not take it, so, I created a petition. http://chng.it/bLvRDf8DG2

[zeeshansayyed]

Is there any place where we can request features for VSCode. It's been 4.5 years and 381 people have signed that change.org petition so far, but I don't think anyone is even reading that. What's a good place to let the developers know about it?

[P0oOOOo0YA]

I don't know what's the problem here. if vscode is based on electron then every renderer page is actually a HTML which in turn supports RTL using dir attribute. All we want is to allow using a shortcut to set this attribute on the renderer page.

[iddan]

I believe it is not so simple because to render text in a code editor you need more than just changing the dir attribute. Assumptions are made in a constrained environment so when changing the conditions of the environment those assumptions can break and code needs to be changed. Sometimes a lot of it. But, as you said it is feasible with HTML to get RTL right. It just may be more work than you'd expect it to be.

[urish]

I've spent some time trying various things with VSCode dev tools. It seems like running the following two lines of JS code will switch the active document to RTL mode:

$('.view-lines').style.direction='rtl';
document.styleSheets[0].addRule('span[dir=ltr]', 'direction: rtl!important');

However, there are a few caveats:

1. Cursor will sometimes appear in the wrong place (moving around seems to fix it though)
2. Selection appears in the wrong place
3. The scrollbar goes over the text (it's semi-transparent, so still usable).

I recorded my screen so you can see what it looks like (and also follow my steps if you want to try it on your end):

Overall, it seems like a quick workaround that can be useful in some cases, but it's still far from providing a good editing experience.

[atlanteh]

This looks good, but I'm afraid it's nowhere good enough.. I believe most of us don't really care about setting the editor to start the lines from right. The main issue is writing code that involves both English and RTL language and the words get mixed up

[urish]

Yeah @atlanteh, just a quick PoC. For mixed BiDi editing, there's also Microsoft/monaco-editor#280, which contains a lot of useful information and compares how different code editors handle BiDi (seems like Visual Studio gets it right)

[omidkrad]

This is probably the only feature where VSCode falls behind Notepad!

Notepad supports RTL Reading Order and menu items for inserting BiDi Unicode Control Characters.

[vhhughes]

Yes, the irony is that Visual Studio handles it fantastically. So does Notepad++. But VSCode still cannot. I am not a Hebrew speaker, but I have to regularly deal with source code and data files that have embedded Hebrew, and trying to use VSCode is just killing me. I'm left with using a sledgehammer (Visual Studio) or poorer text editing solutions. (like Notepad++, etc.) Seems like a pretty obvious gap not supporting and RTL languages.

[binyamindavid]

We need this feature. Hebrew text is hard to handle with VSCode.

[sohailmerchant]

I wonder why such a simple thing is not natively supported? Only this issue has now made us use something else.

[bofeiw]

looks like not many editors supports this feature which is very painful

[Hedingber]

+1

[DearRude]

I can't stand why VScode does not have RTL support yet.

[MSKhodadady]

Hello guys I offer support for Unicode RTL character (200F) the editor. It ‏works in some programs like Telegram and GTK applications. It is very good because:

1. It has not that complexities of smart finding the direction. It may be good but in my opinion it is more confusing.
2. It will not break the style of plain text of files.

You can also put a button up in tab bar or another places that inserts this character. And I offer to show a mark for the character in text though the user knows if the character exists.

As the other guys mentioned, it is very useful for LaTeX and related tools.

[sixtyfive]

As someone who has suffered under many an editor over the years and works with potentially bi-directional text every day, very happy to have found this Issue here today! So far, it seems no project member has responded (but perhaps I just oversaw), looking forward to some kind of "official opinion" (@alexdima?). Please, Microsoft, take this as seriously as you've always taken the requirements of non-Latin-script-using communities in offerings such as Microsoft Word. This is about more than just convenience, it's about culture and diversity and Doing The Right Thing.

Since VSCode is, specifically, a text editor for programming and related work, I'd like to caution about silently inserting (and then saving with the document) invisible Unicode characters in any way without the user having specifically requested for that to happen. There are many cases where it is paramount to not have your editor play magic tricks like that on you. A button/menu item/etc. explicitly inserting invisible Unicode RTL/LTR markers as suggested by @MSKhodadady would of course be fine, and certainly helpful in many situations.

What might be the most appropriate is to have a setting (placed in the toolbar for easy access and given a hotkey of its own) to toggle between one of these three:

1. Alignment depending on first character of the line. Scrollbar on the left/right according to UI settings (default setting).
2. Everything aligned on the left, but proper text direction maintained. Scrollbar on the right.
3. Everything aligned on the right, but proper text direction maintained. Scrollbar on the left.

Clashes with the scrollbar such as pointed out by @urish (who also wisely links to Microsoft/monaco-editor#280!) must be prevented by not having text begin underneath the scrollbar, no matter whether it's on the left or the right side. Ending underneath is fine.

[elharony]

This is very frustrating. I traded-off VSCode for Notepad++ to be able to READ some code, that contains any RTL Language (i.e. Arabic, Hebrew, Persian, Urdu).

To clarify the problem, here's a very simple code snippet, contains one Arabic Character, and this is what Notepad++ displays:

Here's how VSCode displays it:

[sixtyfive]

Here's how VSCode displays it:

I wonder if that is due to trying to be smart around E2 80 8E/F.

Unfortunately, no love in this Issue here. There's a chain of comments leading to https://github.com/microsoft/vscode/issues/85853#issuecomment-561677624 and @alexdima's response, https://github.com/microsoft/vscode/issues/85853#issuecomment-561687604. Basically his stance seems to be that VSCode should be a great code editor first, a great text editor third. That's an unfortunately narrow-sighted view because it is, even without any such intention, I'm sure, imperialistic in a cultural sense, at its core.

The abovementioned right2leftdh/right2leftdh.github.io#4 also links to #78867, a sub-problem, which last got some attention by @alexdima [is @alexandrudima his old handle?] at the end of March and may be more relevant to his (and Microsoft's?) self-proclaimed priorities. I'm going to subscribe to that one and upvote it, too.

[MohammedEssehemy]

There is a new initiative here to support Arabic in tech, so you can check this repo and align our efforts

https://github.com/KL13NT/arabic-a11y/issues/6

[iddan]

Why not generally talking about RTL? Why specifically Arabic?

[elharony]

Hey @iddan ,

I guess all of us are talking about RTL Languages Support in general, it's not about specifying Arabic or something, if the OP was Pakistani, he would specify Urdu, and I think all RTL Languages Support almost the same (not really sure, please correct me if I am wrong), and I don't mind seeing a Hebrew/Persian/... whatever RTL Language initiative to add RTL Support in VSCode or similar tools. All I want is to get the RTL Support here! 😄

[sixtyfive]

There is a new initiative here to support Arabic in tech, so you can check this repo and align our efforts

الله يبارك فيك لجهودك يا محمد! بس ليش مكتوب الإيسسيو بالعربية؟ في أكثر من اللغات مكتوبة من اليمين إلى اليسار وليسى كل واحد مبرمج إله لازم يشتغل مع نصوص عربية كذلك إنه ناطق فيها! Long story short, the more effort the better, but my vote would be to keep everything in English :-)

[giordano]

@urish is it possible for an extension to run the code you shared in https://github.com/microsoft/vscode/issues/11770#issuecomment-563412633, so that it could provide a switch to enable/disable basic RTL support?

[urish]

@giordano I have no idea, but if this is possible I'd love to see it happening :)

[laukstein]

In code: you can wrap values and comments into <span dir=auto>...</span> and it would fix the bidi-directional text (RTL and LTR and mix of it).

[YoraiLevi]

I have began writing markdown documents in Hebrew, I am no big web dev but this issues seem to be easily solved. Help -> Toggle Developer tools locate your editing window and edit the html such that the element containing your window will have the property dir="rtl" a few downfalls are the select tools rendering incorrectly and the fact the first few characters are hidden behind the scroll bar\minimap. As far as I am aware of fixing the character alignment shouldn't be a big issue as it is probably a css related thing (moving the scroll bar \minimap to the left instead)

[fawazahmed0]

Would love to have this feature added

[vaknin]

The solution seems quite trivial, i.e. every line in every document has its span set to "ltr" by default. If we'll change it to "auto" instead, it'll achieve some desireable results.

Is anyone familiar with VSCode's API? Is it possible to change the document's HTML via an extension?

[YoraiLevi]

The solution seems quite trivial, i.e. every line in every document has its span set to "ltr" by default. If we'll change it to "auto" instead, it'll achieve some desireable results.

Is anyone familiar with VSCode's API? Is it possible to change the document's HTML via an extension?

vscode seem to support custom editors but there seem to be extensions such as https://marketplace.visualstudio.com/items?itemName=satokaz.vscode-markdown-header-coloring that if i understand correctly, modify the editor and inject styling to the editor. an extension adding ctrl+Rshift,ctrl+Lshift keybinds and command decorating the view with an html tag with a dir attirbute should be a possible starting point for an rtl extension

[vaknin]

The solution seems quite trivial, i.e. every line in every document has its span set to "ltr" by default. If we'll change it to "auto" instead, it'll achieve some desireable results. Is anyone familiar with VSCode's API? Is it possible to change the document's HTML via an extension?

vscode seem to support custom editors but there seem to be extensions such as https://marketplace.visualstudio.com/items?itemName=satokaz.vscode-markdown-header-coloring that if i understand correctly, modify the editor and inject styling to the editor. an extension adding ctrl+Rshift,ctrl+Lshift keybinds and command decorating the view with an html tag with a dir attirbute should be a possible starting point for an rtl extension

Sounds like a good plan. We should take a look at the source-code you've sent and attempt to do something similar, as I couldn't find any information on VS code's API.