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.

[nikhilambre]

Hi, facing issue with Arabic numbers. When i paste array of Arabic numbers in vscode it get's modified and not able to get desired sequence.

Actual sequence needed -

But when I paste it in vscode or even here in comment box, it updated as follows

var id = ['۰', '۱', '۲', '۳', '٤', '٥', '٦', '٧', '٨', '۹'];

[fawazahmed0]

Hi, facing issue with Arabic numbers. When i paste array of Arabic numbers in vscode it get's modified and not able to get desired sequence.

Actual sequence needed -

But when I paste it in vscode or even here in comment box, it updated as follows

var id = ['۰', '۱', '۲', '۳', '٤', '٥', '٦', '٧', '٨', '۹'];

use a editor which supports RTL , for example in notepad++, you can set to RTL mode by clicking view -> RTL

[nikhilambre]

in visual studio or in notepad it doesn't rearrange but on push over git it's observed re-arranged, better updated it as -

let zero = '۰';
let one = '۱';
let two = '۲';
let three = '۳';
let four = '٤';
let five = '٥';
let six = '٦';
let seven = '٧';
let eight = '٨';
let nine = '۹';

let id = [zero, one, two, three, four, five, six, seven, eight, nine];

[elharony]

@nikhilambre You can use one let, and separate variables by a comma.

let zero = '۰',
    one = '۱',
    two = '۲',
    three = '۳';

I know this is a bit off-topic of the issue, but I thought it may be helpful.

[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

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.

I checked the source code and tested the API for decorating text. The entire code is based on the setDecorations (a method of TextEditor) provided by the API. based on this article https://vscode.rocks/decorations/ and the API, it seem that not all css properties are mutable with this method, I had tried blindly using more css properties but they do not seem to modify the text alignment, (see https://github.com/YoraiLevi/vscode-rtl) However, this is javascript. thus with enough monkey patching everything should be possible. These functions setDecorations,trySetDecorations and setDecorationsFast, TextEditorDecorationType seem to be related, https://github.com/microsoft/vscode/blob/82ac7bacf31c5935fb33cc84fbd0a9963b48a1d5/src/vs/workbench/api/common/extHostTextEditor.ts#L26 https://github.com/microsoft/vscode/blob/02f0509f75f258571223f4434c04a83e67f0c14e/src/vs/workbench/api/common/extHostNotebookEditor.ts#L225 https://github.com/microsoft/vscode/blob/f74e473238aca7b79c08be761d99a0232838ca4c/src/vs/workbench/api/common/extHostTextEditor.ts#L494 https://github.com/microsoft/vscode/blob/630e706ad2de99e255a18bf77f72d569e9fc0e49/src/vs/workbench/api/browser/mainThreadEditors.ts#L184

edit: I have found https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui which allows to modify css stylesheets with settings.json for example: "customizeUI.stylesheet": {".view-line" : "direction: rtl;text-align: right;"}. though this still doesn't solve the text selection issue

edit: the selection of text is rendered overlay, it looks like it is generated here: https://github.com/microsoft/vscode/blob/70da5e2710c8c981470041e3268b3396460dbbbb/src/vs/editor/browser/viewParts/selections/selections.ts#L281

[baruchiro]

So is anyone can create a simple VSCode Extension for that? I'm sure we will help you after the initialization...

[YoraiLevi]

After a whole lot of investigation I now understand why the vscode team isn't enthralled on implementing rtl support. In order to support many vscode related features vscode manually renders multiple native textual features such as the cursor, selection, highlighting, popups over a per-line basis pseudo text container, so far, I have found that most of the parts consisting of the interface can be found under src/vs/editor/browser/viewParts, Their position is absolute and seem to be computed mostly in render or prepareRender usually by setLeft declared here https://github.com/microsoft/vscode/blob/4884986dd6c5c62a8b3f57779f92748e7662b686/src/vs/base/browser/fastDomNode.ts#L96 despite hoping that substituting setLeft with setRight everywhere it only works on some elements, such as the minimap and scrollbar. this needs further investigation. (I just love undocumented code)

further more; a discussion regarding the implementation on the handling of line alignment would need to happen. as it is currently all the gui counts on the fact that it is aligned to the left (or if implemented the right). for interleaving alignment, which seem a reasonable feature, it is not obvious what should be controlling the conditional rendering, what should store the alignment data over sessions, etc.

So far it seems like an extension adding support for rtl would have to:

• Implement the rtl rendering algorithms.
• Monkey patch basic gui elements' css and a few javascript class controllers. this repository might be helpful in understanding how to do so. https://github.com/iocave/monkey-patch

[VehpuS]

I might try this out, though the fact that VSCode outright disallows making changes to the editor's DOM is kind of troubling (since it might mean that the monkey-patch workaround might be actively suppressed by future changes).

In any case, if someone else is in the process of trying - here are two small CSS snippets that can be useful for developing RTL support:

// Move minimap to left

.minimap.slider-mouseover {
    left: auto !important;
    margin-left: 1em; // precise value TBD
}

// Add per line support for RTL without alignment change

.view-line>span:before {
    content: "\200f";
}

.view-line>span:after {
    content: "\200f";
}

[aradalvand]

No updates on this?

[Korak-997]

Hi,

its been more than two days i am trying to find a solution to walk around this problem. Unfortunately i did not find a perfect one !!!

Somehow i was able to find a VScode extention called RTL Markdwon ( Maybe i found it from this Issue or in somewhere else !).

Anyway it seems to do the trick , but while i am having a problem with it i am not sure if it solves the problems actually or not !!!

So the extension need to work this way :

You create your markdown file and then a button will be shown on the right corner which suppose to move the text to the right. like in this pic

Then the problem or the Error that i have is when i click the icon , it says the extension is not installed!! like in the pic below .

Even though as it can be seen in the Extensions page it is already installed !!!

The point is this extension may solve the problem for most of us ! but while i am getting that error i cant try it out !!!

Can any of you please try it out and see if the error still is there ???

Please make sure to give us all a Feedback ( it may help us all )

here is a link for the Extension Repo as well : https://github.com/dalirnet/rtl-markdown

Thanks,

[KL13NT]

Is this issue going anywhere? Has any of the maintainers given attention to this?

[Korak-997]

@KL13NT i do not think so :) i think they do not even care !!

[sixtyfive]

Well, someone was assigned, asked for more info, got it, added some labels, mentioned this Issue elsewhere, then unassigned themselves again. So attention was given, MS seem to be aware, but the milestone "backlog" would suggest they see it as least important.

[Korak-997]

Well i guess we need to wait longer !

[sixtyfive]

Or someone knows someone who knows someone who works at Microsoft and can make a backchannel statement about how this issue (lower-case "i") is seen internally?

[Korak-997]

So if anyone is still looking this maybe the solution for using RTL languages in Markdown files:

First here is my old Comment which i had a problem with an Extension i found for VSCODE https://github.com/microsoft/vscode/issues/11770#issuecomment-820181610

This is some kind of solution from the Creator :) may help you guys. https://github.com/dalirnet/rtl-markdown/issues/2#issuecomment-823093049

[P0oOOOo0YA]

I solved the problem by using Pinglish (Finglish) for Persian. I write the text in Pinglish and convent it to Persian by a script. Maybe this technique can be done for Hebrew and Arabic as well.

salam hale shome cetore

is converted to

سلام حال شما چطوره

[Korak-997]

@P0oOOOo0YA can u please provide the links and a bit more details ?

[P0oOOOo0YA]

@Korak-997 I don't know what's your target language but I'm pretty sure it's not Persian since the majority of Iranians are already aware of Pinglish. There was no way to text in Persian in early cellphones and Persians had to write in Pinglish [You can see it in action here].

In Araglish (LOL I just invented a word) for example a simple how are you can be written as

kayfa halok?

which will be converted to

كيف حالك؟

[Korak-997]

@P0oOOOo0YA well my target language is Kurdish which is pretty close to persian . thank you very much i will check it out, and most likely it will solve my issue thanks a lot.

[P0oOOOo0YA]

