Link Search Menu Expand Document

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.

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)

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.

See also: Unflattening

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