Skip to content

Box drawing characters in comments are tilted, making diagrams look bad #1443

Closed
@lilyball

Description

@lilyball

It looks like the Source Code Pro font used on docs.rs for code contains italicized versions of box drawing characters (including the ASCII Vertical Line character "|"), which is rather surprising since none of the other fonts I've tested on my computer that have these characters show any difference between the regular and italic variants. (EDIT: The browser is probably synthesizing italic by slanting all characters, including box drawing characters, as no italic variant was declared for Source Code Pro) This means ASCII diagrams in comments in the source listings do not look right, or tables, or anything else relying on straight lines. Here's an example taken from https://docs.rs/crate/tokio-util/0.6.7/source/src/codec/framed_impl.rs:

Screenshot of source code showing an ASCII art diagram. The font is Source Code Pro, and all of the characters, including the box drawing characters, are italicized. This means the box drawing characters do not form straight lines.

If I edit the style to be 'monospace' (which on this computer is Menlo) it looks much better:

Screenshot of the same source code as above. The font is Menlo, and only the letters are italicized. The box drawing characters, including the ASCII vertical line character, are not italicized and therefore they form nice straight lines.

This should probably be filed upstream as a bug with your provider for the Source Code Pro font, but in the meantime, if you can't easily get a version of Source Code Pro that doesn't do this, it seems you can hack it by redeclaring an italic version of the font with the unicode-range property.

Proof of concept

Add the following CSS:

@font-face {
    font-family: 'Source Code Pro';
    font-style: italic;
    font-weight: 400;
    src: url("SourceCodePro-Regular.woff") format("woff");
    unicode-range: U+25??, U+7C;
}

You may want to add a font-weight: 600 variant as well just in case. I'm also not sure if this covers all the unicode characters necessary, but it does cover the ones in this diagram. This produces the following result on Safari 14 (also tested on Firefox 89):

Screenshot of the same source code as above. The font is Source Code Pro, but the vertical line and box drawing characters are straight instead of italic, and therefore they form nice straight lines.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions