Use JuliaMono to fix misaligned benchmarktools histograms

Meta Discussion
1

I’ve recently noticed that the new histograms from BenchmarkTools (very pretty in the console!) are not pretty at all when pasted here on discourse:

image
image1072×870 79 KB

Most notably, the histogram is often misaligned, rows are squished horizontally and there are gaps between each row of text. Compare to what the same output looks like in my terminal:

image
image1063×658 29.8 KB

Colours aside, is there anything we can do to make the benchmark histograms appear aligned on discourse as well or is my browser at fault for skimping on rendering some spaces (or maybe I’m copying things wrong)?

1 Like
2

Hm, that post looks okay (not great, but ok) for me:

image
image710×492 65.8 KB

There still seems to be an extra character on the top line, and the gap between lines isn’t great… but what you’re seeing is almost certainly font-related. Many monospace aren’t truly monospace for unicode if they need to reach for a fallback unicode character or some such.

Our code, pre font stack is currently:

font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;

What’s it look like to ship JuliaMono as a web font? Can we do that? We should do that.

But also with only a dozen or so samples these histograms just aren’t that useful in the first place. I’d just trim their output in cases like this.

3

Apologies, I’ve accidentally screenshotted the wrong benchmark from my terminal! I’ve edited the main post.

4

Aha, well that repeated final character on the second line off the axis looks like a BenchmarkTools bug.

I still think we should look into adding JuliaMono here.

2 Likes
5

And in slack, zulip, stackoverflow… They all have the same issue of broken histograms.

1 Like
6

Try it now (or perhaps in a little bit, after caches clear). I’ve enabled JuliaMono by default for both the light and dark themes. There’s still futzing to be done; I think I want to disable the ligatures. (Edit: done)

Displaying |> -> instead of |‌> -‌> is pretty opinionated and likely to confuse. (Edit: I figured this would age poorly, so here’s what it looked like before) As an image with ligatures:
image

But the unicode plot should look better everywhere:

image
image708×568 57.1 KB

11 Likes
7

Thanks for the quick fix! Would it be possible to use JuliaMono-Medium instead of regular? I personally think the slightly bolder look was easier to read, especially embedded into text as inline code.

# Here are also some pieces of code to compare
@adjoint function ignore(f)
  try Zygote._pullback(__context__, f)
  catch e
    0, ȳ -> nothing
  end
end
8

That looks quite fine to my eyes on my system, but I’m curious to see what it looks like on yours.

My view

image

9

Hm, indeed it does :thinking:

See here for my view

image
image1055×336 32.3 KB

I feel like the text is slightly more pronounced in your screenshot than it is in mine, I may have to fiddle with my browser then? It’s definitely an improvement though, so if you’re otherwise fine with it, I guess I can change my habits :slight_smile:

10

I agree with Sukera that it looks a bit off. It doesn’t in Documenter though so maybe a CSS issue? If I am reading things correctly the default font-size for text is 0.938em but for code it is 1em. If I change one to the other things look much better.

5 Likes
11

But that’s not quite monospace?

1 Like
12

Oh dang, sure enough. Looks like I might need to add an additional font weight and/or an italics face?

12345678901234567890
___4   8___2---6———0
function() catch end
φυνχτιον() χατχη ενδ
#2345678901234567890
#__4   8___2---6———0
#unction() catch end
#υνχτιον() χατχη ενδ
image of above

image

1 Like
13

Actually I’m seeing similar behavior on juliamono.netlify.app — @cormullion do you have any advice on getting the boldface to line up in snippets like the above?

1 Like
14

I’m on my iPhone for a few days, so it’s hard to investigate… But a first guess is that it’s the faux bold problem, where you’re getting an ersatz bolder version of regular, rather than The Real Thing. Will be able to help more once I’m near a larger screen.

5 Likes
15

Ok! Thanks — that was exactly the reference I needed. I’ve added the JuliaMono-Bold woff with the proper weight and family and such. I also tried changing the font-size for code — and now I understand why we had made it bigger! Shrinking it down just made code blocks super tiny and looked odd. But I’ve made it match for inline text.

9 Likes