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.
Hi, here we are inside a narrow element. Here is a little tiny sword.
The dashed red border is just to show how big the div is.
This div is wide. Behold my large sword!
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===[============================>
\
</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
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
The App Privacy Crisis Apple And Google Need To Fix
Proquints: Identifiers That Are Readable, Spellable, and Pronounceable