Increase legibility by adding margin only at the bottom of a group of wrapped lines, instead of generally increasing line-height

[boettges]

Hello,

currently the only option to influence line spacing is editor.lineHeight, which increases the height of every line displayed in the editor. It does not differentiate between actual lines or such that resulted from wrapping text.

I propose to have an additional editor setting (for example editor.lineMarginBottom) to add margin (in px) at the bottom of a group of lines of wrapped text, as well as single non-wrapped lines. This allows to visually group wrapped lines and increase legibility.

VS Code default: Screenshot of the default setting ("editor.lineHeight": 0):

Proposed MarginBottom: Mockup of "editor.lineMarginBottom": 22 with default line-height:

Note how there is no added space between the <h5>… and the ipsum</h5> in line 34, due to the line wrap. However, there is an added margin at the bottom of line 35, because of the longer lorem ipsum text being placed on a new line (36).

LineHeight increase: Screenshot of ("editor.fontSize": 16, "editor.lineHeight": 38):

Since the default can feel a bit cramped, a lot of users seem to increase the line-height.
In comparison to the margin-bottom proposal mockup this feels visually noisy and it becomes harder to identify groups of wrapped lines, which belong together.

The proposed setting creates a middle ground between the two showcased examples. It could be used twofold: Together with or instead of an increased line-height.

=====

Foreseen difficulty:
VS Code does not seem to group wrapped lines in the DOM. I am not sure if such grouping could be added to apply the margin to the parent div of the wrapped lines.

=====

Added setting to treat manual line breaks within tags like wrapped lines
I am again not sure about the feasibility, but It would be visually helpful if manual line-breaks within tags could be treated similarly to the line wrapped text lines described above. By that the margin would only be applied after the tag is closed and ignored for the lines within the tag. This increases the legibility of cohesive attributes. The setting could be called "editor.lineMarginBottomWithinTags": false.

Especially when writing accessible HTML5, using modern JavaScript frameworks or utility class-based CSS frameworks the number of attributes is ever-increasing and manual line breaks are used as a means to provide structure.

VS Code default:

Proposed MarginBottom: Mockup of "editor.lineMarginBottom": 22, "editor.lineMarginBottomWithinTags": false that

LineHeight increase:

This example shows how the cohesiveness is visually lost due to the added space.

I tried to keep the examples minimal. Just imagine this additional visual structure being applied to a cluttered accessible and styled web app navigation in Vue or React with key presses, click events etc.

Thanks a lot in advance.