ASCII-art iPhone screenshots
I wanted to show you all a screenshot of my iPhone. However, I don’t want to add images to this capsule, so that left me with a bit of a dilemma. Then I realized that I could just make an ASCII-art iPhone, and have that.
Since we all see plenty of ASCII art in Geminispace but nobody talks about how to make any, I figured this might be more interesting than my least interesting post here.
First, let’s log our requirements.
I figure that the hard part will be figuring out the width. Let’s look at the top. Here’s what we need to have room for:
- a rounded left corner
- a bit of space
- room enough for “23:59”, but also looks good for “8:51” (the stock U.S. settings don’t put in the AM/PM when there’s a notch)
- the rounded left notch edge
- some barely-visible featureless round hole
- a bit of space
- a second barely-visible featureless round hole
- a bit less of space
- a two-hole-wide super-thin lozenge that’s the speaker for making phone calls
- a bit more less of space
- a featureful round hole that very much looks like a visible-light camera, with some kind of iris or bubble or something in it
- a third and final featureless round hole
- the rounded right notch edge
- barely any space
- the LTE bars infographic, containing four bars of increasing height
- the letters “LTE”
- the battery-level indicator
Then there’s everything else, really. We need it to be as wide as it needs to be to hold:
- a full transcription of whatever might be in Notes or some other full-width note taking app in a proportional font
- a full transcription of whatever text might fit in a button on a screen, plus a nice rendition of the button itself
- the contents of an entire on-screen QWERTY keyboard, complete with rounded enclosing buttons and a way for the second and third rows to be directly below the midpoint of the first-row keys (rows two and three are directly on top of each other)
The height of the ASCII art should be tall enough to match the dimensions set by the widest width, whatever on-screen element that ends up being.
Oddly enough, all this will probably not fit on an iPhone screen unless the font is super tiny.
Let’s implement the top chunk and see what we get:
╭──────────────────────────────────────╮ │ 23:59 │o o -- o o│.ıiI LTE [▊] │ │.ıiI LTE [▊] ╰──────────╯ │
The top and sides are Box Drawing elements. “ı” is a Turkish dotless i and the ▊ is a three-quarters-full Block Element.
I copied the right-side things over to the left side to check widths, and I added a bunch of space over on the top left, around the time display, to put the notch dead center. I couldn’t find a good circle with something in it that pairs with a circle that doesn’t have something in it. o/0 are different sizes and shapes on most fonts, and O is just too tall and narrow anyway.
What? U+2502 BOX DRAWINGS LIGHT VERTICAL isn’t in ASCII? Here’s a nickel, grandpa — get a computer that can run Windows 2000.
Now then. How much text can fit across a normal iPhone screen? In order to find out, I’m going to use a test 100-character string composed of only lowercase and uppercase Is. The tenth character is uppercase because counting by tens is easier than counting by ones when you get close to 100:
iiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiI
Now, to paste it in as many writing apps as I can and see how wide everything is.
- 86 in Notes.
- 93 in Ulysses.
- 90 in Mail.
Let’s just round this to an even 100. Add some space for button and UI elements and let’s see what we get. One nice thing about Visual Studio Code is that it’ll show you how many columns you have selected, letting you find out if there’s an equal amount of space on both the left and right sides of the notch.
╭────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ 23:59 │o o -- o o│ .ıiI LTE [▊] │ │ ╰──────────╯ │ │╭──────────────────────────────────────────────────────────────────────────────────────────────────────╮│ ││╭────────────────────────────────────────────────────────────────────────────────────────────────────╮││ │││iiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiIiiiiiiiiiI│││
Well, I wasn’t quite expecting this. If you have enough room for the widest possible text that’ll fit on an iPhone in portrait orientation, it’ll look more like a 12.9″ iPad Pro in portrait orientation. Seems like the winning play is to size the meat of your on-screen elements, then adjust the top of the ASCII art to match.
⏚
