Publishing A Graphic Novel Online?

Question

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 has been added for a graphic novel.

What standards and best practises are out there for publishing this to our site? I'm assuming a PDF would be terrible for accessibility. My gut instinct is just to scan it and put up JPGs. Would I be best to transcribe the text into paragraphs, or just leave it as alt text?

Any help would be appreciated.

UPDATE: I think my final solution is going to have bits of pieces of the answers below.

• Options for both view and download
• Download will fire up a PDF for people looking for print quality
• View will option a new window/tab with the header stripped down to just corporate branding.
• View will have a full page JPG of the current page, and toggles for naving back and forth.
• View will also have plain text, paragraph based explanation of the scene(s) on the page. This text will be hidden from browsers with CSS.
• View images will have alt text just defining what the image is (IE title and page).

I believe this will cover all of the bases, while still being relatively pain free to post.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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?

Answer 5

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 http://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!"'>

Answer 6

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...)

Answer 7

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.

Answer 8

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.

1. 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.
2. 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.