@Korak-997 Oh I forgot about Kurdish:( yes Kurdish is another RTL language. This technique can be used along with LTR languages as well which no matter what you do always mess things up. If you use a spell checker library that can filter out LTR words (for example German, Turkish, English spellchecker) then you can put those words beside converted Kurdish words without any issue. Ok I just wanted you to know you can expand on this technique and use it everywhere a LTR language is allowed.

I'm glad I could help.

[sixtyfive]

I solved the problem by using Pinglish (Finglish) for Persian. I write the text in Pinglish and convent it to Persian by a script. Maybe this technique can be done for Hebrew and Arabic as well.

salam hale shome cetore

is converted to

سلام حال شما چطوره

That's a workaround, not a solution. Plus, there's a million different transliterations out there, from Pinglish over 3arabi to DMG, Buckwalter, etc. And it doesn't help at all if you must be able to see and work with the Unicode, which is probably the case for everyone who isn't producing content but modifying it.

[P0oOOOo0YA]

@sixtyfive yeah a workaround is a better term for this method and if I wanted to modify some Persian text, I convert it to Pinglish, do whatever I like and then convert it back to the Persian. This issue is opened in 2016 and Microsoft hasn't done anything to address it till today. You can wait ortry to do some workarounds

[sixtyfive]

What I resorted to doing, unfortunately, is to edit things in Gedit or Kate and then copy-paste them back into VSCode. Considering that there's [at least these] two perfectly fine, very capable, open source text editing widgets available that someone as wokely open-source-savvy as Microsoft claim to be, could contribute to, it's a shame one has to resort to such procedures.

[P0oOOOo0YA]

@sixtyfive I feel you :( it is ineffective way of coding, editing. I think there are two ways to solve this issue by an extension:

1. Direct solution: Putting dir="RTL" attribute on the renderer page and try to put things straight
2. Indirect solution: Some workarounds like I mentioned above

I'm planning to write an extension for VSCode which can be configured with different bidirectional transliteration engines to make things smooth and transparent. I don't know when I'll find time to do that but I'm sure I will do it before Microsoft solves this issue. LOL

[KL13NT]

@P0oOOOo0YA If you find time for this, could you share it here and mention me? I'd appreciate it.

[P0oOOOo0YA]

@KL13NT Yeah, I'd be happy to!

[tmcconechy]

For a test case... try copy and pasting things like the inside of the quotes and the whole thing including the quotes and two quoted contents. The editor makes this impossible.

        wide: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'لسبت'],
        abbreviated: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
        narrow: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س']
      },
      // ca-gregorian/main/dates/calendars/gregorian/months/format/wide
      months: {
        wide: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
        abbreviated: ['ي', 'ف', 'م', 'أ', 'و', 'ن', 'ل', 'غ', 'س', 'ك', 'ب', 'د']
      },

[SaadBazaz]

This Issue is wayy needed. I can't believe something as simple as this hasn't been tackled by VSCode yet. It's alienated millions of people.

[aradalvand]

Honestly, this should've been implemented years ago.

[byteab]

Ok, I am going to work on this issue. can anyone give me a hint on where to check for this @alexdima

[VehpuS]

Here are some files that seemed to have some rtl logic that might be useful to start from (I've been trying to find where to start myself, albeit in a somewhat unfocused manner so far :) ).

- https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/editor/common/viewLayout/viewLineRenderer.ts#L74

  -
  https://github.com/microsoft/vscode/blob/692ffc022501a8cac7dc398fafe0711a351730f1/src/vs/editor/browser/viewParts/lines/viewLine.ts

  -
  https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/editor/common/model/pieceTreeTextBuffer/pieceTreeTextBufferBuilder.ts

  -
  https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/editor/standalone/browser/colorizer.ts

[byteab]

thank you Moshe

[byteab]

I think the actual pain is the cursor. when we move the cursor to the left it moves to the right and vice versa. but as I checked the Google doc or even macos note taking app they have the same behavior. can anyone explain what is the expected behavior ?

[Maroussia]

Thank you so much @TheEhsanSarshar this is such an important issue! I guess there are two different problems:

(1) can we display a RTL text in vscode with full RTL support?

(2) can we display a text with mixed RTL and LTR languages without bugs?

Regarding (1): When opening a text all in a RTL language (in Arabic, Hebrew, Kurdish, Persian...) you should ideally have the possibility to have the text displayed RTL with the cursor on the left.

Regarding (2): I have never seen an editor that does not become buggy when I mix Arabic and English (GoogleDoc is no exception here), it might be still difficult to get a cursor to switch from LTR to RTL between two words?

[VehpuS]

Every line has a class allowing code to potentially set the "direction: rtl" css style + the unicode 'RIGHT-TO-LEFT MARK' (U+200F) (https://www.fileformat.info/info/unicode/char/200f/index.htm) works in the editor. I've tested this with the electron developer console before. I just couldn't find (though admitedly haven't spent a lot of time looking for) where to integrate these in the editor's code.

[byteab]

as I found the only issue in vscode is when you write RTL it start from left instead of right and it somehow make sense when for example writing a comment. pretend that rest of the code is in the left but your RTL comment is on the right. and also when you combine both RTL and LTR it's just working correctly. in RTL the cursor move from right to left and in LTR cursor move from left to right. maybe I don't know what is the expected behaviour.

[VehpuS]

Here are the goals I am trying to reach when I say "RTL support".

1. I would like to be able to view certain documents in an RTL layout.
   • Use case: allign to right by default, cursor behaving in n RTL fashion (i.e. when reading / writing a text only document written in an RTL language).
2. I would like to be able to switch beween document layouts dynamically when necessary
   • Use case: when writing a dictionary of translations into an RTL language.
3. I would like to be able to scope this behavior to certain lines in the code editor - either using a context menu action or perhaps using some comment tagging (i.e. /* vscode:start-rtl */ ... /* vscode:end-rtl */).
   • Use case: adding comments in an RTL language.

[byteab]

@VehpuS is there any code editor that support RTL correctly?

[VehpuS]

No to my knowledge - though admitedly that was not a criteria I used to search. I know that some MacOS text editors lt set RTL by line in a similar way, and Microsoft Word supports this behavior as well.

[sixtyfive]

Not with the features / as described by VehpuS, but good enough to be relatively usable, is Gnome's Gedit.

[VehpuS]

Another issue I forgot to highlight: rtl to rtl dictionaries with non rtl characters (numbers / latin characters):

You can see the key / value strings get mangled together due to LTR shenanigans - this is a bigger issue actually because it makes the key / value seem like mistakes (or is just super confusing if sentences are involved).

[avipars]

Another issue I forgot to highlight: rtl to rtl dictionaries with non rtl characters (numbers / latin characters):

You can see the key / value strings get mangled together due to LTR shenanigans - this is a bigger issue actually because it makes the key / value seem like mistakes (or is just super confusing if sentences are involved).

Yes, also with arrays, it gets all over the place

const itemLists = ["microSD Card", "Steak Knife", "ButtonDown Shirts"]; const hebrewLists = ["סכין סטייק", "כרטיס זיכרון microSD Card", "חולצה מכופתרת"];

mainly when you combine the hebrew and english into one variable

[sarmadka]

5 years later and this ticket is still open! I think it's time to give up on VSCode for anything containing RTL.

I personally spent a week or so tracing through the codebase for how to properly support RTL and concluded that it's very complicated as it's not a standard HTML document like you see on a regular web app; vscode is heavy on using math to calculate the movement of cursor, selections, etc, and even the rendering of the text itself, so you can't just depend on CSS to add the RTL support; you have to actually study the code base and have a thorough understanding of the logic in order to be able to modify it. To clarify the picture, think of VSCode as if it has its own rendering engine, except that the rendering engine outputs HTML tags rather than pixels.

The best alternative I can think of is GEdit. It already is a very strong editor, and I think it's easier to write GEdit plugins to add needed functionality than it is to add RTL support to VSCode.

[sixtyfive]

One gripe I have with Gedit, too, unfortunately, is that there's no way to force left-aligned or right-aligned to a mixed RTL/LTR document. If anyone knows of another editor that does everything right Gedit does right, plus this, please do share!

[byteab]

@sarmadka does Gedit handle RTL correctly and the way it supposed to be ?

[sixtyfive]

I have my gripes. But it could be much worse.

[byteab]

for example you have the following code

// put an RTL comment in here
let x = 23

and now you want to add a comment in a RTL language. how it should be ?

[sarmadka]

@sarmadka does Gedit handle RTL correctly and the way it supposed to be ?

Yes, it does.

[sarmadka]

One gripe I have with Gedit, too, unfortunately, is that there's no way to force left-aligned or right-aligned to a mixed RTL/LTR document. If anyone knows of another editor that does everything right Gedit does right, plus this, please do share!

If you mean force RTL/LTR on partial lines (part of the line forced to be RTL within a line that is LTR or vice versa) then yes, it doesn't seem to handle that. If you mean force the entire line to be RTL/LTR then you can use the RTL/LTR unicode marker character.

Basically, insert unicode 200E to force LTR, and 200F to force RTL. In Ubuntu you can do that by hitting CTRL+SHIFT+U then enter the unicode number.