I found this neat snippet in this answer: $('pre').css('line-height',1)

There, Timwi suggests running it in the browser's console to make ascii art look better. It definitely improves the look of several questions.

For example:

I'm suggesting that maybe we can add that statement to the tag wiki excerpt, so that other people might find it.

  • \$\begingroup\$ I'd rather see it as the site CSS or maybe as a userscript that adds a button. BTW the snippet could be simplified to $("pre").css("line-height", 1) \$\endgroup\$ Commented Feb 7, 2014 at 8:23
  • 2
    \$\begingroup\$ An even better userscript option might be something like $(.post-taglist a[href="/questions/tagged/ascii-art"]).length && $("pre").css("line-height, 1") \$\endgroup\$ Commented Feb 7, 2014 at 10:32
  • \$\begingroup\$ @JanDvorak: Gah, why didn’t I think of that :-D \$\endgroup\$
    – Timwi
    Commented Feb 7, 2014 at 16:49

2 Answers 2


While line-height: 1 does tend to look pretty tight for normal source code, something like:

pre { line-height: 1.1 }


pre { line-height: 1.2 }

ought to strike a pretty good compromise between code and ASCII art readability. Thus, I would support (and, indeed, was just about to post a request for) adding this style to our CSS site-wide.


To evaluate the effects of this proposal, I took a couple of more or less representative screenshots of both ASCII art and code at various line-height settings. All these screenshots are taken using Chrome 32 on Windows 7. The ASCII art examples are from here and here, while the code is from here:

Line-height: 1.4 (current):

enter image description here enter image description here enter image description here

Line-height: 1.2 (proposed):

enter image description here enter image description here enter image description here

Line-height: 1.1 (alt. proposal):

enter image description here enter image description here enter image description here

Line-height: 1.0 (comparison):

enter image description here enter image description here enter image description here

Based on this quick test, it appears that line-height: 1.1 is close to optimal for ASCII art; at line-height: 1 the line-drawing characters in the second example actually start to overlap a bit. Both 1.1 and 1.2 do look reasonably readable for both ASCII art and code, whereas the current line-height: 1.4 looks absolutely awful for ASCII art, yet not much (if at all) better than 1.2 for code.

Besides, keep in mind that the code sample above isn't really all that representative — a large proportion of the code on this site looks more like this:

,;._1'A',' _|\/A()V`,'''{~+/;._1]0,,(6$2)#:-&40]3 u:'8H1(((((H:f[4ZS4ZP2(RPMAMANf[>CZD[F;I[OVFF;TgfS5aGd[7T9JW4[eG[+Of7ddg?d[.AfT]WUASE=S>bSdgI]cS[RWBYSE?gSeG_X(()WG('

With code like that, line-height doesn't really make any difference to its readability (which some might argue to be zero, in any case).

Edit: This fix is now included in the SOUP user script as of v1.14. The line height I went with is 1.15, which seems to offer the optimal compromise between ASCII art and code readability.

  • \$\begingroup\$ Just tested this on Firefox 26 / Kubuntu Linux, too, and the results are pretty much the same. 1.1 seems to be ideal for ASCII art, 1.2 leaves slight gaps but still looks pretty good. I tried line-height: 1.15 too, and it looks pretty good, too: no gaps in ASCII line art, but very slightly more room for code than with 1.1. \$\endgroup\$ Commented Feb 9, 2014 at 23:53
  • 2
    \$\begingroup\$ I would support a change like this. Either of 1.1, 1.15 or 1.2 seems fine to me. \$\endgroup\$
    – FireFly
    Commented Feb 11, 2014 at 14:26

Unfortunately the snippet changes every <pre> tag, which is not always appropriate (it makes genuine source code harder to read, which is why the line-spacing exists in the first place). You can, of course, add javascript: in front and use it as a bookmarklet.

The ideal solution would be to have something like the already existing <!-- language: lang-javascript --> but for ASCII-art. However, I highly doubt that we can get the site developers to add that feature...

However, regarding your suggestion of adding it to the tag wiki excerpt just for informational purposes, sure, we could do that. (I’m currently a bit wary of doing it myself because some users here seem to react negatively to that, so I’ll wait until this thread looks like concensus.)

  • \$\begingroup\$ We could hook the style to lang-none. This should be fairly reliable. \$\endgroup\$ Commented Feb 7, 2014 at 17:32
  • \$\begingroup\$ @JanDvorak: The lang-* thingie doesn’t seem to add a CSS class, so I don’t see how you could distinguish the <pre>s... \$\endgroup\$
    – Timwi
    Commented Feb 7, 2014 at 17:38
  • \$\begingroup\$ A class is added for every language except for lang-none. $('pre:not[class*="lang-"]'). ... \$\endgroup\$ Commented Feb 7, 2014 at 20:00
  • \$\begingroup\$ @JanDvorak, I rarely see it auto-identify languages, and most people don't use the language tags, so I think hooking to lang-none wouldn't have much benefit. \$\endgroup\$ Commented Feb 7, 2014 at 20:47
  • 1
    \$\begingroup\$ @PeterTaylor would lang-none + tag:ascii-art be a sufficient test? \$\endgroup\$ Commented Feb 8, 2014 at 0:20
  • \$\begingroup\$ @JanDvorak, yes, that's a good balance point between the pros and cons of the ideas proposed so far. \$\endgroup\$ Commented Feb 8, 2014 at 9:17
  • \$\begingroup\$ @JanDvorak tag:ascii-art has the drawback of disallowing some cases when it'd be useful, like using box-drawing characters to make tables (or, ideed, Timwi's Funciton answers). What about plain HTML <pre>? Is <pre class="lang-ascii"></pre> accepted by the site's HTML whitelist? \$\endgroup\$
    – FireFly
    Commented Feb 8, 2014 at 20:54
  • 2
    \$\begingroup\$ If you’re going that way, please make it <pre class="ascii-art">, not lang-ascii... \$\endgroup\$
    – Timwi
    Commented Feb 8, 2014 at 20:56
  • \$\begingroup\$ Well, yeah, that makes sense. \$\endgroup\$
    – FireFly
    Commented Feb 8, 2014 at 20:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .