Block character monospace width incorrect

[Ar-Kareem]

Hi,

Apologies if this is not the right place for this issue I noticed.

I have a markdown file with an ascii table on PyPI which I can see is using Source Code Pro,monospace to render my text. The table has many characters including "▒" (U+2592), "┼” (U+253C), “─” (U+2500), and others.

For some reason a multiple of those Unicode character does not has the same width or align with the same number of regular characters. This makes my table look horrible. When I change the font in inspect elements and remove the "Source Code Pro" then it looks fine.

The text is the following (looks good for me in GitHub):

    0   0   0   0   0   0   0   0   0   0   1   1   1   1   1   1   1   1   1   1  
    0   1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9  
  ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
 0│   │▒▒▒│▒▒▒│▒▒▒│   │ 3 │▒▒▒│   │▒▒▒│▒▒▒│▒▒▒│▒▒▒│▒▒▒│▒▒▒│ 3 │   │▒▒▒│▒▒▒│▒▒▒│▒▒▒│
  ├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┤
 1│▒▒▒│▒▒▒│   │▒▒▒│2/3│   │▒▒▒│...│   │3/3│ 7 │▒▒▒│ 7 │▒▒▒│▒▒▒│2/3│▒▒▒│   │   │▒▒▒│
  ├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┤
 2│▒▒▒│2/4│▒▒▒│▒▒▒│   │▒▒▒│   │▒▒▒│▒▒▒│▒▒▒│▒▒▒│▒▒▒│▒▒▒│   │▒▒▒│   │▒▒▒│▒▒▒│2/3│▒▒▒│
  ├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┤

... and so on

And this is what is looks like in my browser when using source-code-pro monospace font (table looks very wrong)

Same thing in chrome (table looks very wrong)

And now it's fixed when I changed the font family manually to just "monospace" (table looks good now)

Sadly I don't have control over which font family is used so I hope that this is a simple issue and it's possible to fix the width of the characters to make them align with the width of the other normal characters.

[Ar-Kareem]

In case it helps, I also have other representations like this diagram which shows many white squares/rectangles some upright and some rotated all inside a 10 x 10 square grid.

┌──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┐
│      │██████│    /█│█\    │██████│      │    /█│█\    │      │██████│
│  0   │██████│  /███│███\  │██████│  1   │  /███│███\  │  2   │██████│
│      │██████│/█████│█████\│██████│      │/█████│█████\│      │██████│
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│██████│    /█│██████│██████│█\    │██████│\█████│█████/│    /█│█\    │
│██████│  /███│██████│██████│███\  │██████│  \███│███/  │  /███│███\  │
│██████│/█████│██████│██████│█████\│██████│    \█│█/    │/█████│█████\│
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│██████│\█████│██████│██████│██████│█\    │██████│      │\█████│█████/│
│██████│  \███│██████│██████│██████│███\  │██████│  2   │  \███│███/  │
│██████│    \█│██████│██████│██████│█████\│██████│      │    \█│█/    │
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│    /█│█\    │\█████│██████│██████│██████│█\    │██████│    /█│█\    │
│  /███│███\  │  \███│██████│██████│██████│███\  │██████│  /███│███\  │
│/█████│█████\│    \█│██████│██████│██████│█████\│██████│/█████│█████\│
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│\█████│█████/│      │\█████│██████│██████│██████│█\    │\█████│█████/│
│  \███│███/  │  4   │  \███│██████│██████│██████│███\  │  \███│███/  │
│    \█│█/    │      │    \█│██████│██████│██████│█████\│    \█│█/    │
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│      │    /█│█\    │      │\█████│██████│██████│█████/│    /█│█\    │
│  .   │  /███│███\  │  3   │  \███│██████│██████│███/  │  /███│███\  │
│      │/█████│█████\│      │    \█│██████│██████│█/    │/█████│█████\│
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│██████│\█████│█████/│██████│██████│\█████│█████/│      │\█████│█████/│
│██████│  \███│███/  │██████│██████│  \███│███/  │  .   │  \███│███/  │
│██████│    \█│█/    │██████│██████│    \█│█/    │      │    \█│█/    │
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│      │    /█│█\    │██████│██████│    /█│█\    │    /█│█\    │      │
│  2   │  /███│███\  │██████│██████│  /███│███\  │  /███│███\  │  2   │
│      │/█████│█████\│██████│██████│/█████│█████\│/█████│█████\│      │
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│    /█│██████│█████/│██████│██████│\█████│█████/│\█████│█████/│██████│
│  /███│██████│███/  │██████│██████│  \███│███/  │  \███│███/  │██████│
│/█████│██████│█/    │██████│██████│    \█│█/    │    \█│█/    │██████│
├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤
│\█████│█████/│██████│      │      │██████│██████│██████│      │██████│
│  \███│███/  │██████│  .   │  0   │██████│██████│██████│  .   │██████│
│    \█│█/    │██████│      │      │██████│██████│██████│      │██████│
└──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘

And even though it looks good here on GitHub, the same version looks very bad on PyPI which I see is using Source Code Pro,monospace

[frankrolf]

What you're seeing is font fallback (unsupported characters displayed in another font). Let me have a look and see which characters are not (yet) supported in SCP.

[kenmcd]

In case it helps, I also have other representations like this diagram which shows many white squares/rectangles some upright and some rotated all inside a 10 x 10 square grid.

Looks fine in LibreOffice.
Exported it to PDF, and the PDF info shows no font substitutions.
Then Exported that PDF to a PNG (below).

[kenmcd]

Appears to be the same with the first block of text.

[frankrolf]

Okay, this is an interesting one. What appears to be happening is that the font fallback affects the space character.
I made an example specifying SCP in a html document – as you can see, everything is lining up nicely here:

However, on the rendered page:

This is due to how HTML works with spaces:
https://stackoverflow.com/questions/433493/why-does-html-require-that-multiple-spaces-show-up-as-a-single-space-in-the-brow

To work around this, you can use pre-formatted text <pre> – here is what I did in my CSS:

pre {
    font-size: inherit;
    font-family: inherit;
    margin: inherit;
}

I suspect that the markdown parser on pypi does not use <pre>.
A possible workaround for you is to use   instead of space.

Why is the space in a code block substituted (evidently) by space from another font? That’s a question for pypi. Everything alright in SCP, as demonstrated with this example here.

(feel free to play around with this – font is embedded)
SourceCodePro-Regular.html.zip

Do you have a link to your pypi project? It would be interesting to investigate this further.

[Ar-Kareem]

Thanks so much for the investigation everyone.

The PyPI link is: https://pypi.org/project/multi-puzzle-solver/

And the same README on Github that looks good is: https://github.com/Ar-Kareem/puzzle_solver

[frankrolf]

Okay, this is how the page looks on my end:

It looks fine, but I got skeptical. The “medium shade” glyph (▒) does not look like it is from SCP:

on pypi

in my local test

I decided to investigate the font file served on pypi.org, and there we have our culprit – the font has been subset, leaving it at just under 300 glyphs (while the original SCP has over 1500 glyphs):

In other words, the box drawing characters will fall back to a different font, depending on what’s available in your font stack.
The only solution for this would be asking pypi to reconsider the drastic subsetting. The chosen subset unfortunately also means that users of writing systems beyond Latin are ignored :/