ASCII art in HTML

Question

What could I do to make it print like it looks in the HTML document in the web browser?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        ###### #    #   ##   #    # #####  #      ######
        #       #  #   #  #  ##  ## #    # #      #      
        #####    ##   #    # # ## # #    # #      ##### 
        #        ##   ###### #    # #####  #      #      
        #       #  #  #    # #    # #      #      #      
        ###### #    # #    # #    # #      ###### ######
    </body>
</html>

Gives:

# # ## # # ##### # ###### # # # # # ## ## # # # # ##### ## # # # ## # # # # > ##### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######

http://stackoverflow.com/questions/9492249/render-a-string-in-html-and-preserve-spaces-and-newlines — Ciro Santilli OurBigBook.com, Jun 15 '15 at 14:01

score 107 · Accepted Answer · edited Apr 05 '16 at 08:39

107

Use the <pre> tag! Put it before and after your EXAMPLE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        <pre>
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
        </pre>
    </body>
</html>

edited Apr 05 '16 at 08:39

Kaspar Lee

5,446
4
31
54

answered Nov 09 '09 at 17:38

John Fiala

4,561
3
30
26

Although technically you'd probably want
```
# ... #
```
(without a newline) or to use comments () to eliminate white space you likely do not want.
– Jan Kyu Peblik Feb 10 '18 at 03:47
2

This doesn't seem to be working for art that includes escaping characters (i.e. newline `'\'`). See the kittens found here: https://user.xmission.com/~emailbox/ascii_cats.htm - any way to compensate? – HappyHands31 Sep 23 '19 at 19:44
You will need to escape newlines with '\'. For example do '\\' for a single slash ('\') in art. – thisisjaymehta Jun 22 '20 at 05:11

score 16 · Answer 2 · answered Jun 19 '17 at 07:38

HTML is designed to collapse white space by default. In order words, all series of white spaces characters (spaces, tabs, line feeds...) are replaced by a single space on rendering. You can control this behaviour with the white-space CSS property:

The white-space CSS property is used to to describe how whitespace inside the element is handled.

Values

normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.

pre Sequences of whitespace are preserved, lines are only broken at newline characters in the source.

nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

pre-wrap Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and as necessary to fill line boxes.

pre-line Sequences of whitespace are collapsed. Lines are broken at newlines in the source and as necessary to fill line boxes.

In the case ASCII art you also want to enforce a fixed-width font-family.

.ascii-art {
    font-family: monospace;
    white-space: pre;
}

<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>

Although I'm happy for all the rep my answer has created, Alvaro's answer is possibly even more correct, as these days the way to do it is to define a class like they have. — John Fiala, Jan 10 '18 at 17:57
@JohnFiala Still, it can be argued that `
` is more semantic than `
`. Let's say that both answers provide the full picture ;-) — Álvaro González, Jan 11 '18 at 08:06

ASCII art in HTML

2 Answers2

Linked