Badgen.net: Weird indentation

[bokub]

When viewing badgen on my linux machine with chromium, the _Usage_ indentation is broken.

Version 63.0.3239.84 Built on Ubuntu , running on Ubuntu 17.04 (64 bits)

[styfle]

Try adding CSS for

pre {
    font-family: monospace;
}

code {
    font-family: monospace;
}

See if one of those works 🤷‍♂️

[bokub]

Nope :confused:

[amio]

What's the rendered font?

[bokub]

_Bitstream Vera Sans Mono_ I guess

[tunnckoCore]

I am on linux machine with Chromium too, but don't have problems.
It's definitely the font you are using in your machine.

I'm using Liberation for all cases and the Monospace for monospace ;d

[amio]

@bokub Seems the "Bitstream Vera Sans Mono" (your default monospace font) don't have glyphs for ┬─│└ so these chars are fallback to "Liberation Serif", which is not a fixed width font.

We could choose a better default font for linux, maybe courier or something.

[amio]

Courier font doesn't has those glyphs too, Monaco has, but it's not builtin font across linux dists. 🤨

[amio]

@bokub Made a possible fix, see if it's OK? https://badgen-canary.now.sh/

[amio]

As @olstenlarck mentioned in screenshots, set Chrome's default monospace font to "Liberation Mono" could fix this too.

[bokub]

This is worse 😕

[amio]

While let's revert that... would you have a try with Chrome's font settings?

PS, I'm working on an interactive badge builder, which should replace the static homepage eventually, I think we won't bother this problem then.

[bokub]

OK I tried Dejavu mono and Monaco and both give a result similar to my last screenshot

[bokub]

About your badge builder, you can check out mine for some inspiration 😉

[amio]

Super awesome!

[bokub]

Wow, now that 'courier' is in the font-family list, the special characters have disappeared...

[amio]

😂 Reverted

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.