bug: ASCII diagrams messing up vertical alignment

[heitorPB]

I noticed the Docker page has an ASCII diagram, but it shows all messed up in Chrome and Firefox:

The Markdown file seems to be correct though:

learnxinyminutes-docs/docker.md

Lines 25 to 35 in 449801e

	<pre>
	┌────────────────────────┐ ┌───────────────────────┐
	│ ┌───────────┐ │ │ ┌───────────┐ │
	│ │ App │ │ │ │ App │ │
	│ └───────────┘ │ │ └───────────┘ │
	│ ┌────────┐ ┌────────┐ │ │ ┌────────┐ ┌───────┐ │
	│ │ Libs │ │ Deps │ │ │ │ Libs │ │ Deps │ │
	│ └────────┘ └────────┘ │ │ └────────┘ └───────┘ │
	│ ┌───────────────────┐ │ │ ┌──────────────────┐ │
	│ │ Guest OS │ │ │ │ Guest OS │ │
	│ └───────────────────┘ │ │ └──────────────────┘ │

I tried locally to change the <pre> to triple backticks, but made no difference.

[nbehrnd]

@heitorPB Affirmative observation of the problem you report for Firefox 128.14.0esr (64-bit) as provided in Linux Debian 14/forky:

Everything appears to be "in good condition/as it should" on direct inspection of the Markdown file itself, too.

Could enclosing the problematic section with labeled code fence (i.e., three leading backticks followed by bash, similar to the section "The Docker CLI", or more general sh) preserve the ASCII diagram? I don't know how to probe this in advance of a PR, hence the friendly ping to @ven here.

[ven]

oh hey

[heitorPB]

Could enclosing the problematic section with labeled code fence (i.e., three leading backticks followed by bash, similar to the section "The Docker CLI", or more general sh) preserve the ASCII diagram?

I tried the triple backticks with bash ("```bash") and got the same problem. Specifying the language did not help.

[nbehrnd]

@heitorPB @ven A possible cause I didn't think about yesterday: the font(s) used to render the Markdown files on the website. Referring to Firefox, Edit -> Settings opens the general settings of the web browser. Section Fonts allows to set a user defined selection or (as opt-in) to use the fonts as defined by the web site. Changes here take effect after an OK.

Example on learnxinyminutes:

Example on the landing page of the French national library:

While the repository of learnxinyminutes-docs is about the content, the format of https://learnxinyminutes.com/ is defined somewhere else.

[heitorPB]

The thing is: some other websites with ascii diagrams show them correctly, without having to change my browser settings.

I manually added DejaVu Sans Mono, to the font-family property in the HTML/CSS using the browser inspect console and the Docker diagram showed up nice. I think there's something missing in the website's CSS.

[nbehrnd]

I agree with you, the user shouldn't need to toggle on/off options in the browser used and rarely do. Hence the thought didn't occur to me yesterday. On the other hand, I have no working command on HTML, nor CSS though the separation of content and format/style is not new to me (thanks to markup like LaTeX, export of orgmode/markdown files via pandoc with style files, etc.). The best option I can think of is if one of the maintainers could provide assistance here.