Blog

Why create comics using web technology?

Why I created this framework

Since the start of the 2010s, modern websites have been putting greater focus on being usable, responsive, accessible, and performative.

We expect sites to change size according to which device we're using, and to load within a couple of seconds. We expect to interact with text, and have sites respect our preferences for light and dark mode.

To be usable and accessible to the most people, websites are created with these expectations in mind.

Meanwhile, webcomics have become an enormous industry, with millions of visitors to the most popular platforms.

Yet webcomics are mostly published as static images. Text isn't really text, but part of the image itself. It can't be copied, enlarged, or easily updated by the creator. It isn't accessible to text-to-speech software for people who need it. It cannot be translated easily by a reader, and scanlators have to edit the images to add their own definitions.

There's a huge gap between the capabilities of modern web technology, and the static content being served to webcomic readers.

In this project, I wanted to close that gap, and demonstrate how webcomics could be adapted into a more reader-friendly and modern format.

I'm not a developer, nor should any artist be expected to understand web technologies to publish their work.

This project is more like a proof of concept. This is what we could have, if webcomic publishers recognised the value of more widely accessible content.

Benefits of using web technology

Here are what I consider the main benefits of this framework, compared to serving webcomics as static images:

1. Layout can adapt automatically between mobile view and page view
2. Text can be translated
• Automatically using Google Translate URL translation service, or browser extensions
• Manually, with human-translations abstracted into a separate document for convenience
3. Font style and size can be adjusted
4. Colors can match users' device theming, or be customized
5. Images can be optimized and therefore load faster and burn less data
6. User interactivity
• Labels and alt text to disambiguate content
• Opt-in content warnings, for example slur/swearwords automatically censored, panels with nudity censored
7. Text and panel alt text accessible to screen-readers

What does "web technology" mean?

For the purpose of this project, I used HTML, CSS, and Javascript. These are web languages which allowed me to separate the text and imagery, produce the layouts, and add interactivity.

Because websites have been getting gradually more complex and performative since the 90s, the capabilities of these languages have also been expanding too.

Using HTML I could specify text for the speech bubbles, provide optimized versions of the images, and set up accessible labels and captions.

Using CSS, I could shape and position the speech bubbles. I could set logic to make the text and layout change according to the size of the browser window. I could change the colors and the font according to user preference.

Using Javascript I was able to template the speech bubbles, panels, layouts, in such a way that it was easier to produce each page of the comic.

You can right click and use the 'inspect' function in your browser if you'd like to see how the code works for yourself:

How HTML and CSS work

Hypertext Markup Language - HTML

Every website you see is a file, usually a `.html` file, stored on someone else's computer. When you use your web browser, your computer is fetching and displaying that file.

The.html files are formatted a certain way, which tells your web browser what kind of content it contains, and how to display it on your computer.

HTML formatting uses 'tags', which are angled brackets containing pre-defined terms. There is a full list of HTML terms on MDN.

For instance, in the following code, the h1 , p , and img are in angled brackets, and are telling the web browser to expect a heading, a paragraph, and an image, with a URL for where the browser should fetch the image to display on the page.

    
        <h1> My page </h1>
        <p> Hello world </p>
        <img src="/images/myimage.jpg" alt="a waving person">
    

HTML is easy to learn and use, however it's important to use the correct tags for your content. This is so browsers and other technology such as text-to-speech screenreaders can accurately communicate the contents of your page.

Cascading Stylesheets - CSS

HTML tells the browser what content to expect, and your browser will format the appearance of this content. However, the default appearance is very basic.

CSS is a language which allows us to tell the browser exactly how something should look.

Based on the HTML from the previous section, this is an example of how CSS can change the way this content is displayed by the browser.

    
    h1, p {
      font-family: helvetica;
      color: forestgreen;
      text-align: center;
    }

    h1 {margin-bottom: 0;}

    img {
      object-fit: cover;
      aspect-ratio: 1;
      border: 2px solid black;
      border-radius: 999px;
    }

While the improved version here still doesn't look very good, CSS can be used to create very complex and compelling visual designs.

As an example, this is the Netflix login page with and without CSS. The HTML alone provides a basic skeleton, with recognisable text hierarchy and input fields. However the addition of CSS is what allows the site to establish its branding and improve the user experience.

Javascript

I don't want to get deep into Javascript, because it isn't relevant to understanding the contents of this blog.

However, alongside HTML/CSS, Javascript is another core aspect to web design and development.

Javascript is a programming language used to add interactivity and functionality to web pages. Without Javascript, web pages are essentially just digital posters. We could read and view content, but without Javascript there is little interactivity.

For the purposes of this project, I used a componentization framework called Svelte / Sveltekit. This meant I could bundle up the code for each individual part of the comic, and recycle them for each page.

Speech bubbles using HTML and CSS

Managing the speech bubbles was the first major hurdle for this project.

These were my main priorities:

• Text must be accessible
• Encoded as real text, not imagery or graphics
• Bubble must automatically grow and shrink to fit its contents
• Translations need this, as the amount of text may differ
• Accessibility requires this, so the user can adjust font and text size
• However bubble size should also be customizable to an extent
• Bubble must look like a traditional, hand-drawn speech bubble
• Organic shape, not too geometric
• Variance in the line weight, not too uniform
• Ability to make each bubble look distinct from those around it
• Pointer must be visually connected with the bubble
• Start of the pointer must position itself centrally, automatically
• Pointer must be customizable in shape and direction

Looking at other examples of CSS speech bubbles, often these were blocky with triangular pointers, which wasn't what I wanted. Ones which looked decent were often static, meaning they were essentially background images with text superimposed on top, or worse, text baked into the image itself.

In order to create what I wanted, I had to build from the ground up.

Shape of the bubble

The outer shape of the speech bubble is essentially a box. Using CSS we can add space around the edges of the box, and round the corners off to make it bubble-shaped.

However, when we round off the corners, the box looks geometric and artificial.

This was a problem, because I wanted to recreate the exact shape and 'feel' of a printed comic book.

To achieve a more 'wonky', misshapen speech bubble, I used advanced features of the border-radius property in CSS.

    
/* This one is too geometric: */

    #bubble-a {  
    border-radius: 100%;} 

/* These two are more organic: */

    #bubble-b {  
    border-radius: 48% 42% 50% 47% / 48% 45% 48% 50%;}

    #bubble-c {  
    border-radius: 46% 47% 47% 53% / 50% 43% 50% 48%;}

By setting the border radius to be asymmetrical, and making each corner a slightly different curve, this creates a much more hand-drawn effect. MDN has a further explanation of this CSS trick if you're interested in how exactly this works.

Size of the bubble

By default, a container like the box holding our speech text, will try to resize itself based on the length of its content.

However, it won't always grow in the way we want it to, and may become misshapen when the text is too long.

To manage this, we can add a maximum width to the bubble, after which it will wrap the text around to the next line.

However, when creating a comic, you may want more control over where exactly the text wraps. In this example, I only want 'Hello world!' on the initial line.

To achieve this, one option is to add line-breaks into the HTML.

    
    Hello world! It's me, your designer.

    Hello world! <br/> It's me, your designer.

While there are drawbacks, I like this method, as it gives the creator of each speech bubble more explicit control over how the text displays.