Misaligned plots when plotting with UnicodePlots.jl using BrailleCanvas

[tmthyln]

Certain plot types from [UnicodePlots.jl] do not plot correctly in Pluto (either using with_terminal() or not), as the characters are unaligned on the right side. This was originally discovered in this Slack thread. We can see the issue just using the examples from the README:

using UnicodePlots
plt = lineplot([-1, 2, 3, 7], [-1, 2, 9, 4], title = "Example Plot", name = "my line", xlabel = "x", ylabel = "y")

versus from the REPL:

In total, it looks like the following plot types are problematic:

• lineplot
• scatterplot
• stairs
• spy

(heatmap also doesn't work, but for a different reason relating to color display and not alignment.)

Testing Configuration Details

Tested using Pluto v0.12.18 and UnicodePlots v1.3.0 on Chrome. It turns out Firefox has a similar issue but has a different vertical spacing:

This looks to only a problem with the BrailleCanvas and a few spot-checked plots look fine using any of the other canvases.

More Examples

For convenience, here's a Pluto notebook that has the UnicodePlots.jl examples together.

Cause

It looks like for whatever reason the Braille dot-0 (blank) character is being displayed as slightly wider than all the other characters in the browser, misaligning plots that use the BrailleCanvas.

[tmthyln]

I have no solution yet¹, but I willing to take this on (although I'm currently a bit busy, so it may be a bit of time before I can tackle this).

¹ There's the solution of just replacing all dot-0 characters with normal spaces, but I don't know if that would work for all plots without too many special cases, and would probably be more of a PR to UnicodePlots.jl to add a new show method for a new mimetype.

[pankgeorg]

The latest version of JuliaMono fixes the issue.

107b0c6
Next release will have it!

[cormullion]

I'm puzzled by this... 😂 I don't remember anything changing in this particular area of the font, and recent tests I did of UnicodePlots hadn't fixed this issue for me personally. I thought it was because the browser didn't render the Braille characters in the same way as the terminals do. But I'm happy if the issue has somehow fixed itself... 😀

Edit - I just realized I've probably been picking up the bundled version of the font rather than the current master which is about 1cm away on the same disk. 😂

[expikr]

Issue still persists for raw character output.

Raw output:

           ┌────────────────────────────────────────┐       
         1 │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠚⠉⡏⠓⡄⠀⠀⡠⠚⠉⠉⠲⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀│ sin(x)
           │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡰⠁⠀⠀⡇⠀⠈⢆⡜⠁⠀⠀⠀⠀⠙⢄⠀⠀⠀⠀⠀⠀⠀⠀│ cos(x)
           │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠁⠀⠀⠀⡇⠀⠀⡸⡆⠀⠀⠀⠀⠀⠀⠈⡆⠀⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠃⠀⠀⠀⠀⡇⠀⢰⠁⠘⡄⠀⠀⠀⠀⠀⠀⠘⡄⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠏⠀⠀⠀⠀⠀⡇⢀⠇⠀⠀⠱⡀⠀⠀⠀⠀⠀⠀⢱⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜⠀⠀⠀⠀⠀⠀⡇⡎⠀⠀⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⢇⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⠁⠀⠀⠀⠀⠀⠀⡿⠀⠀⠀⠀⠀⠈⡆⠀⠀⠀⠀⠀⠀⠘⡄⠀⠀⠀⠀│
   f(x)    │⠤⠤⠤⠤⣤⠤⠤⠤⠤⠤⠤⢤⠧⠤⠤⠤⠤⠤⠤⢤⡧⠤⠤⠤⠤⠤⠤⠼⡤⠤⠤⠤⠤⠤⠤⠵⠤⠤⠤⠤│
           │⠀⠀⠀⠀⠸⡄⠀⠀⠀⠀⠀⡜⠀⠀⠀⠀⠀⠀⠀⡎⡇⠀⠀⠀⠀⠀⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⢱⠀⠀⠀⠀⣰⠁⠀⠀⠀⠀⠀⠀⡸⠀⡇⠀⠀⠀⠀⠀⠀⠀⠈⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⢇⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⢠⠃⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⠘⡄⢀⡞⠀⠀⠀⠀⠀⠀⢀⠎⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⢱⠀⠀⠀⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⠀⠸⡜⠀⠀⠀⠀⠀⠀⠀⡜⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀│
           │⠀⠀⠀⠀⠀⠀⢀⡜⠑⣄⠀⠀⠀⠀⢀⡜⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢣⡀⠀⠀⠀⠀⠀⠀│
        -1 │⠀⠀⠀⠀⣀⡠⠎⠀⠀⠈⠦⣀⣀⡤⠊⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠱⢄⡀⠀⠀⠀⠀│
           └────────────────────────────────────────┘
           ⠀-4⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀4⠀
           ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀x⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

VSCode: