Monospace font "faux" bolding causing alignment issues in some cases

[mostol]

Hi! I was looking into some alignment issues with the docs for the Term.jl, package which uses Documenter.jl. From what I can tell, the source of the problem is that (in some browsers, at least,) when the default JuliaMono typeface is bolded, it uses the browser's "faux"-bolding technique, which can mess up the alignment on what should be a universally-monospace font. See my comment on that issue if you want a more detailed description of what I'm running into.

It looks like Documenter.jl is using a small @font-family ruleset as defined in the JuliaMono repo, but is only using JuliaMono-Regular (see #1569):

Documenter.jl/src/Writers/HTMLWriter.jl

Line 525 in bffc866

const juliamono = "https://cdnjs.cloudflare.com/ajax/libs/juliamono/0.039/juliamono-regular.css"

Would it be a good idea to change this to use the juliamono.css file instead of juliamono-regular.css to ensure all font weights are properly monospaced across browsers/devices?

[cormullion]

Cool detective work! I wish I understood all this stuff better. One thing I don't get - how is Federico managing to get bold and italic monospaced markup into Documenter .md files? I'd quite like bold keywords ... 😃

[fredrikekre]

One thing I don't get - how is Federico managing to get bold and italic monospaced markup into Documenter .md files? I'd quite like bold keywords ...

Probably this is just a result of #1441. I think before that, (but after switching to JuliaMono) this wasn't a problem. See #618 which was closed by using JuliaMono as the default font.

[mostol]

Yeah, it looks like .ansi CSS classes are applied to those code boxes where appropriate, so it just happens automatically it seems—which is really neat!

But on that topic, is there an easy way to apply custom CSS to a Documenter.jl-generated site? Because for this particular issue, it seems like the fixes would either be:

1. Do nothing to Documenter.jl, and create some custom CSS for Term.jl so that it includes the necessary, broader font files.
2. Switch Documenter.jl to use a broader set of JuliaMono, rather than just JuliaMono Regular, which would theoretically fix this corner case for anybody using it.
3. A sudden idea that might not be practical at all, but... @cormullion, you maintain JuliaMono, right? If we wanted to get crazy we could try to make a variable-font version of JuliaMono and use that instead of JuliaMono regular, which could cover multiple font weights without increasing the CSS size too much. A version of option 2, with more razzle-dazzle ✨

I'd be happy to help implement whatever approach seems best; I'd just need some pointers for making option 1 work, because I'm not very familiar with Documenter.jl yet.

[mortenpi]

While Chrome seems to do the faux-bolding correctly on Linux, I can replicate the problem with Firefox. Switching to juliamono.css seems to fix it, and I think that would be the way to go.

Since the switch to JuliaMono predates the ANSI printing, I think that is why this went unnoticed until now. I think the argument to use juliamono-regular at the time was just because there did not seem any need to include the alternative weights.

@mostol, would you like to make the PR updating the URL? While we're at it, we could probably bump the JuliaMono version to 0.044 as well. Finally, it would be good to check on a mac that switching to juliamono.css fixes this on Safari (which I can't do myself).

[cormullion]

try to make a variable-font version of JuliaMono

A nice idea in theory, but the months of work involved make my arm hurt just thinking about it... :)

Switching to juliamono.css

I would have thought you want to use only JuliaMono-Regular, JuliaMono-Bold, JuliaMono-RegularItalic, and JuliaMono-BoldItalic (3Mb), rather than download the whole set ("only" 11Mb)?

Adding custom CSS is easy (well you know what I mean). In Luxor.jl ’s documentation I added an asset to the make.jl file here to enable ligatures in code.

[mortenpi]

I would have thought you want to use only JuliaMono-Regular, JuliaMono-Bold, JuliaMono-RegularItalic, and JuliaMono-BoldItalic (3Mb), rather than download the whole set ("only" 11Mb)?

I am pretty sure you're right in that this would be sufficient to fix the issue, but it would mean maintaining the relevant @font-face .css file here. Much easier to just update one URL 🙂 I don't think browsers load the extra .woff files unless that particular weight is actually used, so I am not sure it would make a practical difference.