Transcript Output

The code in Example 6.1, “Transcript Markup” would produce the following HTML:

Example 6.3. Transcript HTML Output

<table1 cellpadding="0" cellspacing="0" border="0" class="transcript"2 id="transcript_comic-for-january-4-20093" style="display:none;">
		<tr class="transcript_line">4
			<td class="transcript_character">Bob</td>5
			<td class="transcript_dialogue">Hey, how's it going?</td>
		</tr>
		<tr class="transcript_line">
			<td class="transcript_character">Jim</td>
			<td class="transcript_dialogue">Hey, what's up?</td>
		</tr>
		<tr class="transcript_line">
			<td colspan="2" class="transcript_description">Bob hauls off and decks Jim.</td>6
		</tr>
		<tr class="transcript_line">
			<td colspan="2" class="transcript_arbitrary">I just made this tag up. It's just that easy!</td>7
		</tr>
	</table>

1

By default, the transcript is displayed as an HTML table.

2

The entire table is given the CSS class transcript

3

The transcript for each post is given a unique CSS ID in the form transcript_<post slug>.

4

Each line in the transcript is given the CSS class transcript_line.

5

Most rows in a transcript table have two columns: one for the character name, the other for the dialogue. These are given CSS classes of transcript_character and transcript_dialogue, respectively.

6

A line of description contains only one column, which is given the CSS class transcript_description.

7

If you've put a self-created tag in your transcript markup, this is treated just like description, with one column per row, and given a class name transcript_<tag name>. This allows you to create multiple custom tags and style them all differently.


As you can see, the output is an HTML table. This is the default behavior, but using arguments to the the_transcript template tag, you can change this to use divs and spans instead. See the_transcript for details. The same CSS classes are used when the transcript is shown as a div.