← appaday

A spread on a phone, tap a detail to read it

Twelve days after Kiste, the comic crate, I left the browsing alone and went back to the part where you actually read. The prompt that morning, to Codex:

ok let's zoom in on the actual reader... let's say we have an iphone pro max. take the most complex comic we have downloaded and try to make every image be optimally viewable on screen (perhaps both contain and cover style) ... once you figured that out, deduct a logic of how the panels can be seen well on a mobile app

It picked Weird Comics #4 from 1940, 68 pages of tall panels, wide action, dense lettering and prose columns, and built a fit study on a 440 by 956 point phone. The findings were sensible. Most panels read best whole (contain). On the wide action panel on page 24, filling the portrait screen (cover) hides about 82% of it. Prose wants column width and a scroll. My reply:

its good but this is also a standard comic... what I am worried about is comics that have double-page spreads and how could we possible put those on a mobile phone... or the little panel in the corner and then the rest of the page one giant panel

The hard cases

The second study used two of them. Steamroller Man #1 by Matt Schofield has a real double-page spread at pages 30 and 31: one continuous machine scene with two inset faces and captions scattered across it. Two pages of David Revoy's Pepper&Carrot (CC BY 4.0) have small insets laid over a big scene and a kiss panel that bridges two rows. The measurements: turning the phone sideways makes the whole spread only about 25% larger, and filling the portrait screen hides about 62% of it. Neither mode alone makes the captions readable.

The study page Spreads, insets and broken frames. On the right a phone-shaped preview shows the Steamroller Man double-page spread as a thin black and white strip across the middle of a tall black screen, its captions too small to read. On the left, buttons for four difficult layouts: true spread plus insets, corner inset plus giant scene, overlapping L-shape, character breaks the frame
The second study: the Steamroller Man spread contained on the phone. Art © Matt Schofield, loaded from his Comic Fury page.

The study's own answer was a hand-made route: whole spread, then each caption and inset, then back to the whole. Mine:

ok it's pretty mid but I like the ambition. first of all remove all borders. buttons can be overlayed if needed but I would prefer to have no or almost no buttons. here's my idea: three finger press shows the buttons (leaving etc) alternatively shaking the phone. one finger press in the center switches between contain and cover mode (cover can obviously be panned). panning is simply moving one finger.

presumably with AI we can identify "zones of interest", so when you e.g. tap on the top left then that textbox and the guy's image are in focus. tap again and we are back to seeing the whole picture.

Tap a detail

Fourteen minutes later it was live. The reader is black and nothing else: no frame, no toolbar. The page sits whole on the screen. Tapping anywhere on it focuses the smallest zone under your finger, and the next tap goes back to the whole page.

A Pepper and Carrot page contained on a tall phone screen with black bars above and below: a dragon scene with a pilot's face inset in the top left corner, a narrow inset of two hands grabbing on the right, a kiss panel bridging into the row below, and a row of captions at the bottom
The whole page.
Zoomed in on the top left: the pilot's surprised face in its small inset and the speech balloon that escapes the inset to the right, reading Shichimi! Spirits be praised, you are safe and sound, now at full reading size
Tap the corner: the inset and the balloon that escapes it.
The narrow inset of one hand grabbing another wrist, with the sound word Grab, now filling the whole phone screen from top to bottom
Tap the narrow inset: it gets the full height.
The same page in cover mode: it fills the screen top to bottom, the left and right edges cut off, the dragon scene, the kiss and the conversation large enough to read
Tap the centre: cover, panned with a finger.

The zones are grouped by meaning, not by panel border. On the spread, the top-left zone is the caption and the man's face together, the way I described it. On the Pepper&Carrot page the corner zone reaches past its frame to take in the speech balloon, and the hand-grab inset, a sliver on the whole page, fills the phone from top to bottom. Pinch zooms anywhere. Three fingers, or a long press for phones that keep three-finger gestures for themselves, bring up the controls.

built
28 October, from the first prompt to the live reader in under two hours, with Codex
studies
Weird Comics #4, all 68 pages, ten difficult examples; four hand-marked spreads and insets
reader
4 pages; 4 focus zones on the spread, 5 to 8 on each Pepper&Carrot page, all marked by hand
gestures
tap a detail, tap again, tap the centre, drag, pinch, three fingers or long press, shake

Still rough

Every zone was marked by hand for four pages. The AI part, finding the zones of interest on any page, is the idea and has not been built; the reader's own note says detection comes after the feel is agreed. It is a separate page, not yet part of Kiste, and it reads four sample pages, not your comics. Shake to open the controls needs a one-time tap on an iPhone to allow motion access.