ol label misalign due to non-monospace font

[BEWINDOWEB]

Is your feature request related to a problem? Please describe.

default font is non-monospace font

Describe the solution you'd like

support monospace font when using ol, like doubao豆包 AI fixed:

.vp-doc ol {
    list-style: none;
    counter-reset: order-num;
    padding-left: 0;
    margin: 0;
}

.vp-doc ol li {
    counter-increment: order-num;
    padding-left: 1.75em; /* 给序号预留空间 */
    /* 这里不设置font-family，让内容继承页面原始字体 */
}

/* 仅序号伪元素使用等宽字体 */
.vp-doc ol li::before {
    content: counter(order-num) ".";
    width: 1.25em;
    text-align: right;
    position: absolute;
    left: 0;
    /* 只在序号这里用等宽字体 */
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: inherit; /* 继承列表项字号，保持视觉统一 */
}

但是用伪元素这种解决方案也是有问题，比如：

1) 测试机配置

|配置参数|值|
|---|---|
|Vender ID|Genuine Intel|
|CPU Family|6|
|Model|45|
|Model Name|Intel(R) Xeon(R) CPU E5-2620 0 @ 2.00GHz|
|核心数|12|
|内存大小|132137288KB（约126GB）|

2) 测试场景：xxxxx

这种情况，2就会被渲染为1，因为间隔了一个表格，会重新计数。

期待前端大佬有好的解决方法。

Describe alternatives you've considered

No response

Additional context

• The ol label is not aligned #2777
• https://github.com/vuejs/vitepress/issues?q=ol

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Can you tell the browser and font you're using? It appears like this for me in default theme:

Chromium adds some styles like these automatically:

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: auto !important;
}

Similar on firefox:

::marker {
  text-align: end;
  text-align-last: end;
  text-indent: 0;
  text-transform: none;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

Maybe your loaded font doesn't support tnum.

---

这种情况，2就会被渲染为1，因为间隔了一个表格，会重新计数。

You need to indent the table to keep it in same li:

1. 测试机配置

   | 配置参数   | 值                                       |
   | ---------- | ---------------------------------------- |
   | Vender ID  | Genuine Intel                            |
   | CPU Family | 6                                        |
   | Model      | 45                                       |
   | Model Name | Intel(R) Xeon(R) CPU E5-2620 0 @ 2.00GHz |
   | 核心数     | 12                                       |
   | 内存大小   | 132137288KB（约 126GB）                  |

2. 测试场景：xxxxx

PS: *vender -> vendor

[tats-u]

font-variant-numeric: tabular-nums;

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-numeric

This will fix your problem as long as the current font supports the OpenType feature tnum.

[BEWINDOWEB]

@brc-dd it doesn't work. and the chrome has already set.

• system : mac M2 2022 Sonoma 14.0
• browser: chrome 144.0.7559.59 arm64
• article: https://bananaoven.com/articles/236.html#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99

maybe due to chinese characters or something?

[BEWINDOWEB]

@tats-u thanks but not help. like comment before.

[brc-dd]

Looks like our Inter subsetting has removed tnum from the font:

You can temporarily switch to Google Fonts:

import { defineConfig } from 'vitepress'

export default defineConfig({
  useWebFonts: true,
  // ...
})

I'll update the subsets to include pnum and tnum to be in sync with the Google versions.

---

PS: It was working for me in the earlier screenshots because I was checking on StackBlitz and useWebFonts is enabled on WebContainers by default.

I've pushed the fix to main. It'll be there in the next release. Or if you want to check out, you can install the nightly version - https://nightly.akryum.dev/vuejs/vitepress