< front page < stories

Making your own comic books

I can create all-in-one comic book *.html files, and soon so can you! The result will be a single interactive *.html file with illustrations, fancy text, page turning, no larger than if you did the same thing in Flash but much better looking.

This method will not work on Internet Explorer 7 nor earlier, but it will work on any other browser made since 2001.

This document was written by Moses Moore. <moc.iazom@sesom>

What you'll need before you start:

Step 1: pagebreaks

Break up the text of your story into pages. Maybe this is already done, or maybe your story is one long scroll of text. There's no hard rule for how to break stories into digestable pieces -- best to do it between paragraphs, where the subject changes between them, or just before a big reveal. You don't have to physically break up the text of your story, just remember where are the good places for page-breaks. You might even do this step only for a few pages at first, and do the rest as you go along.

Step 2: the title

Time to start the HTML stuff. Open up your text editor, start a new document that ends with ".html" as the filename. Start it by pasting the following:

<html><head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <title>Karkatquest by Kite</title>

Change the part in red to the title of your story. This is what will appear in the titlebar of the browser when reading this comicbook, and will be the default bookmark name if someone bookmarks your story.

Step 3: the hunk of code

Next, copy and paste this big hunk of stuff into your document. It's not meant to be easy to understand, only easy to copy. I might expand it and explain the pieces later, for people who want to learn about javascript.

<script type="text/javascript"> var prev_arrow=' <<==';var next_arrow='==>> ';var pages;var page=0,started=false,showingall=false;function AddEvent(e,a,b){if(e.attachEvent){e.attachEvent("on"+a,function(){b.call(e)})}else if(e.addEventListener){e.addEventListener(a,b,false)}}function dce(t,a){var e=document.createElement(t);for(var i in a){e.setAttribute(i,a[i])}return e}function cb_show(p){if(p==null){p=0}if(p<0||p>pages.length){throw new RangeError;}for(var i=0;i<pages.length;i++){pages[i].style.display='none'}window.scrollTo((document.getElementsByTagName('div')[0].offsetLeft),0);pages[p].style.display='block';page=p;update_nav();return false;}function cb_next(){if(page+1<pages.length){cb_show(page+1)}}function cb_prev(){if(page>0){cb_show(page-1)}}function mknav(l){var t,tr,td;t=dce('table',{'border':0,'cellspacing':0,'cellpadding':0,'class':'navbar'});tr=dce('tr',{});td=dce('td',{'align':'left'});td.innerHTML=prev_arrow;AddEvent(td,'click',cb_prev);tr.appendChild(td);if(l=='foot'){td=dce('td',{'align':'center','id':'pagenum'});td.innerHTML='< 0/0 >';tr.appendChild(td)}td=dce('td',{'align':'right'});td.innerHTML=next_arrow;AddEvent(td,'click',cb_next);tr.appendChild(td);t.appendChild(tr);return t}function update_nav(){var a=document.getElementById('pagenum');if(a){a.innerHTML='< '+page+'/'+(pages.length-1)+' >'}}function cb_init(){var a=document.getElementsByTagName('div');pages=new Array;for(var i=0;i<a.length;i++){if(a[i].className=='page'){pages.push(a[i])}}document.getElementById('loading').style.display='none';if(!started){started=true;var b=document.getElementsByTagName('body')[0];b.insertBefore(mknav('head'),b.firstChild);b.appendChild(mknav('foot'));cb_show(0)}else{update_nav()}}AddEvent(window,'load',cb_init); </script>

Step 4: styles

Now we need to define some formats for how the comic book is going to look. In webpages, this would be called the stylesheet, as in a sheet of styles the rest of the webpage can use. First we need to define some styles that the comic book MUST have

<style type="text/css">
.page { display:none; } /* required */
.loading{ margin:3em auto auto auto; background:white; }
.navbar { color:grey; font-family:sans-serif; z-index:-1; width:100%; height:3em; }
.navbar td:hover { color:white; background:grey; }
body { background:white; width:640px; margin:0em auto 0em auto; }

Again, you can change the parts in red to easily suit your needs. The 'loading' style is used for what the reader will see while the page is being downloaded; more on that soon. The 'navbar' styles are for the arrows at the top and bottom used for turning pages. The 'body' is for all the visible parts of the webpage; think of it as the style for the "book", though you can override this style inside each "page."

Now that we have the necessary styles defined, it's time to configure the frequently-used styles. It's easier to define them here as class styles (names beginning with ".") instead of using <font> or <span style=''> tags over and over again in the pages.

Here's some examples styles I used for "Red Dead Virgo." I needed constant margins around each illustration (the 'centerpicture' class), and I wanted the text on the introduction page to be black and justified to the margins (the 'intro' class).

.centerpicture {display:block; margin-top:1.5em; margin-bottom:1.5em; }
.intro { color:black; text-align:justify; }

In the Red Dead Virgo story, each character uses a different colour when talking, and I didn't want to keep track of all the colours, so I defined a style for each character based on the initials of their names

.ga { color:#ff0000; font-weight:bold; font-family:courier,monospace; }
.ag { color:#783f04; font-weight:bold; font-family:courier,monospace; }
.cc { color:#45818e; font-weight:bold; font-family:courier,monospace; }

In this case, I used the red-green-blue numbers for the exact colours instead of using colour names. I also changed the font to be bold and typewriter-like just like what is used in the webcomic these characters are from. Later, when typing the dialog for these character, I can write it
<p class='cc'>like this each time</p>
which is so much easier than typing it
<p style='color:#45818e;font-weight:bold;font-family:courier,monospace;'>long like this</p>

When you're done, end the styles section with

</style>
</head>

Step 5: loading page

The all-in-one HTML document is going to be large -- especially if there are many pictures. "Red Dead Virgo" is 166 pages and 2 MB in size, but light on pictures. "Ultimate Darkness" is all large pictures, 54 pages and 4 MB. That can take a while to download, so we need to show the user something while they wait. This will be the first "page" of the book, though it will never be seen again once the download is complete.

<body><div id='loading' class='loading'>
<p>Please wait, the book is downloading ...</p>

You can put whatever message you want here, but it's best to keep it short, and remember that this page will not be seen again after the download is finished.

Step 6: the front page

This is your first real page. Every page in this book format starts with the same line:

</div>&ltdiv class='page'>

This is the 'page-break' that marks the end of a page, and the start of a new one. In this case, it's the end of the "loading" page, and the start of the first page.

The first page should always have the story's title, and the names of the people who wrote the story (authors & illustrators). It should also have something very short that explains how to turn the pages. Here is an example (what I type is on the left, how it looks is on the right):

<h1>Red Dead Virgo</h1>
<p>by <b>adamantApoplectic</b></p>
<p>Use the arrows at the top of each page to navigate</p>

Red Dead Virgo

by adamantApoplectic

Use the arrows at the top of each page to navigate

You'll notice every paragraph is between a pair of <tag></tag> pairs. If you're used to writing HTML, this isn't new, and you can skip ahead to where I talk about adding pictures. If you're new to HTML, here's a crash course:

  • Everything is marked with a tag before and after for it's purpose in the document. The 'M' in 'HTML' stands for 'markup'.
  • You've may have already noticed that each page starts with a <div class='page'> tag and ends with a </div> tag. That's because each page of the story is a division of the document as a whole, and we only want to show one division at a time.
  • The characters < , > , and & are used for tags, so if you mention them in your story you will need to replace them with &lt; , &gt; and &amp; respectively.
  • The example lines above have more tags:
    • <h1> for the headline that is most or 1st important on the page.
    • <p> for each paragraph on the page.
    • <b> to emphasize something in bold weight
  • Other tags you will be find useful are:
    • <center> to center text on the page
    • <i> and <u> and <s> for italics and underline and strikeout text.
    • <span style='color:red'> for making just a few words turn red instead of the whole paragraph
    • <br> to end a line without ending a paragraph. This tag isn't like the others, it doesn't surround text, so you don't need a </br> tag to follow it.

Step 8: adding pictures

Inserting images into a page also uses tags, though not a start/end pair of tags. Instead, it's a <img> tag all it's own to show where a picture belongs in the text. Usually an image tag would look like this:

<img src='https://nepeta.mozai.com/i/ArsenicCatnip.png'>

but that requires having a seperate image file on a webserver somewhere, and we don't want that. We want all the images to be included in this one document. So instead we're going to use something called a datauri.

Open another webbrowser window/tab, and load up the page with the image-to-datauri tool. You remembered to save a copy to your local computer, right? It uses pure javascript, so you don't need to be online to use it.

Click the "Browse..." or "Choose File..." button, and right away you will see some text appear that looks like this:

<img title='current-status.jpg' src='
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJT
...
IUJNPbMXFzgSfZcXvJbqQ0fGP8Ao872d+q8vrR0KK+y8q9zP6LP/9k=
' >
and a thumbnail image on the right side so you can be sure this is the correct picture. Copy-and-paste the text into your document where you want the picture to be.

With pictures, you usually want them in the same place on every page; so it's best to make a style for them. For the illustrations in the MSPA fan adventures, I used this style most often to center the image on the page:

 .centerpicture{display:block;margin-left:auto;margin-right:auto;}
Then I assigned this style to each image with the "class" attribute, like so: 
<img class='centerpicture' src='data:image/png;base64,
...
' title='gamzee_page14.png' >

For the author portraits, where the image is on the left or right side with text wrapping around it, I would use 'float' in the style, and give it a little extra margin on the other side. Since I only use it for one image, I would put the style directly in the <img> tag -- but this is a shortcut, only use this for a style you use once and once only.

<img style='float:right;margin-left:1em;' src='data:image/png;base64
...
' title='kite_self-portrait.png' >

Step 9: all the rest of the pages

Same as the first page, really. Here's an example of what a whole page might look like, with the parts that actually appear on the page highlighted:

</div><div class='page'>
<img class='centerpicture' src='data:image/gif;base64,
R0lGODlhigL0AfIBAMPDw////wAAAcbGxkUAdwAAAAAAAAAAACH5BAQUAAAAIf8LTkVUU0NBUEUy
...
45BHLvnklFdu+eVWJwAAOw==' alt='Gamzee_005.gif' >

<p class='command'>&gt; Gamzee: Get a broom to SMASH THAT SPIDER. </p>

<p class='narrator'>HONK HONK HONK!!
You drub the spider with your trusty broom mercilessly!<br>
Unfortunately, it has no effect. Unless you count how pissed off it's making her.</p>

Step 10: after the last page

The last line after your last page will be this:

</div></body></html>

Those are the tags that end the page DIVision, end the book viewable BODY part of the document, and end the HTML document itself. Time to save the file, and read it yourself to make sure it looks okay.

Step n+1: Troubleshooting

All my pages after page XX are blank!
Check page XX to make sure every <p> and <div> tag has a matching </p> and </div> tag.
I have a wide-screen image I need for this page; 600 pixels makes it too small
600 pixels wide isn't a hard rule, it's a suggestion. Remember that not everyone reading your story will have a big and wide monitor -- they might be using a netbook, or even an iPad or smartphone. You can make all the pages wider by changing the .page style at the start of the document. If you need to make a single page wider than the rest (to fit the larger image), you can add a one-time style to the <div class='page'> that starts the page, like so: 
<div class='page' style='width:800px;'>
I have a wide image, but I don't want to make the page wider. Instead of centering on the page, the left side matches the text and the right side spills out.
Use a one-time style to give the picture a "negative margin" so it is centred on the page again. Use "px" after the number to measure in pixels. 
<img class='centerpicture' style='margin-left:-80px' src='...' >

last update: 2011-07-30

TODO: add a loading progress meter to the big chunk of javascript, write more troubleshooting q/a, make the arrows fade out on first/last pages, how to do table of contents links inside the book (see RDV).