Better tables in examples about nushell.github.io HOT 25 OPEN

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

from nushell.github.io.

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.

from nushell.github.io.

Hi,

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.

from nushell.github.io.

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)

from nushell.github.io.

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

from nushell.github.io.

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

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

from nushell.github.io.

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

from nushell.github.io.

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.

from nushell.github.io.

@Aloso sounds good

from nushell.github.io.

@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 (━, ─).

from nushell.github.io.

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.

from nushell.github.io.

@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

from nushell.github.io.

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?

from nushell.github.io.

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.

from nushell.github.io.

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.

from nushell.github.io.

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

from nushell.github.io.

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;

from nushell.github.io.

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

from nushell.github.io.

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

from nushell.github.io.

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

from nushell.github.io.

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

from nushell.github.io.

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

from nushell.github.io.

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.

from nushell.github.io.

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;

from nushell.github.io.

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

from nushell.github.io.