Comic page

layout lab · experiment · pinned to kit v0.1.0 All experiments

One storyboard of seven panels, drawn once by the kit, laid out three ways. The data does not change between layouts; only the slots the panels sit in do. The question is what a layout wants from the data that the data does not yet carry.

1 2 3 switch layouts

What this taught us

  1. Small panels lose the words first. In the row of three, a panel is a third of a 780px sheet, about 232px wide, so the kit's 1600-wide drawing is shown at 0.145 of its size and the 34px bubble text is under 5px tall. The row reads as pictures: the figure, the laptop, the vault, the terminal's dark block and the yellow caption survive; the words do not. A small panel wants one figure, one prop and a caption of a few words, and the bubbles want the big panels.
  2. A splash is the cover's job; every other slot shape is a crop, and a crop needs a scene written for it. The cover's 96px title and its own frame fill the two-column slot letterboxed. The tall slot shows the middle 30% of a 16:10 panel's width, the wide slot (anchored to the floor) the lower 78% of its height, so panels 2, 6 and 7 were written for their slot: short lines, people inside the visible strip, one person alone in the tall one. The kit pins the caption to the top left, so a cropped slot can show only half of it; this page hides it there, and the filmstrip and the grid still show it. Try "crop every panel" to see the cover and the small panels lose their edges.
  3. A layout wants a size hint per panel, and the kit wants to draw into the slot's aspect. Nothing in the data says which panel is the splash, which three are small and which one is tall; this page hard-codes the slots and their fit. The thing to lift is a size hint per scene (splash, wide, tall, small) that the author sets, so a scene is written for its slot, and a drawScene that reads the svg's own aspect and places the cast, the bubbles and the caption inside that frame instead of inside 16:10. Status: a proposal, not in the kit.
  4. Panel numbers, the title block and the punchline belong to the layout, not the scene. The seven svg elements move between the three layouts with one appendChild each and no redraw; the filmstrip needed only a width, the grid only an eighth cell. The punchline is the layout's text under the last panel rather than a punchline-kind panel, because a punchline panel and a punchline block printed the same line twice. Print fits the sheet to one A4 page with a print stylesheet and no second drawing. Status: the three layouts and the print work.