0

I am looking for help in displaying ASCII art properly in HTML and CSS. I was wondering if you all could provide me with any help? I'm not sure what to do with the alignment. You can see I have tried several things per other stackoverflow questions I reviewed. Any help will be greatly appreciated. I attached photos of what it should look like.

How do I format the characters to show the photo exactly as it is originally? Should I justify the text? Can I restrict the text to the dimensions of the DIV? Right now- the characters are not aligned correctly. Even after using justify in the CSS properties, it doesn't seem to align to show the image as it should. I made the font monospace and added white-space: pre; but I need something else to help the photo become more visible. I also added the pre tag per what I read on another stackoverflow post. Right now, its warped. The first photo is what it should look like, the second is how it looks in my terminal.

I'm looking to make this:

WHAT IT SHOULD LOOK LIKE

But instead my code generates this:

WHAT IT LOOKS LIKE THROUGH MY CODE

div {
    height: 2px;
    width: 5px;
    
}

pre {
    font-size: 5px;
    font-family: 'Courier New', Courier, monospace;
    text-align: justify;
}

p {
    font: 50;
    font-weight:bold;
    font-size: 2px;
    font-family: 'Courier New', Courier, monospace;
    text-align: justify; 
    text-justify: auto;
    white-space: pre;
}
<div id="image-one">
 <p>   <pre>.;;;;,'................................................................  ..  ....                 .      .                            ':'...............;;,,,;;;;;;::.                                          ....;:::;'.  
    .;;;;,'................................................................   .. ...  ...                                                 ';................;;',;;;;;;;:;.                                          ....,:::;,''.
    .,,,,'...............................................................      ..     ....              ..                                ,,...............':,',;;;;;;;:,                         ..               .....,;:::,'. 
    ',,,''..........................................''.................   ....... ..                   ......                            .,'...............,:,',;;;;;;::'                    ....''...        ...',;:c:,',:::,.  
   .',''''..............................................................  ............        .       ..  .....                          .;'...   .........;;,',;;;;;;::.               .......'''..............',;;:::;',;::,.  
   .','''...... ..       .........................'...................          ..........                 ....                          .,....   ........';;',;;;;;:::;.              ........'..........................,::'   
