Playground font is non-fixed-width for some unicode characters

[RalfJung]

I am putting the following code into playground:

fn main() {
    println!("0x00 │ ╾─────alloc777+0──────╼ 2a 00 00 00 00 00 00 00 │ ╾──────╼*.......");
    println!("0x10 │ 2a 00 00 00 00 00 00 00                         │ *.......");
}

Both for the code view and the resulting output, the vertical bars on the right are not properly aligned, even though we can see here in GitHub that in a fixed-width font, they should be aligned.

Also, the cursor (at least in Firefox) behaves really weird in that first line; the indicated position and the position where characters are inserted do not agree...

[shepmaster]

Please add a screenshot of the problem, your OS, and your browser version.

If I understand you correctly, it looks OK for me:

• macOS 10.15.3 (19D76)
• Chrome Canary 84.0.4104.0

[shepmaster]

Also, try your code on the Ace kitchen sink example; to see if it might be an Ace-specific issue.

[RalfJung]

Yes that looks like I would expect. This is how it looks for me:

That's with Firefox 75.0 on Debian testing (amd64).

The page inspector tells me that for the program output on the right, the primary font used is "Source Code Pro", but it uses Fira Mono as a fallback font for │, ╾, ─, ╼. Probably the issue then is that these two fonts do not have the same width?

[RalfJung]

On https://ace.c9.io/build/kitchen-sink.html, everything is aligned as expected and there is also no "cursor weirdness".

The page inspector lists the same two fonts used for the editor field there. However, I noticed the font size is given in "px" there and in "em" on the playground. And indeed changing the size to use "px" on playground fixes the alignment.

[shepmaster]

I see the issue on Firefox myself as well.

And indeed changing the size to use "px" on playground

How did you make this change? I modified .editor-advanced to have font-size: 14px (slightly smaller, so I know it was applied), but the lines continue to be misaligned,

[RalfJung]

I went to the "fonts" tab in the inspector, and changed it there.

Interestingly this only helps for the "Execution" output tab, not the editor...

[RalfJung]

Ah, for the editor I also have to change the font size a bit. "14.4px" is broken, but "14px" and "14.5x" px are fine. Wtf...

[shepmaster]

I think the fallback issue is related, but I'm unclear why Chrome and FF differ here. I also can't see why specifying in pixels vs em would make a difference.

The Ace kitchen sink example specifies multiple fonts:

 font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

The playground only tries for Source Code Pro, then falls back to the browser's monospace font. My assumption was that the fallback font would always work (poor assumption, I guess). My Firefox settings say that this should be Courier.

If I change the playground to list the fallbacks, it seems to look correct-er

 font-family:'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;

It looks like I need to have both Monaco and Menlo to provide the glyphs you are using.

[shepmaster]

Can you try just changing the font-family in the playground to see if that also works for you?

[RalfJung]

I also can't see why specifying in pixels vs em would make a difference.

My guess is that it works for some font sizes and not for others, and switching units switched it to a font size that works. Not sure though.

Setting it to 1em also makes it look right.

The playground only tries for Source Code Pro, then falls back to the browser's monospace font. My assumption was that the fallback font would always work (poor assumption, I guess). My Firefox settings say that this should be Courier.

It's Fira Mono for me.

Setting the font to 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace does not seem to make a difference -- I don't think I have any of the others installed.

[shepmaster]

Looking at .ace_content, Firefox does indeed show that Source Code Pro isn't enough for that content:

Haha, I just realized why my Chrome works — I set my default monospace font to Source Code Pro 🤦‍♀

Setting the same in Firefox makes it look correct. Can you confirm the same behavior? I don't understand how that would apply though...

[RalfJung]

I don't have Source Code Pro installed I think, at least I can't find it in Firefox' list. I thought it would come in as a webfont here?

Setting the same in Firefox makes it look correct.

Well that's weird, if the glyphs are missing from that font then why would it help to also use it as fallback... maybe it picked a different substitution font then or so? Maybe the webfont (if any) has fewer glyphs than your local version?

[shepmaster]

I don't have Source Code Pro installed I think, at least I can't find it in Firefox' list. I thought it would come in as a webfont here?

Oooooh. It is a webfont, but: subset=latin-ext. I wonder if my local copy has more glyphs than the webfont. I tried to update the playground to have a broader set, but that didn't seem to magically work.