7

The code below (generated with patorjk.com Text to ASCII Art Generator) gives the expected result (a 'TEST' ASCII art text) on :

  • Windows : Firefox, Chrome, IE

  • Mac : Firefox

But the result is bad (see note below) on :

  • Mac : Chrome, Safari.

What should be used in order that a <pre> with monospace font is properly displayed crossbrowser ?

pre{
 font-family: monospace;
}
<pre>
████████╗███████╗███████╗████████╗
╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
   ██║   █████╗  ███████╗   ██║   
   ██║   ██╔══╝  ╚════██║   ██║   
   ██║   ███████╗███████║   ██║   
   ╚═╝   ╚══════╝╚══════╝   ╚═╝   
</pre>

Note : Here is the bad result :

enter image description here

Basj
  • 41,386
  • 99
  • 383
  • 673
  • What is “bad” here? Text graphics heavily depends on font(s) used, so this appears to be an issue with your design versus the default monospace fonts in the browsers you tested. – Jukka K. Korpela Oct 14 '14 at 18:17
  • @JukkaK.Korpela I added a screenshot of the "bad" result. I'm sure we can find a way of displaying ASCII art, so that the result is the same on every browser, right ? That's the question here : how to display ASCII art cross-browser? – Basj Oct 14 '14 at 18:23
  • Are you loading a specific font from the server, or relying on each client's default monospace font? – colonelsanders Oct 14 '14 at 18:43
  • @colonelsanders I just used `font-family: monospace;` but I don't know : what should I use instead to render crossbrowser things generated on http://patorjk.com/software/taag/#p=display&f=ANSI%20Shadow&t=Type%20Something? (that's my question here) – Basj Oct 14 '14 at 18:45
  • Forcing a font provided by the server (as a font file) would work, assuming the client's font is at fault. It's at least easy to test. http://css-tricks.com/snippets/css/using-font-face/ – colonelsanders Oct 14 '14 at 18:54
  • @colonelsanders do we need such complex things to just render MONOSPACE fonts (monospace fonts come from the early ages of computer) ? – Basj Oct 14 '14 at 18:56
  • Because there are hundreds of different monospace fonts, and if Chrome for Mac OS uses a different monospace than IE9 for Windows, the same block of text will look quite different. Forcing a standard fixes that. – colonelsanders Oct 14 '14 at 19:02

3 Answers3

5

Monospace fonts can be slightly different on different browsers. Try specifying the specific css font, like this:

<style>
pre {

font-family: "Courier New", Courier, monospace;

}
</style>

<pre>
████████╗███████╗███████╗████████╗
╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
   ██║   █████╗  ███████╗   ██║   
   ██║   ██╔══╝  ╚════██║   ██║   
   ██║   ███████╗███████║   ██║   
   ╚═╝   ╚══════╝╚══════╝   ╚═╝   
</pre>
Ian Hazzard
  • 7,661
  • 7
  • 34
  • 60
5

From the screenshot, it is apparent that the character “═” U+2550 is from a different font than the other characters: it is different in shape and does not join with them as it should, and it is considerably wider. This breaks the monospace nature of the presentation and the intended shape.

The reason is that the default monospace font (i.e. the font that the generic name monospace is mapped to) of some browsers does not contain a glyph for “═”, so the browser has to pick it up from some other font (using its internal list of fallback fonts).

The only safe way (or as safe as you can get) is to find a free monospace font that contains the characters you need and use it as a downloadable font, via @font-face. I suppose DejaVu Sans Mono or FreeMono might qualify.

Background info and explanations: Guide to using special characters in HTML.

Why is it so complicated? Well, monospace fonts are an old invention, but many of them have a rather limited character repertoire. Note that “ASCII art” often isn’t (just) ASCII these days; e.g., “═” is not an ASCII character.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
-2

Put each character (!) in a span (instead of pre) and define css width:1em (or 0.5em) and height:1em for this span class.

Natalia
  • 1