ScripthelperX, is a browser-based utility I originally created many years ago.  I’m frankly surprised it still works.  The main way it’s different from other scriptwriting editors is that you never actually type on the screen where you see the rendered script, you type everything in floating palettes and it prompts you for the next logical thing – which makes it nice for anyone who isn’t terribly familiar with scriptwriting.

ScriptHelperX Screenshot

ScriptHelperX Screenshot

Like most scriptwriting tools, though, it is geared more toward film-style screenplay format than anything else, but it does support writing comic book scripts too – it’s just not obvious that it does. Which is why I’m writing this post with some tips. 🙂

TRANSITION → STORYPAGE

You don’t really need transitions in a comic book script. The “transition” is the reader turning the page. But what you DO need is something that tells the artist when that’s going to happen. It’s called a “storypage” (or “story page” if you prefer), which is to distinguish it from a “script page” which is a physical page in the script.

On the “Transitions” palette go all the way to the last item which is “STORYPAGE.” This will indicate a new comic book page along with an automatically incremented page number like this:

PAGE ONE

Optionally you can also indicate how many panels this comic book page has by entering it into the “Multimedia” box, which will output it in parenthesis like so:

PAGE ONE (four panels)

If you need to indicate a page with only one panel on it enter “Splash” or “Splash Page” in the Multimedia box:

PAGE ONE (Splash Page)

The easiest way to indicate a two-page spread with cross-over artwork is to just to make two-page entries in a row and optionally enter “SPREAD” or “TWO-PAGE SPREAD” or “CROSSOVER” in the Multimedia box:

PAGE SEVEN

PAGE EIGHT (SPREAD)

TIP: If you find you need to reset the auto-incrementing page count you can do this in the web browser’s Developer Tools. The easiest way to open these is to right click inside the Transition palette window and select “Inspect” or “Inspect Element” (depending on the browser). In the Developer Tools, there is a “Console” which will allow you to manually enter javascript code. To reset the Storypage count type in the value of the last storypage (because it will be auto-incremented one more when the next stuff is written into the Script Window):

opener.comicPage = 0

And hit Enter. That would reset the counter to zero, so the next time you use “STORYPAGE” in the Transition palette it will write “PAGE ONE” into the Script Window.

SLUGLINE → PANEL

You don’t really need a slugline either, though there’s technically nothing wrong with using one, it’s probably more important to indicate a new “panel” than a scene. In the INT/EXT drop-down select “PANEL” (the last thing on the list). The other items will be grayed out because they don’t matter when you select the panel option. It uses the scene number as the panel number like so:

Panel 1

Remember that the scene number auto-increments! So when you start a new Storypage you’re going to want to reset the scene number in the Slug palette.

PAGE ONE

Panel 1

Exasperated the Green Onion leans against the wall with his arms crossed over his chest.

Panel 2

Shallot the Boy Odor steps forward with a raised hand, about to speak.

Panel 3

The Green Onion, grimacing, raises his hand indicating for Shallot not to speak.

Which starts with the Transition palette, then the Slug, then the Action

ACTION → PANEL

Some people don’t like that “Panel 1” arrangement, they like to indicate panels as part of the description of what is in the panel. The “Action” palette is probably the most generic of the palettes, so it’s easy to let it do double-duty to indicate panels like this:

PAGE ONE

1) Exasperated the Green Onion leans against the wall with his arms crossed over his chest.

2) Shallot the Boy Odor steps forward with a raised hand, about to speak.

3) The Green Onion, grimacing, raises his hand indicating for Shallot not to speak.

This uses the Transition palette and then the Action palette. Some people like to use “dot” notation for panels that indicate both page and panel which would look like “1.1, 1.2, 1.3” or they just like to spell out panel and number as part of the description like this:

PAGE ONE

Panel 1. Exasperated the Green Onion leans against the wall with his arms crossed over his chest.

Panel 2. Shallot the Boy Odor steps forward with a raised hand, about to speak.

Panel 3. The Green Onion, grimacing, raises his hand indicating for Shallot not to speak.

(you just have to wrap the “Panel #” in <b>…</b> – more on styling below).

CHARACTER → CAPTION

Fairly often in comics, you’ll see captions on the panels. These are typically indicated in the script in the same way as dialogue, so just use the Dialogue palette to create them by entering the word “Caption” as the character name.

CAPTION
London, England 1944

Some writers like to indicate a difference between captions that convey information and those that indicate a voice over by a character. Any of these formats should be fine:

CAPTION (CHARACTER)

CAP/CHARACTER

CHARACTER (V.O.)

NARRATION

NARRATION (CHARACTER)

If only one character ever does a voice over or monologue you don’t really need to include the character name. If the dialogue continues from a word balloon into a caption you should put quotation marks around it like so:

GREEN ONION
Another job well done. . .

CAP/GREEN ONION
“..until the next one.”

And, of course, there are also “end captions” which, unsurprisingly come at the end of the script. Enter those the same way:

END CAPTION
The End

END CAPTION
To be continued!

WRYLIE → BALLOON

Comic books indicate the “voice” of the character by the shape of the word balloon. Use the “Wrylie” to indicate the type of balloon the artist/letterer should use:

  • thought : balloon that looks like a cloud with bubbles for a tail.
  • whisper : balloon is usually outlined in dashes instead of a solid line.
  • small : literally a small balloon and/or small text.
  • burst : a balloon with spikes indicating someone is yelling.
  • weak : balloon typically has a wavy tail pointing to the speaker.
  • jagged : balloon tail zig-zags, typically to indicate a voice over a radio or other device.
  • link/linked : indicates the balloon has a connector to the previous speech balloon.

Which renders in the script like this:

GREEN ONION
(thought)
Can’t let him know my only power is my odor.

RED RADISH
If it isn’t the “Thin Skinned” avenger–

RED RADISH

(linked)
–prepare to be PEELED!

Notice that when you have dialogue that carries over from one balloon to another you end with two dashes “- -” and then start the next part with two dashes.

If you think it looks too odd to have the same character name repeated to indicate another word balloon that is linked to the first, there is a really non-obvious way to do that. The “Add Beat” palette doesn’t have to insert “(beat)” it can insert pretty much anything! In the descriptive text at the top of the palette, the word “beat” is actually editable, so you can change it to say “link” instead, which would render that exchange like this:

GREEN ONION
(thought)
Can’t let him know my only power is my odor.

RED RADISH
If it isn’t the “Thin Skinned” avenger–

(linked)
–prepare to be PEELED!

Not much different, sure, but if it looks better to you then go with it.

OFF-PANEL CHARACTERS

There may also be times that a character isn’t narrating, but is speaking and isn’t in the panel. To indicate that simply select “Off Panel” from the “Voice” drop-down in the Dialogue palette, which would render like this:

GREEN ONION (O.P.)
Hey person in the panel, toss me that thing I need.

Alternatively, if you think it’s important to indicate which SIDE of the panel the character is off of and speaking from you can do it with the “Wrylie” box instead like this:

GREEN ONION
(off-panel right)
Hey person in the panel, throw that to the right!

STYLING TEXT

You can style text with HTML code anywhere in the ScriptHelper entry boxes. Emphasis is typically indicated by underlining the text in a screenplay format, but in a comic book script you’re actually telling the person doing the lettering how you think it should be styled and they’ll likely render it in the word balloon exactly as you wrote it.

GREEN ONION
Hey! Don’t bring that stuff into my city.

In the dialogue box you’d enter that text like this:

<b>Hey!</b> Don’t bring <u>that</u> stuff into <i>my</i> city.

ART NOTES

It’s not uncommon for the comic book script writer to include notes or directions for the artist to help them in drawing complicated panels. In the “Action” palette you can enter it like this:

<b>ART NOTE:</b> Here are special instructions or clarifications for the artist.

Which will render in the script like this:

ART NOTE: Here are special instructions or clarifications for the artist.

It’s also no uncommon for the notes to the artist to take the form of links to reference material online, like a Google Image search or something the writer posted on their Flickr account or wherever. Here’s how to accomplish that, again in the “Action” palette:

<b>ART NOTE:</b> This takes place in the Badlands:<br>
https://en.wikipedia.org/wiki/Badlands<br>
http://badlandsfeatures.com/badlands.jpg

That’s fine if the artist isn’t going to see a digital version of the script (HTML or PDF) but if they will you’ll probably want to give them actual clickable links:

<b>ART NOTE:</b> This takes place in the Badlands:<br>
<a href=”https://en.wikipedia.org/wiki/Badlands”>https://en.wikipedia.org/wiki/Badlands</a><br>
<a href=”http://badlandsfeatures.com/badlands.jpg”>http://badlandsfeatures.com/badlands.jpg</a>

That would look like this in the script:

ART NOTE: This takes place in the Badlands:
https://en.wikipedia.org/wiki/Badlands
http://badlandsfeatures.com/badlands.jpg

As you can see the <br> tags make soft return line breaks, putting the link URLs inside <a> tags makes them clickable in the HTML version of your script. If you want to make sure the links open in another browser tab or window add a link target like so:

<a href=”https://en.wikipedia.org/wiki/Badlands” target=”_blank”>…</a>

It’s probably a good idea to make them open in a new window since they then won’t lose their place in the script.

CONCLUSION

Those are the differences in script formatting I can think of right now and how to accomplish them in ScriptHelperX. I’ll update this post if any others come to mind.

I’m currently doing research to determine whether or not it’s worth the time and effort to update ScriptHelperX, which hasn’t had any major updates in 14 years. But until I do (if I do) feel free to use ScriptHelperX to rough draft your comic book script ideas right in your web browser.


Note: the image at the top of this post is of a page from a script by Andy Diggle which you can read in its entirety at the Comic Book Script Archive website.