Repository: microsoft/vscode (TypeScript)
Date: 2022-04-05 12:55:58+00:00
Task type: Bug Fix

Issue:
problem in html right to left around whitespace
in version 1.65 every things is ok. but in version 1.66 codes has been messed up.

version 1.65: OK
![ok](https://user-images.githubusercontent.com/27133795/160919149-a4250034-b14c-406c-8720-da399b5d776e.png)

version 1.66: bad
![bad](https://user-images.githubusercontent.com/27133795/160919143-67d5b693-c397-4b97-b1ec-d263b427aa08.png)




Issue discussion:
@hmbmirzaei Could you please provide the code also as text so I could copy-paste it?
original text:


```html
<b>
	9- هزینه کاهش ارزش دریافتنی‌ها
</b>
<p>
	در سال مورد گزارش مبلغ ................................. میلیون ریال از مطالبات در نتیجه ورشکستگی یکی از مشتریان عمده،
	مشکوک الوصول شده و کاهش ارزش برای آنها در نظر گرفته شده است.
</p>
```

-------------------
in version 1.65 displays correct:


--------------------

![1_65](https://user-images.githubusercontent.com/27133795/161199238-62b8cd8b-c4a2-4d9a-815f-0aa7e593cbf1.png)

--------------------


but in version 1.66:

![1_66](https://user-images.githubusercontent.com/27133795/161199160-e6889c7b-fdb6-4f09-a5cb-b6c2aba6ec76.png)


I'd also like to add two gifs related to this bug when selecting text even in a simple text file. Here is vscode version 1.65.2:
![ok](https://user-images.githubusercontent.com/11520090/161215213-bc0c9405-84e2-4163-af2c-c02f30d1ff66.gif)
Now here is version 1.66.0:
![bad](https://user-images.githubusercontent.com/11520090/161215267-52418cfb-f783-4ce0-b160-0c9c932e619f.gif)
Text in gifts:
این یک تست است
Same here. Since the last update, RTL texts are all broken! In the following screenshot, there's a tab character *before* the "سلام", but it's incorrectly aligned.

![image](https://user-images.githubusercontent.com/26527405/161387980-eef469ad-30e7-49d7-96d2-b19135bb6f25.png)

The old behavior was the correct one. Please revert this back.
Why did you guys mess this up?! RTL texsts are all broken...

The following GIF clearly illustrates the problem:

![Untitled Project](https://user-images.githubusercontent.com/96596709/161388526-2796f13c-4d09-4aeb-a204-97a1a6153634.gif)

You can see the cursor along with the text jumping to the beginning of the line even though there's a tab. This shouldn't happen. Give us the previous behavior back pls.
@alexdima Can you please take a look at this again? I think the [needs more info](https://github.com/microsoft/vscode/labels/needs%20more%20info) label is no longer necessary.

Thank you for the extra information. Let's track in https://github.com/microsoft/vscode/issues/99589 . This is a problem that is caused by the way whitespace is rendered (inline with the actual text) and is triggered when using `editor.renderWhitespace` : `all` or `selection`. The workaround is to configure `editor.renderWhitespace` : `boundary`, `trailing` or `none`.
@alexdima I'm not sure this is a duplicate of #99589, since this problem was born very recently, prior to the last update everything was working as expected, with the default settings.
And even setting `editor.renderWhitespace` to ‍`boundary‍‍‍‍‍‍‍`, `trailing` or `none` doesn't seem to solve the problem.

![image](https://user-images.githubusercontent.com/26527405/161550049-c019b29a-f961-4df3-84ba-ee3109004669.png)
![image](https://user-images.githubusercontent.com/26527405/161552454-578ec274-0a20-4134-a48c-d85c871740a4.png)


Please don't close issues like this prematurely. This is a very new bug, the issue you linked to was created in 2020. Could you please reconsider this?
> The workaround is to configure editor.renderWhitespace : boundary, trailing or none.

Nope, doesn't work.
@alexdima Hi, you've linked an issue (#99589) that was posted 2 years ago, the problem we're talking about here appeared only a few days ago.
There must've been some change **very recently** that broke this. Please reopen this issue. Thank you.

Solution patch:
diff --git a/src/vs/editor/common/viewLayout/viewLineRenderer.ts b/src/vs/editor/common/viewLayout/viewLineRenderer.ts
--- a/src/vs/editor/common/viewLayout/viewLineRenderer.ts
+++ b/src/vs/editor/common/viewLayout/viewLineRenderer.ts
@@ -959,7 +959,7 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render
 
 		sb.appendASCIIString('<span ');
 		if (partContainsRTL) {
-			sb.appendASCIIString('dir="auto" ');
+			sb.appendASCIIString('style="unicode-bidi:isolate" ');
 		}
 		sb.appendASCIIString('class="');
 		sb.appendASCIIString(partRendersWhitespaceWithWidth ? 'mtkz' : partType);


Test patch:
diff --git a/src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts b/src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts
--- a/src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts
+++ b/src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts
@@ -465,8 +465,8 @@ suite('viewLineRenderer.renderLine', () => {
 
 		const expectedOutput = [
 			'<span class="mtk6">var</span>',
-			'<span dir="auto" class="mtk1">\u00a0קודמות\u00a0=\u00a0</span>',
-			'<span dir="auto" class="mtk20">"מיותר\u00a0קודמות\u00a0צ\'ט\u00a0של,\u00a0אם\u00a0לשון\u00a0העברית\u00a0שינויים\u00a0ויש,\u00a0אם"</span>',
+			'<span style="unicode-bidi:isolate" class="mtk1">\u00a0קודמות\u00a0=\u00a0</span>',
+			'<span style="unicode-bidi:isolate" class="mtk20">"מיותר\u00a0קודמות\u00a0צ\'ט\u00a0של,\u00a0אם\u00a0לשון\u00a0העברית\u00a0שינויים\u00a0ויש,\u00a0אם"</span>',
 			'<span class="mtk1">;</span>'
 		].join('');
 
@@ -519,9 +519,9 @@ suite('viewLineRenderer.renderLine', () => {
 			'<span class="mtk4">\u00a0</span>',
 			'<span class="mtk5">value</span>',
 			'<span class="mtk4">=</span>',
-			'<span dir="auto" class="mtk6">"العربية"</span>',
+			'<span style="unicode-bidi:isolate" class="mtk6">"العربية"</span>',
 			'<span class="mtk2">&gt;</span>',
-			'<span dir="auto" class="mtk4">العربية</span>',
+			'<span style="unicode-bidi:isolate" class="mtk4">العربية</span>',
 			'<span class="mtk2">&lt;/</span>',
 			'<span class="mtk3">option</span>',
 			'<span class="mtk2">&gt;</span>',
@@ -738,7 +738,7 @@ suite('viewLineRenderer.renderLine', () => {
 		const lineText = 'את גרמנית בהתייחסות שמו, שנתי המשפט אל חפש, אם כתב אחרים ולחבר. של התוכן אודות בויקיפדיה כלל, של עזרה כימיה היא. על עמוד יוצרים מיתולוגיה סדר, אם שכל שתפו לעברית שינויים, אם שאלות אנגלית עזה. שמות בקלות מה סדר.';
 		const lineParts = createViewLineTokens([createPart(lineText.length, 1)]);
 		const expectedOutput = [
-			'<span dir="auto" class="mtk1">את\u00a0גרמנית\u00a0בהתייחסות\u00a0שמו,\u00a0שנתי\u00a0המשפט\u00a0אל\u00a0חפש,\u00a0אם\u00a0כתב\u00a0אחרים\u00a0ולחבר.\u00a0של\u00a0התוכן\u00a0אודות\u00a0בויקיפדיה\u00a0כלל,\u00a0של\u00a0עזרה\u00a0כימיה\u00a0היא.\u00a0על\u00a0עמוד\u00a0יוצרים\u00a0מיתולוגיה\u00a0סדר,\u00a0אם\u00a0שכל\u00a0שתפו\u00a0לעברית\u00a0שינויים,\u00a0אם\u00a0שאלות\u00a0אנגלית\u00a0עזה.\u00a0שמות\u00a0בקלות\u00a0מה\u00a0סדר.</span>'
+			'<span style="unicode-bidi:isolate" class="mtk1">את\u00a0גרמנית\u00a0בהתייחסות\u00a0שמו,\u00a0שנתי\u00a0המשפט\u00a0אל\u00a0חפש,\u00a0אם\u00a0כתב\u00a0אחרים\u00a0ולחבר.\u00a0של\u00a0התוכן\u00a0אודות\u00a0בויקיפדיה\u00a0כלל,\u00a0של\u00a0עזרה\u00a0כימיה\u00a0היא.\u00a0על\u00a0עמוד\u00a0יוצרים\u00a0מיתולוגיה\u00a0סדר,\u00a0אם\u00a0שכל\u00a0שתפו\u00a0לעברית\u00a0שינויים,\u00a0אם\u00a0שאלות\u00a0אנגלית\u00a0עזה.\u00a0שמות\u00a0בקלות\u00a0מה\u00a0סדר.</span>'
 		];
 		const actual = renderViewLine(new RenderLineInput(
 			false,