CODEWITHSUNDEEP
htmlascii-art
LaCalienta
LaCalienta

Reputation: 53

ASCII art in HTML I don't control

Hi there I am trying to add some ASCII art on a website I do not control, I can write text into their editor and this text is then wrapped in which makes adding ASCII art extremly dificult, first I can only add one space and one line break so I have to replace that with "...." and for background I have to use something dark like "@" or "#" but it gets worse because even if I replace it all it looks fine in the editor while terrible on webpage

It looks fine in the editor enter image description here

but terrible on the webpage and I know its word-break: break-word; problem enter image description here 

now here is how their code looks like after it is displayed, I can not edit it     I can only add content between the div <div style="word-break: break-word;"></div> and no I cannot add pre <pre> tag as < and > get converted to &lt; and &gt; and "&" gets       converted to &amp;

their code:

<div style="word-break: break-word;">==== for some reason this shows fine ====<br>  
....#######...|.....##................|..........<br>
...##........##..|.....##................|..........<br>
...##..............|.....##................|..........<br>
...##...####...|.....##................|..........<br>
...##........##..|.....##................|..........<br>
...##........##..|.....##................|..........<br>
....#######...|.....#########..|..........<br>
<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*../@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/.....@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/......@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,.......@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*........@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@..........@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@............@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/...............@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@./*.................@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@*.....................,@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@,.......................&amp;@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@.......................*@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@/........................@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@..............@@@@...@...@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@*.........&amp;..........@@@@..,@/.*@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@*.....*,..........@@@@@..*@*.*@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@*...@@/...(@@@@@@..,@@..,,@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@...@@@..*@@@@@@@...........*@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@*..@@@@. (.(*................,@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@..@@@./........................@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@................................,(@@@@@@@@@@@<br>
@@@@@@@@@,.......................................@@@@@@@@@@<br>
@@@@@@,.........................................@@@@@@@@@@@</div>

so is there a way around that maybe there is a formula how many @ I have to add for browser not to break a text like that? because for some reason the first ascii art looks fine in the webpage but terrible in the editor

Thanks for Anwsering and Best Regards

Upvotes: 0

Views: 2853

Answers (1)

John
John

Reputation: 3785

It looks like you need to use a monospaced font.

Use the following CSS to solve it:

.monospaced {
    font-family: "Courier New", Courier, monospace; 
}

<div class="monospaced">
   Put your ASCII art here
</div>

Upvotes: 2

Related Questions