Word wrap doesn't work well with control characters

[JayXon]

• VSCode Version: 1.52.0
• OS Version: windows 10

Steps to Reproduce:

1. enable word wrap

"editor.wordWrap": "on"

2. type a long line with control characters in it, for example �

3. observe that horizontal scroll bar shows up

Does this issue occur when all extensions are disabled?: Yes

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Suggestion: render whitespace: show new line characters (#25525)
• Minimap interferes with Word Wrap (#112239)
• Provide word wrap setting for diff editor (#110603)
• Word Wrap doesn't work in compare view (#10572)
• Support word wrap in the diff editor (#11387)

[alexdima]

The default word wrapping algorithm assumes (mostly) that all characters have the same width. You can change that (at the cost of performance) with "editor.wrappingStrategy": "advanced", which will give more accurate wrapping results, but will be slower, especially for large files.

[JayXon]

Thanks for the reply, I wasn't aware of that setting, after changing it to advanced, it did help in some cases, however, I'm still seeing horizontal scroll bar if the entire line is control characters.

[alexdima]

@JayXon Here I have tried with the following settings:

    "editor.wordWrap": "on",
    "editor.wrappingStrategy": "advanced",
    "editor.renderControlCharacters": true

But this is the rendering I get:

Do you perhaps use a custom font family that would render that specific control character better?

[JayXon]

Looks like github automatically replaced the character with the replacement character, when I copy it back it also shows up like that. This character is \x06, you can get it yourself by opening browser console and put '\x06', and copy from the output.

For the font I was using DroidSansMono, but I tried changing back to the default consolas and can still reproduce.

[JayXon]

If I turn off renderControlCharacters and set wrappingStrategy to advanced, then I can no longer reproduce.

    "editor.wrappingStrategy": "advanced",
    "editor.renderControlCharacters": false

But can reproduce if renderControlCharacters is true, or wrappingStrategy is simple, or both.

[alexdima]

Thank you, I could reproduce. The substitution characters for control characters are often wide, so I will adjust the char width computation to assume that these characters are wide.

[github-actions]

This bug has been fixed in to the latest release of VS Code Insiders!

@JayXon, you can help us out by confirming things are working as expected in the latest Insiders release. If things look good, please leave a comment with the text /verified to let us know. If not, please ensure you're on version 1a9dd75 of Insiders (today's or later - you can use Help: About in the command palette to check), and leave a comment letting us know what isn't working as expected.

Happy Coding!

[rzhao271]

Rendering control characters and using the advanced wrapping strategy results in a scrollbar.
Not rendering control characters and using the simple wrapping strategy results in the text wrapping too early.

[aeschli]

@rzhao271 Should the issue be reopened then?

[alexdima]

@rzhao271 This works for me. When using advanced I don't see a scrollbar:

{
    "editor.wordWrap": "on",
    "editor.wrappingStrategy": "advanced",
    "editor.renderControlCharacters": true
// ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
}

[rzhao271]

I think there's a settings sync bug, but one can still see the ACKs don't wrap whereas the substitution character does.

ACKs:

Substitution characters:

[alexdima]

@rzhao271 Thank you, I could reproduce with ACK and "editor.wrappingStrategy": "advanced"