Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASCII art in HTML

Tags:

html

ascii-art

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:

# # ## # # ##### # ###### # # # # # ## ## # # # # ##### ## # # # ## # # # # > ##### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######
like image 971
Mladek Avatar asked Nov 09 '09 17:11

Mladek


People also ask

How do I display ASCII art in HTML?

HTML <pre> Tag. The HTML <pre> tag represents preformatted text in an HTML document. The <pre> element can be used for displaying ASCII art. It can also be useful for displaying blocks of computer code, and even displaying the contents of an email.

What is ASCII text in HTML?

ASCII is a 7-bit character set containing 128 characters. It contains the numbers from 0-9, the upper and lower case English letters from A to Z, and some special characters. The character sets used in modern computers, in HTML, and on the Internet, are all based on ASCII.

What font is used for ASCII art?

Most ASCII art is created using a monospaced font, such as Courier, where all characters are identical in width.


1 Answers

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> 
like image 146
John Fiala Avatar answered Oct 24 '22 22:10

John Fiala