Use JuliaMono to fix misaligned benchmarktools histograms

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:

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:

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

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

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.

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

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

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

1 Like

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:

11 Likes

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

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

Hm, indeed it does :thinking:

See here for my view

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:

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

But that’s not quite monospace?

1 Like

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

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

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

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