Lines wrap too early when using sans-serif font

[ZelnickB]

Does this issue occur when all extensions are disabled?

Yes

Version Information

• VS Code Version: 1.86.2, commit 903b1e9d8990623e3d7da1df3d33db3e42d80eda
• OS Version: MacOS Sonoma 14.2.1, Apple Silicon (M2)

Steps to Reproduce

1. Use the following settings.json file in an empty profile:

   "[markdown][markdown-math][asciidoc][restructuredtext][latex][doctex][typst][quarto]": {
       "editor.fontFamily": "Avenir, \"Helvetica Neue\", \"Open Sans\", sans-serif"
   }

   The following variations (in any combination) also reproduce the issue:

   • Adding "editor.fontSize": 14
   • Adding "editor.fontLigatures": true
   • Placing the "editor.fontFamily" setting in the top-level object rather than in a language-specific configuration
   • Using "sans-serif" as the value for editor.fontFamily (rather than specifying specific font names before it)
2. Create a new file, Untitled.md.
3. Fill the file with arbitrary text on a single line. For example, use a paragraph of lorem ipsum placeholder text:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sem felis, venenatis id ullamcorper in, interdum at odio. Fusce et libero semper, tincidunt ipsum ac, auctor diam. Morbi ornare malesuada ipsum eget suscipit. Maecenas ac nisl ac felis vestibulum sodales. Ut et nisi in nunc porttitor auctor eu vel velit. Phasellus magna magna, mollis vitae dignissim et, tempus in nisi. Aenean rhoncus, purus ut pellentesque tempor, tellus magna facilisis augue, ac placerat nisl ante non enim. Aliquam sit amet enim ac metus finibus varius. Vivamus auctor lectus massa, sed imperdiet nisi bibendum ut. In nisi felis, dapibus nec justo et, mollis sagittis nisi.

4. Turn on (soft) word wrap with ⌥ + Z (or Alt + Z), or enable it with "editor.wordWrap": "on" in the settings.json file.

Expected vs. Actual Behavior

The expected behavior is that the lines wrap at the viewport width, as is the defined behavior for the "on" setting for editor.wordWrap. This behavior occurs when a monospace font is used:

The actual behavior when using a sans-serif font is that the lines wrap to a width much smaller than that of the viewport.

In the second image, it is obvious, for example, that several more words should fit onto the top line before it wraps.

This glitch is particularly frustrating when using a vertical split layout, where space is already limited and it occurs in each pane.

Quick Analysis

At a glance, this doesn't appear to be a CSS problem. Each incorrectly wrapped line is contained in a separate .view-line <div> element, which can be seen by using the developer tools.

[Arom1a]

I found the solution in #2654. Add "editor.wrappingStrategy": "advanced" in the settings.json would help, but the rendering speed will be slowed down. So only add this to the specific file formats that uses serif fonts.

[ZelnickB]

Thanks, @Arom1a. This issue does indeed seem to be a duplicate of #2654.