microsoft / microsoft/vscode

Markdown editor: source-visible ordered-list markers shift with proportional digit widths

Open
#330,530 0 comments 0 reactions 1 assignee Claimed by @hediet View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

## Description

In the Markdown editor, source-visible ordered-list markers with different digit widths do not share a left edge. In a nested list such as `- Bullet` followed by ` 1. Ordered` and ` 2. Ordered two`, both the number and the source-indentation dots shift horizontally between the two sibling items.

This is independent of the recently investigated vertical marker-centering behavior: the horizontal geometry reproduces on the pre-fix CSS.

## Reproduction steps

1. Open a Markdown document in the Markdown editor.
2. Enter the following source:

```md
- Bullet
1. Ordered
2. Ordered two
```

3. Enable source markers / edit mode so the source list markers and indentation are visible.
4. Compare the two nested ordered-list rows.

## Expected behavior

Sibling ordered-list source markers with the same digit count should occupy the same horizontal slot. Their equivalent source-indentation dots should also align.

## Actual behavior

`1.` and `2.` are right-aligned, but their left edges differ by 2.09px. The complete nested gutter moves with the marker, including the dots representing the two identical leading source spaces.

Live DOM measurements in the default macOS font stack:

| Marker | Gutter left | Marker left | Marker right | Marker width |
| --- | ---: | ---: | ---: | ---: |
| `1. ` | 63.20px | 91.20px | 105.00px | 13.80px |
| `2. ` | 61.11px | 89.11px | 105.00px | 15.89px |

The `.` and trailing source space have identical positions for both rows (`97.20px` and `101.20px`, respectively). Only the digit width differs. The same behavior occurs for root ordered lists and for `9.` / `10.` / `11.`.

## Confirmed root cause

The ordered marker is rendered with proportional figures (`font-variant-numeric: normal`) in the system font: `1` advances 6.01px while `2` advances 8.09px. The marker gutter is shrink-to-fit and right-pinned:

```css
.md-list-gutter {
position: absolute;
right: 100%;
display: flex;
}
.md-list-gutter > .md-marker-listItemMarker {
flex: 0 0 auto;
}
```

As a result, a wider digit grows the gutter leftward. Relevant package CSS: `vscode-team-tools/packages/markdown-editor/src/view/editor.css` (`.md-list-gutter` and its marker child).

## Possible direction

Applying `font-variant-numeric: tabular-nums` to ordered source markers makes `1.` and `2.` equal-width (16.46px in this environment) and aligns both gutters exactly. This needs a deliberate UX/layout decision: the wider tabular `1` moves the gutter about 2.1px left, so the implementation should preserve the intended relationship between nested gutters and the root bullet column.

Any fix should add a regression assertion comparing horizontal positions across sibling ordered markers; the current Component Explorer alignment fixtures catch vertical drift but intentionally do not compare sibling marker left edges.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.