Visual Studio Code right-to-left test

[nathangibson]

Name of app/URL of website

What app or website are you testing?
Visual Studio Code
Are you testing a particular field or type of document?
Plain text

Desktop (please complete the following information):

OS: Mac OS 10.14.5
Version of app or website (if applicable) 1.14.1

TESTS FOR PLAIN TEXT EDITORS

Copy this text into your text editor, answer the questions, and then paste it back here. Put an x inside the [] to answer the questions below. Feel free to add screenshots in the issue.

TEXT DISPLAY

1. Does basic mixed-direction text display correctly? The first line should display the numbers left-to-right, the second line right-to-left.
   Word 1, 2 الكلمة, word 3
   كلمة 1، word 2, كلمة 3

-[] Yes
If No, what happened?
The numbers on the second line still display left-to-right.

LINE DIRECTION

2. Can you set the base text-direction in the program's menu? Try setting the direction of the line below as right-to-left. The period should be on the left side of the line.
   هذه الكلمة.

-[] Yes
If No, what happened?
Not available from menus. Period appears on the right.

3. Can you align text to the right (either using paragraph alignment or by setting the text direction)?
   هذه الكلمة.

-[] Yes
If No, what happened?
Not available from menus.

4. Does the beginning of the line start on the right for RTL text? (Try entering a line break with the cursor on the right side.)
   هذه الكلمة.

-[] Yes
If No, what happened?
End of line is on right.

SELECTING TEXT

5. Can you position the cursor correctly in RTL text with the mouse?
   هذه الكلمة.

-[x] Yes
If No, what happened?

6. Can you position the cursor correctly in RTL text with the arrow keys?
   هذه الكلمة.

-[] Yes
If No, what happened?
Within RTL text the right arrow moves the cursor left and vice versa.

7. If you double-click on a word in RTL text, does it highlight the correct word?
   هذه الكلمة.

-[x] Yes
If No, what happened?

8. If you double-click on a word in RTL text, does it select the correct word? (Test by copying the word to the clipboard and pasting it somewhere else.)
   هذه الكلمة.

-[x] Yes
If No, what happened?

9. Can you select characters within an RTL word using the mouse?
   هذه الكلمة.

-[x] Yes
If No, what happened?

10. Can you select characters within an RTL word using the keyboard?
    هذه الكلمة.

-[x] Yes
If No, what happened?
Yes, but the arrow keys are reversed.

Other Notes/Screenshots

Relates to the following open issues in the VS Code repo:
See especially microsoft/vscode#86667
Also
microsoft/vscode#11770
microsoft/vscode#65648
microsoft/vscode#83365
microsoft/vscode#4994
microsoft/vscode#65855

[zspitz]

@nathangibson RE # 6 under Selecting Text -- What is the good answer here?

I think cursor movement and selection have to work the same way, and having the right arrow always move the cursor right would result in a discontiguous selection at the border between LTR and RTL, but which would visually appear contiguous.

I think the better solution is to encourage thinking of the right arrow movement as "advance the cursor position logically forward", and everything else falls into place.

[nathangibson]

@zspitz Thanks for the comment.

Partly this depends on whether the "base direction" of the line/paragraph can be set or automatically recognized in the application. (See https://www.w3.org/International/articles/inline-bidi-markup/uba-basics#context.) As far as I can see, neither is possible in Visual Studio Code.

If you have have an entire line or paragraph of RTL, pressing right to go left is simply confusing and counterintuitive.

If you have BiDi text, there is a case to be made for the arrows to move the cursor in opposite directions within a run of opposite-direction text. This means that, like you said, the arrows would move the cursor opposite directions inside RTL text if it is surrounded by LTR text, but also that they would do so inside LTR text if it is surrounded by RTL text. That is how MS Word for Mac handles the situation--it depends on the base direction of the line.

Other programs handle this differently, keeping the cursor movement always directly linked to the left/right of the arrow buttons, regardless of whether it is inside opposite-direction text. E.g. TextEdit for Mac. To me this is more natural and intuitive. The only disadvantage is if you're trying to select part of an RTL text run together with only part of an LTR run in less than a full line. Then you would have what you called

a discontiguous selection at the border between LTR and RTL, but which would visually appear
contiguous.

It seems to me a small price to pay for having intuitive cursor movement. But I would be interested in hearing more opinions from RTLers about this.

For what it's worth, Mellel which is a word processor specifically designed for RTL and BiDi text splits the difference. Cursor movement follow arrow direction unless you're selecting text, in which case it keeps the selection logically but not visually contiguous. (This would go against your principle of having cursor movement and selection working the same way.)

Regardless of how the BiDi issue is resolved, there is in any case a problem with how VSC handles RTL text since no base direction can be set or detected. This means that RTL text will always have cursor movement in the opposite direction of the arrows, regardless how large the block is. E.g., You have an entire line or paragraph consisting of only RTL text. But within that line or paragraph you always have to go left in order to go right, and vice versa? Very confusing. Or you're at the beginning (right side) of an RTL run of text and in order to enter the RTL text you have to press the right arrow button.

[mohataher]

Is there anything I could help with to test and finally get the RTL support merged into the next release, please?

[nathangibson]

Is there anything I could help with to test and finally get the RTL support merged into the next release, please?

@mohataher That would be so great!

There are several open issues for RTL/bidi text editing in VSCode. I'm not a developer, but as far as I can see, achieving good bidi text handling would involve several different features, including:

1. Auto-detection of paragraph direction with corresponding alignment and cursor movement.
2. Correct (?) implementation of the Unicode bidi algorithm for displaying (and selecting) mixed-direction text https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
3. Correct display of brackets/parentheses, etc. ("mirror characters," see unicode bidi algorithm)

It looks like (3) has been assigned to @alexdima and @deepak1556 here microsoft/vscode#78867 and is scheduled for this month's milestone.

Maybe you'd want to reach out and check whether they'd like help with that one or with this related issue from the backlog: microsoft/vscode#83365 ?

Also in the backlog is this issue relating to (1) above: microsoft/vscode#65648.

Otherwise, there are some general issues with recent activity and good discussion about what might be involved in making RTL a less painful experience in VSCode: microsoft/vscode#86667 and microsoft/vscode#11770. I would agree though with the concerns expressed about inserting Unicode control characters -- things could get really unpredictable, especially if the control characters are in source code that has other RTL handling (such as HTML).

So maybe reach out and then see what's doable for you? Really appreciate the support!