# Use JuliaMono to fix misaligned benchmarktools histograms

**URL:** <https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054>\
**Category:** Meta Discussion\
**Created:** [July 21, 2021, 5:30pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054 "2021-07-21T17:30:12Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sukera](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@Sukera](https://discourse.julialang.org/u/Sukera)\
**Post date:** [July 21, 2021, 5:30pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/1 "2021-07-21T17:30:13Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/4/9/490029cae4afbd7d7d6b09fae2094f5c0382bfd4.png)

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](https://global.discourse-cdn.com/julialang/original/3X/a/5/a56f3b2da5d752a72c7f38896193932c4f127cc2.png)

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)?

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 21, 2021, 5:50pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/2 "2021-07-21T17:50:57Z")

</div>

Hm, [that post](https://discourse.julialang.org/t/substituting-elements-of-array-is-very-slow/65036/10) looks okay (not great, but ok) for me:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/7/8/78f59bac0569ec7f5c299577887589e07d8a6b77.png)

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:

```css
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.

---

<div class="post-metadata">

**Author:** ![Sukera](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@Sukera](https://discourse.julialang.org/u/Sukera)\
**Post date:** [July 21, 2021, 5:57pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/3 "2021-07-21T17:57:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 21, 2021, 6:00pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/4 "2021-07-21T18:00:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Skoffer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/skoffer/32/378_2.png) [@Skoffer](https://discourse.julialang.org/u/Skoffer)\
**Post date:** [July 21, 2021, 6:02pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/5 "2021-07-21T18:02:57Z")

</div>

> [@mbauman](#):
>
> I still think we should look into adding JuliaMono here.

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

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 21, 2021, 7:43pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/6 "2021-07-21T19:43:25Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/8/7/87370b9a79d23dc53f364f5a2c0c6a75a862282b.png)

But the unicode plot should look better everywhere:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/d/2/d2bb36f4a01e3ea86f13d9c15af56891564408f1.png)

---

<div class="post-metadata">

**Author:** ![Sukera](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@Sukera](https://discourse.julialang.org/u/Sukera)\
**Post date:** [July 21, 2021, 8:12pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/7 "2021-07-21T20:12:32Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 21, 2021, 8:16pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/8 "2021-07-21T20:16:34Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/1/0/1028a7ea5c36eb509faefbbc3ff7735b18f661e6.png)

---

<div class="post-metadata">

**Author:** ![Sukera](https://avatars.discourse-cdn.com/v4/letter/s/ce7236/32.png) [@Sukera](https://discourse.julialang.org/u/Sukera)\
**Post date:** [July 21, 2021, 8:21pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/9 "2021-07-21T20:21:15Z")

</div>

Hm, indeed it does 🤔

> **See here for my view**
>
> ![image](https://global.discourse-cdn.com/julialang/original/3X/e/e/eeae3447b86eb572ca1dc7e63f222971e9726650.png)

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 🙂

---

<div class="post-metadata">

**Author:** ![fredrikekre](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fredrikekre/32/1688_2.png) [@fredrikekre](https://discourse.julialang.org/u/fredrikekre)\
**Post date:** [July 21, 2021, 8:42pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/10 "2021-07-21T20:42:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rsrock](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rsrock/32/115_2.png) [@rsrock](https://discourse.julialang.org/u/rsrock)\
**Post date:** [July 22, 2021, 2:40pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/11 "2021-07-22T14:40:19Z")

</div>

But that’s not quite monospace?

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 22, 2021, 3:27pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/12 "2021-07-22T15:27:05Z")

</div>

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

```julia
12345678901234567890
___4 8___ 2---6———0
function() catch end
φυνχτιον() χατχη ενδ
#2345678901234567890
# __4 8___ 2---6———0
#unction() catch end
#υνχτιον() χατχη ενδ

```

> **image of above**
>
> ![image](https://global.discourse-cdn.com/julialang/original/3X/b/c/bc9de1a09d29ac866da7884f328e3a037d922d46.png)

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 22, 2021, 7:43pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/13 "2021-07-22T19:43:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)\
**Post date:** [July 22, 2021, 9:17pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/14 "2021-07-22T21:17:38Z")

</div>

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.

> **[Say No to Faux Bold](https://alistapart.com/article/say-no-to-faux-bold/)**
>
> Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and it…

---

<div class="post-metadata">

**Author:** ![mbauman](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mbauman/32/31082_2.png) [@mbauman](https://discourse.julialang.org/u/mbauman)\
**Post date:** [July 22, 2021, 10:14pm UTC](https://discourse.julialang.org/t/use-juliamono-to-fix-misaligned-benchmarktools-histograms/65054/15 "2021-07-22T22:14:44Z")

</div>

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.