responsive ascii art

14 April 2019

(Update 17 Apr 2019: Yes, I know it works on Firefox but is messed up on some other browsers. I made an issue: Issue #29609 | webcompat.com)

I'm making a web thing (for Progressive Web Application practice) and could use a header image. I'll just go old school and do some ASCII Art.

Wait a minute, though. All the cool web sites now are Responsive. So the header should work at different sizes. So what I want to do is to get ASCII Art to behave like a regular image. If I make Ye Olde .Sig Sword

and I want it to look good inside the containing element, I want the text to resize, not reflow.

Kind of like this.

The dashed red border is just to show how big the div is.

The answer so far: put the ASCII Art inside an svg element, like this.

<p><svg viewBox="0 0 170 24" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0">
    /
O===[============================&gt;
    \
</text></svg></p>

Needs some CSS, like this:

svg {
        width: 100%;
        overflow: auto;
}

svg text {
        line-height: 100%;
        white-space: pre;
        font-family: monospace;
        font-size: 8px;
        fill: #666;
        user-select:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
}

The "white-space: pre" gives me the ultimate image editing environment: free-form multi-line ASCII art text within the text element. Yes, I still need to use >, <, and &. The fill sets the color.

One small annoyance is that the text of the ASCII Art can be selected if the user double-clicks, or drags, or long presses on a touchscreen. So the user-select stuff is to prevent that from happening.

Sources

• Fitting Text to a Container | CSS-Tricks

• How To Work With The SVG Text Spacing Properties by Steven Bradley

• white-space - CSS: Cascading Style Sheets | MDN

• user-select - CSS: Cascading Style Sheets | MDN

Bonus links

Great Developers Are Raised, Not Hired, by Eduards Sizovs, The Principal Developer

Startup Stock Options – Why A Good Deal Has Gone Bad

‘Short-term targets create perverse incentives that hurt businesses’

3 Ways To Improve Experience for Contributing Writers

Codecademy vs. The BBC Micro

The App Privacy Crisis Apple And Google Need To Fix

Proquints: Identifiers That Are Readable, Spellable, and Pronounceable