: Publishing A Graphic Novel Online? My employer runs a writing contest every year. Every year we publish the top three results in each category to our website. No big deal. This year, a category

@Alves908

That's a thought provoking question, and your answers are varied quite a bit. Choosing the best answer will be pretty subjective, but the discussion and differences between the answers will be useful to everyone.

That being said, here's an idea...

Here is my interpretation of the requirements:


Make it fit the existing site's structure, specifically the paging paradigm
Present to the browser actual text of the story as text ("accessibility"). This also enables other features such as external indexing of the pages by search engines, and site search (if you have it), on-page SEO.
Maintain the artistic integrity: present the text within each cell as it was handwritten by the artist.
Present, if possible, all of the cells as they were drawn together on the page. [Are the little boxes called "cells" and do you have them? I'm visioning comic-book like artwork, but it could be something different.]


Given those things, I think the best approach would be to present to the user two "frames" of material (you could use iFrames if you wish, but it's not necessary); I'm not suggesting the use of HTML frames.


First "frame" of content: a scaled down view of the entire page as a single image, not meant to be read, but used to both show the complete composition and also serve as an aid to the navigation of the book.
Second "frame" of content: a large image of each comic cell, accompanied by the text that is part of that cell's image, but as text. Give the user the option to hide the text, but display the text as a default.


The user would page through the cells by clicking, perhaps, a triangle pointing right, allowing them to go back a cell with a triangle pointing left.

I'd also suggest two more thumbnails: an even smaller view of the image of the next page (with more cells), and an equally small view of the image of the previous page. This way, the user can navigate to the actual pages of the book, not just clicking cell by cell.

I think that it's worth considering, also, to hide the rest of your site elements. You could make this an option the user could click (like hiding the text), or you could just hide the typical site UI upon the opening of the book -- immersing the user in the fullest experience of the graphic novel online. You could also offer a toggle of the site UI by giving a site logo/button [rest of site: SHOW | HIDE].

Here is why I suggest this approach:


You avoid the incorporation of a document or file (such as PDF, DjVu).
You provide "accessibility" but not only for the purpose of accessibility, you get the text of the content onto the page which is obviously good for search, etc.
You present the user with as much of the artistic feel as possible -- showing the full page and an enlarged view of each cell.
If you hide the rest of your site's UI, the reader is immersed in the novel, losing the feel of browsing a website. IMO this helps maintain the artistic integrity.
It doesn't require HTML5 or a technology that limits the number of potential readers.
You don't put the novel's content inside alt text.

Vote Up Vote Down

@Chiappetta492

HTML has a longdesc attribute that points to the URL of a 'long description'. Rather than lots of alt tags, why not use that?

Vote Up Vote Down

@Candy875

Beware about one detail: JPGs when rendering text can be terrible. You will need to set your graphic software to export at a very high quality. If done so, is an ok route. PDF crashes/takes time to load in many browsers/machines, actually. But sometimes is the only option, it depends on the content, audience... The problem I see with HTML 5 is seems not yet fully adopted... You can go for some advanced flash solution, too (I just answered a pdf to flash flipbook question here)

If going the JPG route, I'd advice irfanview.com(allows also making small jpgs in Ks), there you find a free utility great as a desktop image viewer but also batch converter with batch operations and filters. That could be essential for the JPG route.

edit: You speak about the "leave as text" option. If count on some programmer to help, go for some solution to proccess the text data and images to output formatted html, and that's all. I think there are some free utilities like this available, that export html. That'd remove the jpg text issue (but even if go for the all jpg route, actually, a big jpg might take less to load than a bloated pdf or other solution, and would be less crashy...)

Vote Up Vote Down

@Steve110

You should take a look at "Never Mind The Bullets", done using HTML5 and canvas. I'm not sure how accessible it is, but you might find it gives you some ideas. Keep in mind, however, that the HTML5 approach rules out IE8 and below (IE9 is fine). Depending on your audience, that could be a non-starter.

Vote Up Vote Down

@Lee4591628

Why not go for HTML5 new elements?

About accessibility, you can count on many little scripts (like the one made by Remy Sharp, and available at whatwg.org, on examples section) or libraries (modernizr).

Now my solution: scan everything for jpeg, use figure element with figcaption to add all images as img tags as keep it accessible, and of course, using alt text. Read HTML5 section about using alt attribute. It has some nice examples of how this can be helpful for accessibility.

EDIT

For those looking for really really high accessible level let's drop all new resources we can count on, like HTML5 new elements, CSS @font -face, back padding text to hide... Let's get down to raw POSH (Plain Old Semantic HTML).

I'd go with the following extreme raw solution: make jpegs, and use the alt attribute to describe everything as good as it needs to be, in the same way in the HTML5 guide, but enhanced, ie very very descritive texts (there is no limit to alt attribute size).

<img src='novel15/image24.jpg' alt='As Mr. Smith enters the room, he sees his brother with a knife stabbed in the chest and, in with a horror face scream out loud: "Nooooooooooooooo!"'>

Vote Up Vote Down

@Lee4591628

I saw some really crazy graphic novel + canvas experiments from Google a while ago. All the text was plain text (great accessiblity) but all the images could be plainly seen. I can't seem to find it, but 20 Things I Learned shows kind of what I mean.

I'd say that's overkill for what you want to do, so I'd do this:

<img src="page1.jpg" alt="Page 1" width="800" height="1000" />
<div class="hidden">
<h1>Panel 1</h1>
<p>Name1: Lorem ipsum....</p>
<p>Name2: Lorem ipsum....</p>
<strong>WOOSH</strong><!-- Sound Effect -->
<h1>Panel 2</h1>
<p>Name1: <em>Lorem ipsum....</em><!-- Emphasis on words -->
<!-- And so on -->
</div>


And I'd style the div as such:

.hidden { text-indent: -9999em; }


In this way, you have the image plainly visible for seeing people to view and the plain text for screen readers to read aloud. One could also put a transcription of the comic in the alt tag, but in my way, you are able to put more semantic meaning into the transcription.

You could also add some Javascript to toggle the text-indent to make it visible if people hard of seeing want to see it.

Vote Up Vote Down

@Kaufman445

Are you familiar with the DjVu format?

If not, this link might be useful for you. Also, here is the official website which is also a great resource.

Vote Up Vote Down

@Shanna517

Oof, that's a tough one. It's really hard to present something like a graphic novel with good accessibility. Images are a lot better than PDF though, you're right about that one. Also, I wouldn't recommend putting the entire description of each pane as an alt text, let alone entire page. I think the best way would be to add paragraphs with transcripts and use the alt as an indicator of what the picture is (alt="graphic novel x, page y").

Maybe it'd be an idea to have it read aloud and provide it as an audio file as well?

Vote Up Vote Down