..........                                     .','''..........      .....  ......................................            .....   ..       .   .    ...                          ',...   .........,:,',;;;;::::;.......................'.............;odddddool:,.';;.   
.';,,'''''''.....                                 .''''...........     ........  ... .......... ...............   ..........     ......        ....  ..    .                            ',..    .........;;,,,;;;:::::,......................'..............;dOOOOOOOOk:..,;.   
.;llc;'''''''.......                              .''''..........     ......... .... .......... ...............   ..........     ....      .   .   ..                                  .,'..    .........;;,,;;;;:::::,....................''...............;dOkkkkOkkc.  .,.   
,odo:,''''''..........                           .'''...... ....     ......... ............... ................        ....      ...    ..       ...                                  .,'..    ........';;',;;;::::::'.....................'''.............;llcccccc:'....'.   
'::;,,''''''............                         .'''...... .....   .......................... ...........  .          ...       ..      .       ... ......  .                        .,'...  .........':,',;;;::::c;....................''''''............,;;;;;;,,;;,,,'.    
...'''''''''.................                    .................   ........................ ............  ..                                   ......     ..                        .,...............,;,,,;;;::ccc;.....................'',,'.............',,,;;;;;;;;;'.    
....''''''''....................                 .................   ......... ................................                               ....... .. .  ..                        .',..............;;,,,;;:::ccc,...............     ...',;;;;;;,,,'............',,,,.     
.''''''''''''.......................            ..'...............    ........ ..................................     ..      ...              ... .   ..... .                         ':'............';,,,,;;:::cc:'.....................',;:oxkkkxdolc;................      
...'''''''''''..........................         ..'.'..............  ......... ........... .........  ..........             ...                        ...                          .':;'............';,,,;;:::ccc;................;cccllooo:,',,;::;;;,'.',,;;,,,'''...      
........'',''''''..........................         ....'...........    ...................... .......     ......                ...                        .....                        ,c;'.............,;,,,;;::cccc'               .:dddddddl,.........''''',,,;;;;'..''.      
...............',''''''..................                 ....''..........    ..............................    ...       ......       ...                          ....                      .;;'..............;,,,;;:::ccc:.               .:ddl:::c;'........',,,,',,,,,;;;,...       
................''',,'''..........                            ................    .............  ..................      .     ....       .                                                       .:;..............';,,,;;:::ccc;.               .:dd:..'''.........';;,'',,,,,,,,;;,.       
...........................                                     ...............   ...............   ...................     .    ..                                               .                 ';,....  ........';,,,;;::cccc,.                ':lc:::;,.........';;'''',,,,,,,,,,.       
...................... .                                              ...............  ................     ..........                                                     .                             .,;....   ........,;',;;;::cccc.                    ...,,'..........,,'''''''',,,,,.        
..............                                                           ...............  ...............     ...........  .  ...                                             ..                            .;,.....   .......;,',;;:::ccc:.                         ...........''''''''''''','.        
........                                                                     .................................. .............   .....                                                                           ,c,.....  ........;,',;;:::ccc,                           ............''''''''''''..        
  .......................................   ..............   .                                                                      .;:'..............','',;;::ccc:.                                     ..''''''''''''.         
  .............''''''''.............  ...  .       ........                                                                         .;;...............','',;:::ccc;.                                     ...''''''''''..         
  .........''''',,,,,,,,,,;;;;,,,''......         ............                                                                      .:,...............'''';;::::cc,                                      ..........'''.          
  .........''''''''',,,,;;::;::::::::;,'...           ............                                                                  ';'...............,''';;:::cc:.                                    ................          
  ........''''''''''''''',;;,,,,;::cllc;,'.....  .... ......          ....                                                         .,;................,'',;;:::cc;.                                    ..'......                 
  ............'''''''''''',,''',,,,;:cc:;,'.....   .....',,.. .        ....                                                        .;,...............','',;::::cc,.   .......                         ..''''''''......           
  ..........'''''''''',''.',,,,,,,,',,,,'''......      ..,,'.....  ...  .....                                                      .;'...............',.',;:::cc;... .......                           ..'',,,,'''''..           
  ..........''''''''''''''',,;;;;,,''''.............     ...................................                                       ,;................,'.',;:::c:...........                             .',;;,,,,''''.           
  ......'''.''''''''''''',,,;;::;,,''....................      ................'''............   .................................';'................,'.';;::::'..........    .............             ..''.........            
  ..........'''',,,,,,''',;;::c:;,,,''.....................           ...  .......................... ........ .. ................''.................,'.,;;:::,............................                                      
   .............',,,,,'',;:cccc:;,,,''......................          ..           ........''..............       ...     ..........................',..,;;::,............''..............                                       
   ......'''.....'',,,,,;:clllc:,,;;;,,'''''''''.................   ....     ........'''....'..............        ....   ..........................,'.',;::;,',;;;;,,.....',...........                                         
...................................... ..............       .....',;,'..',,'''',;coolll;,,;,,,,'.....'''............................................................    .  .....  ..........................,'.',;;;;;,'.....','...',........                                            
......................''...''''''',,,,,,,'..'''..''''.............';::;'.',;;,'';coooooc;,,,,,,'.......'''.................................................. ........     .. ....  ..........................,'.';;;;'..............,,......                                              
....,,,;;;;;;;:::::::ccccccccccllllllllooooool;''......'''''''''''''''',;cll:'',::;,;codddol:'''''''....................................................      ..   ..   ..       .................................,'',;;;,..............,;'.......                                             
.:lllllooooooooooooooooooooooooooooooooooooooooc'..........''''''''''''',:lddo:'':c::ldxxxddo:'...................................................... ...       ..     ...  ......................................','',,;,'........ ....,,...........                                           
'looooooooooooooooooooooooooooooooooooollooooool,..........''''''''''''',:odkkd:;colodxkkxxxl;'...........................................................      .   . ...    .....................................','',...............',,.............                                          
.;lloooooooooooooooooooooooooooooolc:;;;:looolooo:........''....''''''''',:oxkOkdcldxxkkkkkxdl,''''''',,,'.........................................................................................................''''...............';,................  .                                     
.:loooooooooooooooooooooooooolcc:;,'.',:cc:::clodl'...................''',:ldkOOkddxkkOOOkkkd:'.'...';:;;,'''''''..................................................................................................'''................',..................                                       
.;clooooooooooooooooooooollc:;;,,,,,,,,;;:ccloooddo:'''......''.........'',coxkOOOkkO0000OOkxl,......;cl:;,''..............................................................................'''''..'''...''..........','.................,'..................  ..... ..                            
.':loooooooooooooooooolc::;,,,,,,,;;::ccloooooooodddl::c;,'..''''''''..''..':dkkkkO00XXXK0OOkd:......,lolc:;,,........,;:c:;,'''..........'...........     ..........................................................',..................,,....................                                    
..'coooooooooooooolllc;,,,,,,,;;::cclooooddoooddddddodddxdlc:,'',;;;::;,''..'cxkkxkk0XNWNK0OOkl'.....;oddlc:::;'...',;cccc::;;;,,,''...................    .....  .  ......................''''.......................',.    .............,,.....................                                   
....,llooooooooollccc::;;,,;;::clloodddddddddddddddoddodxkOkkxdc,'';clllc;'''';lxkxxxk0XWWNXK0Oo,....,cdxxdllcc:,',;:ccc:::::;;;,,,,,''............. ...     .....      ...................',,;;,,'''......................   ..............,,......................            ....              ....
.....;llooooolccc::::::::::cclooodddddddddddddddddddddollx0KK00Odlccloxxxdl::::cdkkkxxkKNNNNNX0x:'.''':dkkkxdolllccc:::;,;;;;;;,,,,,,''................   ................................'';ccccc:;,,,..                      ..............','.......................         ......  . .............
.....'coooooolc:;::::::::clooddddddddddddddddddddddddoolllxKXXXKkxdooodxOOOxoooodkOOOkk0XNNNNNX0xc:::cldk0OOkkxxddoc::;;;;;;,,,,,,,;;;,,,'........     ...................................''';ldddoolc::,..                    ................,'..........................  ...........................
......,loooooooollllllllooodddddddddddddddooooooollolccclloOXXNX0kxdlodxO00OxoollokOOO0KXNXXNNNX0xoooodxk000Okxkkkkxdoollc:cc:;,,,,;;::::::::::;;,,,,''....................................''',cdkkxddolcc,..                   ................,'.......................................................
.......;loddoollllllllllllcccccc::::;;;;;;;;;;,,,,,:c:;:clokKKXXX0OOxodk0XXKOdoooodk00KXXNXXXXNNNXkdddxkOO000OkxxkOOkkkkxxxolcc:;;;,;::cccc:cllc:::;;;;::::;;;,''''.......................'''',,:dkkkkxxdool:,..                .................,,.......................................................
........:ooolc;;,,,,'''''......................  ..;cc:::::o0K0KKK0OOkxkKNWX0kxdxxxkKXKK0KKK0O0XNNN0xxxkOO00000OkxO0OOOOOOkxlc::::ccc:;;:ldxolccc::;;;;,',:c:::;;::;,,,,,,''''''...........'',;;;coxOOOOkkkkxol:,..            ...................,,.......................................................
........':cc,.............                       .,ccllloccoOK000000OOO0XNXKOkxxxxxdd0KK00Okkkxx0XX0xxkOOOOOOOO00kxO000000Oxoc:cccc::c:;:lkKXKxllccc::::::::::::;;::;;;cllc:::;;;;,,,,,,''''''',;:coxkOOOOOkkxoc;;;,.          ....................,'.......................................................
.............                                  .,cc::clo::d0KK0OkOO0KKXXX0xoodxxdddodOK0OxddxdlldkOoldxkOOOOOkkO0kxk00KKK0koc:::::ccccccco0NNNKxoollc:::c::;;;;,,;;::::clxkkxdoc:;:::;;;::;;;,,,,,:ldkkOO00Okxo,......        ......  .............,'.......................................................
......................... .............      .,clccccllodkKK0kkkxkO000OkxolloddoooodkKXOxxddxddodddodxkO0OOOOkddkkxkO0XXKOoccc;;c:ccclooodOKOkOkdolll:::;;;;,;;,,;;::::::cox0K0Oxolc:;;:::::::::::coxkkkO0K0kxl'     ..       .....   .............,........................................................
............................................,:c:::clldx0XKOkkkkxdxxddooddlclloolllox0X0xdooddol:lllodxkOOOkOkkxddkkk0XNX0dlcc:,;ccccclolldxo::cllc:::;;;::::;:;;:::::::::cccokXXK0OkxolllllcccccccldkOOOO0KK0Oxc;,''.....     ..      ............',........................................................
..........................................,clc:::ccllkKKOkOOOkxlclllooolc:coodddolx0X0kolooodo:;:::ccoxOOkkkkxdlok00XNN0dcclllcccc:::llllolc;;;;;;',;;,;;::,,:;::clc:clllodddokXX00KXX0OOkdloolccccokOO0O0KKK0Odlllllc:;;;,,,''...................,,....................................................... 
..............................  ........,:c::::cllodxkkkOKX0kolc;:cccc:,',:ccccclx0X0kxdooxxdl::::ccldOOkkxxxxdlldOXNNOlcloooo:;ccccllc:cc::ccc:;;,;:;::;;,',;;;;:c,,cllloxkdodO00KXXKXNNXOdooolcc:cx00000O0KK0kolccll:::c:ccccccc::;;,,,''''....';'..........................................  .... .......
......................................,:cc:::;:c:::lxddOKX0kool::llllll;,;:ccllcd0KOkkkxkkOkdlc;;cclokOkxxxxkkdoodOKNKkooooool:;clcccc,';:::cc:,;:::clll:;::ccc:ccc::lllllodoodxOXWWN0O0XXXKkddlccc:oOKXK0OOOKK0xolll::ccc:::::cccccccccccc::::;;:;'........................................        ..... ..
....................................':c;;::cccllccloddxOOxxxdoccc::;;;,';::::clxKX0ddkOO0kdllol:,:cldkkdodxkkdollk0XN0kdc:ododdoc;;;:c::c:;;;;,';:;;:::;.,:::cccccllooodxddddkooONWWNXOxkkkkkxd:;oolokXNNKOOO0KKOoccc:cccc:cc:::::;:::;;;::::cccc:::;........................................      .........
...............................  ..;cc:;,,,,,;:,,;;;;codllodoooc;:cccc::;,;;:co0KOxoclodl::cccc::cloxkxoodxxddolok0KX0dc;ldoollc,,ccclll;',;:ccc:,,;;;:;,;;,;;;;,;;::::oxoloool:dKXXNWXkxxxxxddlcolooxKNNKOkkk0KKOolllllcccccccccc:::;;,,,,,,;:cc::c;.......................................... ............
............................... .,::;;;:::cccc;,;;;;;:clc,,;;:;,;;;::cc:;;cllooolloolllc,',;;:;;;;:clodoxkxdooodxkOKK0kl:lollll:,::::::;.,;;::c:,.;::ccccc,';::;;;;::::cc:;;;coodxx0NNXOddxxolldoooddx0NWXOkkkk0KKOoccllcllcc:ccccccccc:::::::ccc::c;.................................................  ....
...............................,::,....'''',;,',;;;::clc;;cooolllc;,;cc:c:::;:c;:::cccc;,;cccloc,,clododkOxolcoxOO00Oxl;:lllool:;;;;cccc;,;;;;::'';;;;;;:,.,:cc:::::cll:,;::cdddxxxx0Oxxddddc,:ooddxkkOXWN0kkkxk000Oxolloolcc:ccccccc:;ccccccccc::c:,...............................................  .     
.............................':c:;,''......''........','',,;;::cc:,;ccllllllllllolccccc;;;;;,;:;';lxOkxkO0OxodkOOOkxxdollc:::::',:;;:cc,',::clol;,;:::::c:,;ccccccc::ll;;;;:cllloxxooddxxxdo::looddxk00XWN0kkOkkkxkOOkxdddc;:ccclllc:::::ccccccc::c:'..............................................         
............................;::;;;;;;;;;;;,;,,,,'''''''.'......',..'...''',,,,;;;::cclllllllllllcloxxxxkkkkkxxkO0xoooool:;::cclcc;,;;::;;:;;::c;.,;;::ccl:';clclllclol;;;,,,,;,,:llc:cccloocldxddxkkOKNNWN0kkkkkdlokOOOkxo:;clllllc,.;c:ccccc:::::c;................................................     ...
...........................:c;;;;;;;;;;;;;;;;;;;;;;;;;;;;;,,,,',,''''...............'''',,,;;;::::ccllloooooolodxdc;;;;,',;,;;;:,',;;:ccc;,;c:c::::;;;;::'':::::c::oo;;:;;;:::::cool:::::lccdkOOOOOkOXNNX0kkkxxkxllxxxkkkkdodddolc;..:c::::c:,;::::,..................................................      
............. ..........''...''',,,,;;;;;,,,;;;;;;;;;;:;:::;;::::;;;,,,,,,,,,'''''..............'',,,,;;:::cll;,cllllccc:,',,'';,,,,;,.';,,;;:::::cccccccccccc:cl:;:::::ccccllooolllllllldxk0XXXXXNNKOkOkkxxxxxoodxkkkxkOOdlllc,.,c::::::,';:::;....................................................     
.............. .........     .........''',,,;;;;,,;;;;;;;;;;::::::::;;;;::::;;;;;;,,,,,,''''''''.........','.,;;;:::cc;',;;;:cccc;,.',,,,,,,,,,,,;,,,,,;;;:coc,;::cclllllccooodoolllllooodk0XNWWWNOxkO0OkxddOOkdxkOK0xdxoccc,..::::ccc;',;:::'.....................................................    
.     .....................                   .........''',,,;;;;;;;;;;;;;;;;;;;;;;;;;;;:::::;;;;;;;;;;,,,,,''''.','.....''..,'',,,,;;'.,;,;:cclc;',;;;;;;,,,,;;cc;',,,,:ccccccclldkkxdolooddddxxk0XWNXK0OOO00OdoxO0OxxdxOdllllc;..;::cccc:'';::c;.......................................................   
...    ..  ................                               ........'',,,,;;;;;;;;;;;;;;;;;;;;;;;;:::::::::::::::::::;;;,,,,,'','''.''''..'''',,,;,.';,,,;;::::cll:,,,;::c:cccc:::;;::codc:looodxxkkk0X0xkO0O00OOkxxdddoollocclolc'.,::ccclc,.,;:::,......................................................... 
.......  ...... ..  .......                                          .........'''',,,,;;;;;;;;;;;;;;;:::;;;:::::::::::::::::::;;;;;,,,',,'''''',..''.'''''''';c:'..':::ccclc;;cooooololcloooodxxkkxO0xlcdOOOO00KOkdddl::lc::c::,..:;;::cc:'';::c:...........................................................
....... ..   .....  .....                                                         .........'',,,,,;;;;;;;;;;;;;;;;;;:::::::::::::::::::::::;;;;;,,;,,,,'''''.';'...,;'''';;'.;::clodl;:loodxxxdxkkxddxdookOOxdddlcclc;,::::cll:,.;:;:;;;:,';;:::,...........................................................
...    .    .                                                                         ........'''',,,,;;;;;;;;;;;;;;;;;;;;;::::::::::::::::::::::;;;,'',;;,;;,''',,.','''',;'';;;;:codllddooxxkkkxxxdolllc:;,.',,',,;:'.':cccllc,',;::::'...........................................................
                                ..........''',,,,,;;;;;;;;;;;;;;;;;;:::::::;:::::::::::::::;;;;;,;;,,,,,,'','''''::;clc:;,;:cclloooooool;''::;;;;,'..;:::ccc:'';;:::,............................................................
                                             ..........''',,,,,;;;;;;;;;;;;;;;;;;;:;;::::::::::::::::::::::;;;;;;:::lc:;'''....''''''',;..,;;;:cc,..,:::::cc,',;::::'............................................................
..  ....                                  ..  .                                                               ..........'''',,,,,,;;;;;;;;;;;;;;;;;:::::::::::::::cccclllllc;;;,,,,,'''''.''..'....',...''',,;c:'';::::,.............................................................
..............               . ...    ..    ...........                                                                       ............''',,,,,;;;;;;;;;;;;;;:::::::::::ccc::::::::::;;;;;;,,,''''',........':,.,;::::..............................................................
..............              ........   ........................    .           ...                                                           ............''',,,,;;;;;;;;;;;;:;;:::::::::::::::::::::;;;;,,,,''''','';;:::,..............................................................
.                .      ............................ .......    ..................  .....                                                                ..........'''',,,,,;;;;;;;;;;;;;;;::::::::::::::::;;;;,;;;::;. .............................................................
..     ......................................................................                                                                        ............''',,,,,,;;;;;;;;;;;;;:::;;;;;;;;::'...............................................................
.. ... ....................  ....................................................                                                                                 .............''',,,,,;;;;;;,,,;;:,................................................................
...    ..  ..............................................................................                                                                                              ..............'',;,............................................. ...................
.  .....  ......................................................................                                                                                                            ...... ............................................   .................
..          .......................................................................                                                                    ................                              .................................................................
.................................................................                                                                      .........................     ...                ...................................................................
.................................................................                                                                    .........................................        .....................................................................
...................................................................                                                                 ........................................................................................................................
</pre></p> </div>
Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
pompom
  • 13
  • 3
  • 1
    You're going to have to be more detailed. _What_ is actually going wrong? Show a _small_ example as a runnable snippet, and talk about what you're seeing it do, and what you think it should do instead, and what you already tried in order to make that happen. Right now, your post [does not contain a question](/help/how-to-ask), so give the posting guidelines a read through and then [edit] your post to clearly describe the problem with [mcve] demonstrator code and what you already did in terms of debugging and (re)searching. – Mike 'Pomax' Kamermans Mar 19 '23 at 16:06
  • @Mike'Pomax'Kamermans I just edited it, I hope this clarifies things. – pompom Mar 19 '23 at 16:19
  • [How to create a Minimal, Reproducible Question](https://stackoverflow.com/help/minimal-reproducible-example) You should not just request a ready solution. SO is for helping solve specific errors, after you've shown your effort solving them – Ron Mar 19 '23 at 16:27
  • @pompom your code is still very, very big. Give a _smaller_ example, and remember that if your post is about html+css, you can show people your code through a runnable snippet, which will show exactly what the code does by literally running it in the browser, and letting people copy that snippet into their answer so they can show you the fix exactly where it needs to be. – Mike 'Pomax' Kamermans Mar 19 '23 at 16:30
  • But you'll want to fix some odd things here: why does your div have a width and height? Why is your `pre` set to justify text? (because that'll mess with the white space, turning it into not-monospace) Why is there a `font: 50` and more text justification in the CSS for `p`? But most importantly: have you simply searched the web for examples of monospaced ASCII art and just... copied that? Because that's the web's super power, you can just look at what other people have done and copy the approach knowing it'll work. – Mike 'Pomax' Kamermans Mar 19 '23 at 16:36
  • @Ron your response seems belittling, I have been trying to work on this for three days (some of us are not experts in coding) but thanks – pompom Mar 19 '23 at 16:40
  • @Mike'Pomax'Kamermans Hi, I have tried searching thats where I got the pre set from. I guess it's just that my characters are not aligning as they are in text edit. I'm not sure why thats happening- thats my question... I don't know how else to ask it – pompom Mar 19 '23 at 16:45
  • Don't tell "me", tell "everyone" by editing your post to [include those details](/help/how-to-ask). As for "I don't know why it's not aligning": as I pointed out, maybe it's because you're telling the browser to justify the text, which means that your text will _not_ be mono-spaced in the slightest because whitespace is going to get stretched in order to justify each line. And again: please show a _smaller_ [mcve] so that running it as a snippet doesn't need scrollbars. – Mike 'Pomax' Kamermans Mar 19 '23 at 16:47
  • Do any of the answers here https://stackoverflow.com/questions/1702559/ascii-art-in-html solve your problem? The one from @AlvaroGonzalez looks particularly promising. – A Haworth Mar 19 '23 at 18:46

1 Answers1

-2

  1. Use tables say 10 columns

  2. Use proper codes to display ASCII character codes in those table rows and columns

  3. Don't attempt to try with <pre></pre>

Paramasivan
  • 5
  • 1
  • 6