Plot example in rendered README.md not aligned under Firefox

[meliache]

When I check the README.md in firefox, I see the following:
. Looks good under chromion. It's perfectly aligned when I check the raw readme from firefox of when I copy the contents to an editor.

Not sure if this is really an issue with uproot-browser, because this plot is done by plotext it might be a plotext issue or it might be an issue of github not using strictly fixed-width fonts for rendering bash blocks. But I'm reporting here anyway because at least it seems an issue with the uproot-browser readme, no matter where the cause lies.

I use Firefox 98.0.1 under ArchLinux with the 5.16.14 Kernel under Wayland (sway) and could reproduce the issue in Firefox safe mode (no addons). The font of the code-block is according to the "Fontanello"-addon ui-monospace. Not sure what else I can report but I thought better report this in case you are not aware

[henryiii]

Yes, we've seen this on some browsers, thought not that extreme yet. It should be fine in a terminal (and I like highlighting that the plot really is just plain text by using it instead of an image), but that is pretty bad. An image wouldn't match light/dark mode either (though plotext actually always plots in white at the moment). We could also go with a warning that browsers might muddle the width?

[meliache]

I agree with it being plain-text being useful, e.g. I liked just copy-pasting the example to share it in a code-block on slack to showcase uproot-browser to colleagues.

I confirmed this issue only appears for certain fonts. If I go to the firefox settings and disallow websites to use their own fonts the issue disappears and the alignment works again. Also, I checked the CSS-inspector for pre-formatted text and it has the settings

pre {
	margin-top: 0;
	margin-bottom: 0;
	font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
	font-size: 12px;
}

If I set font-family to just monospace, the alignment also works. But I don't really understand what the issue is with ui-monospace 🤷‍♂️

[amangoel185]

Could there be a potential workaround to this? Keeping plain-text as well as the formatting intact.