July 16, 2020 10:01 PM
Fixing my ascii art chick
Since coming back from my vacation, I've been trying to limit my exposure to other people. I realized that in my whole life I don't think I've gone two days without interacting with someone else in person. So this is weird. I'm forcing myself to stay at home except for going on runs outside (I need fresh air and exercise), and I don't even do that every day. So far this is working out okay. Each night, I write down a TODO list of things I want to accomplish the next day. I almost never accomplish all the things, but hey, I'm staying busy.
Today I told myself I was going to figure out how to include images in the blog entries occasionally. But then I looked at my site on mobile, and I turned my phone sideways. And you know what I noticed? The little ascii art chick on the front page was all janky looking. But it only happened when I turned my phone sideways. Looked perfectly normal with the phone in the vertical position. I tried to reproduce this in my Chromebook and no matter how I resized the window, it didn't happen. Also, trying to "debug" an issue on a phone is a pain in the butt.
But, somehow I was able to fix it. First I tried Googling, and found some promising looking StackOverflow questions about people having trouble with monospace fonts on mobile, but it turns out those people wanted to use box glyphs and my ascii art is well, ascii. So I zoomed in on the ascii art chick on my phone and highlighted the area. The spaces in front of certain lines were narrower than others. Why? Who the heck knows. I did the same thing on my computer and inspected the space element with the dev tools. I inspected other space elements. And I realized some spaces were inside <span>s and others weren't. So I made it so all the characters in the ascii art section were surrounded by <span>s, and it fixed it!
- <pre>
- <span class="yellow">.--.
+ <pre><span class="yellow">
+ .--.
; </span><span class="lightblue">@</span><span class="yellow">\
- ; :</span><span class="orange">></span>
- <span class="white">/\/\/\/\
+ ; :</span><span class="orange">></span><span class="white">
+ /\/\/\/\
\ /
'----'</span>
</pre>
Yeah, it was kind of dumb. I spent like an hour and a half looking at this. And I never got around to incorporating images in this post. Which would have been helpful. Oh well. Next time.