htmltextasciisymbols

How to reduce the size of an ASCII text art picture


I have an ASCII text art image in large size on an html page, but i am not not able to reduce the size of it on an html page.

It look like this:

__________¶¶_¶¶__¶¶_¶¶_ _________¶¶_¶¶_¶¶_¶¶_¶¶¶ _____¶¶¶¶¶____________¶¶¶¶¶¶¶ ___¶¶¶¶¶_______________¶¶¶¶¶¶¶ __¶¶¶¶¶__________________¶¶¶¶¶ __¶¶¶¶____________________¶¶¶ ___¶¶______________________¶¶¶ ___¶________________________¶¶¶¶ __¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ __¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ __¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ __¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ ___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ ___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ ___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ ___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ ___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ __¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ __¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ ___________________¶¶¶¶¶¶¶¶¶¶¶ ___________________¶¶¶¶¶¶¶¶¶¶


Solution

  • It's Text, so it's influenced by the font, or more directly the font-size

    See example CodePen here, or the example I included below by hitting the "Run Code Snippet" button. Anything you can do to font you can do to your ascii design.

    pre {display: inline-block}
    pre#normal {font-size: 100%}
    pre#smaller {font-size: 50%}
    pre#smallest {font-size: 20%}
    <pre id="normal">
    __________¶¶_¶¶__¶¶_¶¶_
    _________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
    _____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
    __¶¶¶¶¶__________________¶¶¶¶¶ 
    __¶¶¶¶____________________¶¶¶
    ___¶¶______________________¶¶¶ 
    ___¶________________________¶¶¶¶ 
    __¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
    __¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
    __¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
    __¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
    ___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
    ___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
    ___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
    ___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
    __¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
    __¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
    ___________________¶¶¶¶¶¶¶¶¶¶¶ 
    ___________________¶¶¶¶¶¶¶¶¶¶
    </pre>
    <pre id="smaller">
    __________¶¶_¶¶__¶¶_¶¶_
    _________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
    _____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
    __¶¶¶¶¶__________________¶¶¶¶¶ 
    __¶¶¶¶____________________¶¶¶
    ___¶¶______________________¶¶¶ 
    ___¶________________________¶¶¶¶ 
    __¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
    __¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
    __¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
    __¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
    ___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
    ___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
    ___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
    ___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
    __¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
    __¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
    ___________________¶¶¶¶¶¶¶¶¶¶¶ 
    ___________________¶¶¶¶¶¶¶¶¶¶
    </pre>
    <pre id="smallest">
    __________¶¶_¶¶__¶¶_¶¶_
    _________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
    _____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
    __¶¶¶¶¶__________________¶¶¶¶¶ 
    __¶¶¶¶____________________¶¶¶
    ___¶¶______________________¶¶¶ 
    ___¶________________________¶¶¶¶ 
    __¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
    __¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
    __¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
    __¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
    ___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
    ___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
    ___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
    ___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
    ____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
    __¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
    __¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
    ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
    ___________________¶¶¶¶¶¶¶¶¶¶¶ 
    ___________________¶¶¶¶¶¶¶¶¶¶
    </pre>