Like all other printed material, comics have gone digital. During their transition features like zoomable pages, motion graphics and parallax have been added, but for the most part, digital comics remain unresponsive: users have to scroll to read from side-to-side, or use unnatural frame-to-frame navigation interfaces.

It occurred to me that flexbox might be a very good way to bring comics into the responsive design fold: flex items can very much be thought of as “panels”, and multi-line flex containers – acting as “strips” – are completely supported in modern browsers.

Create The Comic

To test this theory I created a simple proof-of-concept, using an image sliced into three panels with PhotoShop, each exported as a separate JPEG.

Reassembled in HTML, the result looks something like this:

<div id="strip">
	<figure id="panel1">
		<img src="pleading-man.jpg" alt="A photograph of a man kneeling in a parking garage, pleading for his life" >
		<figcaption>“WAIT…”</figcaption>
	</figure>
	<img src="car-strip.jpg" alt id="panel2">
	<figure id="panel3">
		<img src="gunman.jpg" alt="A backlit photograph of a man pointing a gun">
		<figcaption>CLICK</figcaption>
	</figure>
</div>

To make the comic strip horizontal, I set the container element to flex, staggering the panels apart and lining them up vertically.

#strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

The panels will take up the entire horizontal space of the container by default. To change this, and to set up the captions, we give each of the panel a size and position:

#panel1 {
	width: 40%;
	position: relative;
}
#panel3 {
	width: 33%;
	position: relative;
}

It also occurred to me that it would be possible to create heavily illustrative frame borders by using border-image:

#strip img { 
	border-image: url('frame.png') 22 16 16 22;
	background: #000;
	border-width: 12px;
	border-style: solid;
}

Finally, the captions:

#strip figcaption {
	background: #fff;
	font-size: 1.2rem;
	padding: 1rem;
	display: inline-block;
	position: absolute;
	top: 2rem; right: -2rem;
	font-family: Sequentialist BB, Comic Sans, cursive;
	border-image: url('lettering-frame.png') 11 10 14 12;
	border-width: 6px;
	background-clip: padding-box;
}

Each caption has a slightly different visual treatment:

#panel1 figcaption {
	letter-spacing: .3rem;
}
#panel3 figcaption {
	left: -2rem;
	width: 4rem;
	font-style: italic;
}

This being flexbox, the content is automatically responsive. At narrow viewport widths, the middle panel no longer works in the design, and so is turned off:

@media screen and (max-width: 60rem) {
	#panel2 { display: none; }
}

At a certain point, the comic strip is best read vertically:

@media screen and (max-width: 40rem) {
	#strip { flex-direction: column; }
	#panel1, #panel3 { width: 60%; }
	#panel3 { align-self: flex-end; }
}

There’s also the very intriguing possibility of using flexbox to tell a different narrative by changing the order of panels:

@media screen and (max-width: 40rem) {
	#panel1 { order: 3; }
	#panel3 figcaption { display: none; }
}

Conclusion

Techniques like this can help transition comics from static, locked-down pages into the realm of responsive web design, so that they become searchable, translatable and viewable on any device. The techniques also offer fresh possibilities: the ability to create a different reading experience, and potentially a different storyline, depending on the orientation and screen size of the device, or using flex-grow and shrink to introduce dynamic intermediary frames.

Potentially it could also be used to make comics even more cross-cultural: traditional Japanese magna are created and read from right to left, for example, whereas Western comics are left-to-right. Flexbox responds to CSS writing-direction: comics built using this technique in either language could be both translated and read in a logical way for their respective cultures.

Photograph by Mai An Noa. Sequentialist typeface from Blambot.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/kJacy