Seeing issues with tables not aligning properly in some browsers #83
Comments
ayax79
pushed a commit
to ayax79/nushell.github.io
that referenced
this issue
Jun 26, 2024
Added webscraping example
|
Retested on Android 14 Chrome - Still broken. |
Closed
2 tasks
|
With PR #1890 merged, I wanted to test it and got a bit confused. PR is merged, I see CI action with deploy, but |
Kissaki
added a commit
to Kissaki/nushell.github.io
that referenced
this issue
May 1, 2025
Code blocks use a different variable, which this commit adds.
On the current Nushell website, for example [Quick Tour][quicktour] page,
we can see that the font-family being applied is in the generated style-*.css,
with declaration `code { font-family(--code-font-family); }`,
which does not match our supposed override which defines a var
under a different name `--font-family-code`.
This var name has been used since the introduction of the override in 83ced1d.
Maybe vuepress changed the variable at some point?
This is a follow-up to 2ec6143 (PR nushell#1890, PR nushell#1906),
which attempts to solve Android monospace due to missing font coverage (nushell#83).
Instead of replacing `--font-family-code`, `--code-font-family` is added as an additional value-identical declaration just in case the other variable is being used somewhere still.
[quicktour]: https://www.nushell.sh/book/quick_tour.html#nushell-commands-output-data
fdncred
pushed a commit
that referenced
this issue
May 1, 2025
Code blocks use a different variable, which this commit adds.
On the current Nushell website, for example [Quick Tour][quicktour] page,
we can see that the font-family being applied is in the generated style-*.css,
with declaration `code { font-family(--code-font-family); }`,
which does not match our supposed override which defines a var
under a different name `--font-family-code`.
This var name has been used since the introduction of the override in 83ced1d.
Maybe vuepress changed the variable at some point?
This is a follow-up to 2ec6143 (PR #1890, PR #1906),
which attempts to solve Android monospace due to missing font coverage (#83).
Instead of replacing `--font-family-code`, `--code-font-family` is added as an additional value-identical declaration just in case the other variable is being used somewhere still.
[quicktour]: https://www.nushell.sh/book/quick_tour.html#nushell-commands-output-data
|
This is now resolved. Looks fine on my Android phone now, which did show the issue of misaligned table. 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's a picture from one screenshot:
Asking around on twitter, I was told:
"Ok so I assumed this was ligatures from ---- not the actual characters for those lines. The misalignment on Android comes from the droid sans mono font not having those characters, causing it to fall back to noto sans symbols, which has different widths.
Which means
font-variant-ligatures: nonewill have no effect, but using a web font to force it to use one of the other fonts in your list before it falls back to monospace will fix this for you"So it sounds like we need to set better fallback fonts so that Android (and other browsers with the same issue) don't fallback to the wrong font.
cc @ibraheemdev
The text was updated successfully, but these errors were encountered: