Flowing Comic Layouts

This began back when I was creating Chatting with Glue.

It's really damn hard to make responsive layouts that flow in the browser. Your only options are CSS Grid or an entirely custom layout engine. CSS Grid didn't really work well so I'm going with the latter option.

My friend Weiwei was also experimenting with this format.

(1/??) Been thinking with @glitchyowl about dynamic comic authoring for the browser.

By dynamic I mean semi-interactive and responsive.

By comic-for-browser I mean content laid out in scrollable narrative form. Beyond the panel grid and more serpentine.https://t.co/jFW7OlTfUi
— Max Krieger (@maxkriegers) August 19, 2020

Why layouts must flow

Our eyes saccade all over when we're outdoors. We evolved to scan.
Text and grids are fundamentally predictable and unsurprising.
- They're boring.
- Paragraphs are cubicles.
What if we had a plurality of pathways?
- Conveying a journey. Maintaining uncertainty.

Won't you get "lost" in a nonlinear layout?

Yes. But can't you get lost in a linear layout too? How many times have you lost focus while reading something dense? (text.reading (Private))

When essays involve visual components, your eyes will be attracted to them, like basins in a pool. In conventional articles, there's a stark contrast between an eye-catching figure and a big fat chunk of prose in an attentional vector field. In fact, undergraduates are instructed to scan the figures in a paper before reading the content.

Implementation

This is something I'm always open for advice on.

Cola-Web

Main idea: Use cola's constraints to prevent overlaps between boxes and apply grouping.

Blocker: Weird behavior when several boxes in a row are smooshed right now. Unclear API.

Bezier eccentricities:

Main idea: change a snake-shaped bezier curve as browser resizes.

Blocker: math. Currently figuring this out.

Misc

A Comic Introduction to Idyll uses Grid, through and through

I've been working on a dead simple way to make websites.

Drag-and-drop, free-form, collage-like. pic.twitter.com/FhiJZO3Mu2
— HX (@ntsphx) February 22, 2021