Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Fil opened this issue Aug 23, 2024 · 2 comments
Closed

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

Fil opened this issue Aug 23, 2024 · 2 comments
Labels
bug Something isn’t working

Comments

@Fil
Copy link
Contributor

Fil commented Aug 23, 2024

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.)

Capture d’écran 2024-08-23 à 11 23 49

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.

@Fil Fil added the bug Something isn’t working label Aug 23, 2024
Fil added a commit that referenced this issue Aug 23, 2024
Fil added a commit that referenced this issue Aug 23, 2024
@Fil Fil mentioned this issue Aug 23, 2024
@mbostock
Copy link
Member

mbostock commented Aug 23, 2024

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 added a commit that referenced this issue Aug 23, 2024
@Fil
Copy link
Contributor Author

Fil commented Aug 23, 2024

e2d7730

@Fil Fil closed this as completed Aug 23, 2024
Fil added a commit that referenced this issue Aug 26, 2024
* brand colors

* apply font choices to the whole page; remove font-weight
note that Inter is the default font in VitePress

* additional tweaks to make it match the changes to Framework docs (#2142)

* prettier

* brand colors

* closes #2146

---------

Co-authored-by: CobusT <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn’t working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants