Comic Transcripts

You might think that a comic transcript is a waste of time. Really, the text is right there and plain to see in the comic. Most of us might not want to waste screen real estate on something that duplicates what we can already see.

However, some readers have visual difficulties and a transcript can help them enjoy your comic. By having a transcript, you also create more text for search engines, which can increase the number of visitors. You won’t capture a majority of them as regular readers, but adding just one or two readers per day can make a difference at the end of a year. (And Google is starting to penalize long alt tag entries, FYI.)

Peanuts first strip

(Click here to toggle the transcript)

Panel 1: (Shermy is seated with Patty on front steps leading to the sidewalk)
Shermy “Well! Here comes Ol’ Charlie Brown.”

Panel 2: (Charlie Brown runs by with a blissful smile on his face)
Shermy “Good Ol’ Charlie Brown… Yes, Sir!”

Panel 3: (Shermy and Patty looking off panel, still watching Charlie Brown as he runs away
Shermy “Good Ol’ Charlie Brown…”

Panel 4: (Patty looks questioningly at Shermy as he grimaces)
Shermy “Oh, how I hate him!”

So how do you add transcripts?

If you are like me, and you don’t use Comic Press or don’t want to work with OhNoRobot or figure out whatever this Google code page is talking about, here is a pretty painless solution to install. The transcripts will toggle on and off – when JavaScript is disabled, the content is automatically shown and the button does not appear.

1. Add the following code just before the </head> in your web page. If you are using WordPress, go to Appearance>Editor and then choose your header.php file.

<!– Transcripts Code–>
<script src=”” type=”text/javascript”></script>
<script type=”text/javascript”>
$(‘.transcripts’).hide().before(‘<a href=”#” id=”toggle-transcripts”>Open/Close</a>’);
$(‘a#toggle-transcripts’).click(function() {
return false;
<!– end Transcripts –>

2. Put this code where you want your transcript to show up in your blog posts. (If you are using a WordPress blog or WYSIWYG editor, make sure you are inputting the code as HTML, not visual.)

<div class=”transcripts”>
Your transcript goes here…


Of course, you can format the transcript as you wish. You can also adjust the word transcript, the speed at which the transcript open and closes by adjusting the slide toggle (1000) number in the header script. It is also possible to style the transcript text as a button, if you like.

For more information, see the Original Resource With Demo and Options


  1. This is really good advice. I have been wondering how to do this — because I am concerned about just throwing a ton of keywords at the end of each post. This is way better. Thanks for posting.

  2. delos

    It seemed like a really useful way to get transcripts into a web page. You should also be able to ‘hide’ images, as well so one might be able to use that to offer alternate endings, etc.

Comments are closed.