vertical︎↕︎ is displayed with the emoji font-variant

[Fil]

In #2141 I see an issue with Inter, the new font, which displays horizontal↔︎ as text and vertical︎↕︎ as emoji. (I don't know why it doesn't happen in main.)

This should be solved in the far future when browsers support font-variant-emoji, but in the meantime we need to fix it somehow. I tried the variation selector U+FE0E, but it's filtered out for some reason, whether I write as ︎ or ︎. I think I'll just do a span::after.

[mbostock]

The reason it only happens in the design-tweaks branch is the difference in the font stack. In design-tweaks it is the VitePress default:

'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

In main it is:

Inter, var(--vp-font-family-base)

Which expands to:

Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif

In other words, the VitePress default will bias towards choosing color emoji variants, whereas our font stack in main does not. I have one idea I want to try.

[Fil]

e2d7730