The line lengths in this code section in the original question are not equal. See below for the corrected version. I'm unsure as to how this may have affected the images in question
| entity | characters |
| --- | --- |
| tab | <see extends> |
| space | • ∙ · ⋅ . |
| nbsp | ␣ _ ~ + |
| precedes | … ◀ ❮ « ‹ ← ⟨ < |
| extends | … ▶ ❯ » › → ⟩ > |
| eol | ↲ ¶ $ ❦ ❧ |
| showbreak | ↪ ↳ ^ |Vim (the only editor that shows it correctly, without misaligning!):
Emacs:
The font is the same: Consolas.
Why does it happen on Windows 7 for me? Do you have the same issue on Windows 10? How can I stop it?
[Update, see comments under Tetsujin's answer] Here is how I see the code example from the top of my question:
(The browser is Chromium-based Edge. The font is Consolas.)
Edit
Line-length corrected version of the code section…
| entity | characters |
| --- | --- |
| tab | <see extends> |
| space | • ∙ · ⋅ . |
| nbsp | ␣ _ ~ + |
| precedes | … ◀ ❮ « ‹ ← ⟨ < |
| extends | … ▶ ❯ » › → ⟩ > |
| eol | ↲ ¶ $ ❦ ❧ |
| showbreak | ↪ ↳ ^ |2 Answers
They're all using different font substitutions for glyphs not contained in Consolas itself [or failing to find substitutions in some cases*] & the subs are not monospace [or not the exact same size monospace].
One way to test would be open the font in an editor & see which glyphs it is missing.
It's harder to tell what is being substituted, unfortunately.
Complete 'cure' would be to use a font that already contains all your required glyphs, so no subs would be necessary.
Deja Vu Sans Mono is always a good (& nicely cross-platform) candidate for being more comprehensive than others
& Wikipedia has a list of mono-spaced fonts at
*Vim, emacs, Sublime & Notepad all failed to substitute all the chars, so ironically Vim "worked the best" because it actually "failed the best".
Incidentally, I'm looking at this on Mac, which is "supposed to be good at this kind of thing"… proving no system is perfect - it screws two lines using Stack Exchange's standard fonts…
Edit
I just noticed the line lengths in the code section at the top of the question were not all equal, mainly 15 chars between pipes but 2 lines at 17 chars… which kind of throws everything out.
Revised line-length-corrected pic of Mac's font substitution using SE's defaults…
Which now renders correctly (Did I mention Mac is supposed to be good at this stuff? ;)
Line-length-corrected image of Deja Vu Sans, Menlo [seems to be SE Mac default] & Consolas [which does not fare well in this comparison.]
Whenever I'm working with content like ASCII art flow charts where alignment is critical, I like to paste the content into something like Word as a sanity check. Pasting the content from your question, pressing Ctrl+A, and changing the font to Consolas resulted in:
Now, place the cursor after a character, and the font selector at the top of the screen will indicate which font is being used for that character. I can now see that the second-to-last dot on the "space" line is using Cambria Math, the first entry in "nbsp" is using MS Gothic, the glyphs rendered as blue boxes are Segoe UI Emoji, etc. Those all indicate characters that weren't available in Consolas. That makes it fairly easy to test various font choices and find one that has all the glyphs you need.
In the above screenshot I've also told Word to display formatting marks for whitespace characters (File > Options > Display). This typically makes it very obvious which characters are a different width than the others. In this particular example the marks blend in with the dots on the "space" line, but it's still enough to see that the dot that's roughly underneath the "x" in "extends" is narrower than the others.
1
