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>
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.
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.
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>
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>
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.
This is your first real page. Every page in this book format starts with the same line:
</div><div 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> |
Red Dead Virgoby 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:
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' >
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'>> 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>
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.
<div class='page' style='width:800px;'>
<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).