Better tables in examples

[sophiajt]

I noticed some people talking about how tables looked in different browsers on Reddit, and then when I checked nushell.sh I noticed a similar thing. Here's what I see in Firefox+Windows:

I wonder if there's a way to either render this the same across browsers, or if maybe we should just put an image there instead.

[sophiajt]

Even fancier: like the scripts we use to create the examples, maybe there's a way to script creating those images (if we end up using images)

[Aloso]

I guess a monospaced webfont which includes the box-drawing characters would work.

[Aloso]

My favourite monospace fonts are Source Code Pro and Fira Code.

Source Code Pro:

Fira Code:

Source Code Pro:

Fira Code:

I especially like Fira Code because it has fancy ligatures (disabled by default, can be enabled with font-feature-settings).

I'd be happy to make a PR to include a font :)

[sophiajt]

@Aloso - if you include the font, does it work across browsers/platforms?

I assume so, but figured I'd ask just to be sure

[sophiajt]

Either font works for me. I like the fira one in the logo, though having the unbroken table lines with Source Code Pro is also nice

[Aloso]

The line is only that way because I zoomed before taking the screenshot :D It depends on the font size.

I'll pick Source Code Pro, then.

[sophiajt]

@Aloso sounds good

[Aloso]

@jonathandturner I tried this on my phone. To my surprise using one of these fonts doesn't fix the issue. It might be related to the OS' font stack.

Anyway, I found a workaround, which, unfortunately involves some JS and generates a <u> element for each horizontal line character (━, ─).

[sophiajt]

As @sebastian-xyz points out, our recent fix to get the font rendering issue (dark-on-dark rendering) fixed, we had to unfix this issue.

We should explore a better solution here.

[sophiajt]

@sebastian-xyz - one thing we could do is instead of relying on the monospaced font, we could draw the tables either using markdown tables (or maybe html tables?) or rendering them to images and using those

[sophiajt]

Also strange (but hopeful): the github renderer for markdown looks fine in Firefox on Windows, if we don't us the shell mode for code snippets:

Maybe we can switch to using what they're using?

[sophiajt]

Seems like the easiest fix is just to move the table drawing to use the same top and bottom line as the interior line.

The bold line was very subtle to begin with, and I don't think it's really worth keeping if it causes rendering issues across platforms.

[sebastian-xyz]

I started some research on the different markdown processors on the jekyll website and played around with some of the processors. But I didn't have much success until now.

Seems like the easiest fix is just to move the table drawing to use the same top and bottom line as the interior line.

The bold line was very subtle to begin with, and I don't think it's really worth keeping if it causes rendering issues across platforms.

This is how the table looks like with the thin lines

The readbiltity is definitely better. Seems like a good quick fix. We definitely need to find a better way to draw the tables.

[sophiajt]

Yeah, let's just convert to thin lines, then. I've updated a few of the pages just to be sure it will work.

I'll also add a PR to update the actual table drawing to use thin lines too. I figure, we might as well :)

[homburg]

Thin lines still needs some css to render width "monospace width" in chrome on macOS. You can use the default macOS terminal font, with fallback to monospace:

font-family: monospace;

font-family: Menlo, monospace;

[sebastian-xyz]

@homburg - Does this font work across platforms and browsers?

[homburg]

I think Menlo is only installed by default on macOS, but other platforms will fall back to the "monospace" definition.

[sophiajt]

@homburg - our previous fix was something like this, where it should fallback between fonts. Unfortunately, we had to remove the fix because it rendered dark text on dark backgrounds for some versions of Firefox.

[Aloso]

@jonathandturner Which versions are you referring to?

I'm sure this can be fixed, either by adjusting some CSS or by using font-feature-settings.

[sebastian-xyz]

I tested this with font-family: Menlo,Consolas,monospace on windows since Consolas is the default terminal font there. This looked pretty good.

I think the fall back might work this time because the fonts don't need to be added to the source of the website because they are part of the system.

[sebastian-xyz]

This was the example in the discord discussion a few days back:

[Aloso]

I found the discussion on Discord. Here's what I don't understand:

• the web font (which fixes this issue) was disabled to fix another bug
• that bug is neither confirmed, nor can be reproduced
• we don't know what caused that bug
• we don't know if disabling the web font fixed that bug
• we don't know anything about that bug, except that it appeared in Firefox.

@jonathandturner @sebastian-xyz I vote to enable the web font again, until we know more.

[Aloso]

If a web font is not an option, we need to list monospaced fonts that are available on common operating systems and support box drawing characters. This could work, but I haven't tested it:

font-family: Consolas, Menlo, Monaco, Hack, Roboto Mono, Droid Sans Mono, Liberation Mono, monospace;

[sophiajt]

Let's give it a try and see if it fixes the issue for people

[caio]

Hi,

https://github.com/nushell/nushell.github.io/blob/668f69319021745c6ebf28c5b8e2a82485ed8ce2/.vuepress/theme/layouts/Layout.vue#L20

Shouldn't there be at least a 'monospace' entry here so that the browser can fall back to whatever is the default monospace font the user configured?

My browser doesn't load remote fonts and I don't have any of the listed fonts installed, so it picks up a serif font and the tables at https://www.nushell.sh/book/ end up looking more like spaghetti.

[NotTheDr01ds]

Checking to see if this can be closed - monospace was added over 4 years ago, the issue was closed, then reopened (unfortunately without any explanation) -- Has anyone reported related issues in the intervening 4 years?

[fdncred]

i think we can close this now. thanks for finding it.

[Aloso]

@fdncred check, for example: https://www.nushell.sh/book/quick_tour.html on Chrome for Android or Firefox for Android. The issue is still present.

[fdncred]

@Aloso can you point to the PR where it was fixed and reverted?

[NotTheDr01ds]

@Aloso The Android issue is #83 and is still open, and yes, I confirmed that it is still an issue. However, this issue was about other platforms, including Windows, and it has been resolved AFAICT.