Rendering whitespace influences bidi layout

[saeedhei]

• VSCode Version: 1.45.1
• OS Version: 10 64

I have a json file in my project, emojies is ok in note pad ++ but in vs code is not good UI,
photo:

json:

{
 "invoice_vip":[
    ["🖨️ چاپ فاکتور","🎨 تنظیمات"]
  ]
}

[alexdima]

I think this is not a complaint about the emojis being rendered colourful, but with the bidi text layout, where the second emoji probably belongs to the second JSON string.

[saeedhei]

Yes @alexdima , the output is ok, just in UI, I can't recognize which emoji should I select.

[baharteam]

Hello.
I have also has problem such as dear Saeedhei.
I have a JSON file in my project that vs code is not good UI.

[baharteam]

Please help and check it out.
Thanks

[NotWearingPants]

Looks like a duplicate of #83365. The problem in both are the direction-neutral symbols, they both want direction-neutral to be forced LTR. Although this is only useful for structured text (i.e. json), and not for writing an RTL sentence with punctuation.

[alexdima]

Our new rendering will be:

[hediet]

Selection seems to have issues now:

[alexdima]

Interesting, I think this might be caused by using render whitespace in selection, which influences the rendered line parts.

[alexdima]

To verify, configure "editor.renderWhitespace": "selection" and open a JSON file with the content:

{
  "invoice_vip":[
    ["🖨️ چاپ فاکتور","🎨 تنظیمات"]
  ]
}

Expected: the text doesn't "jump around" when selecting it.

Actual:

Kapture.2022-04-05.at.18.53.47.mp4

To clarify, the fix will avoid rendering whitespace at all inside RTL tokens. This is not ideal, but better than the jumping the rendering of whitespace causes.

[tinyCoder32]

Is this gonna be fixed soon? I still see the issue in 1.67