The code in Example 6.1, “Transcript Markup” would produce the following HTML:
Example 6.3. Transcript HTML Output
<tablecellpadding="0" cellspacing="0" border="0" class="transcript"
id="transcript_comic-for-january-4-2009
" style="display:none;"> <tr class="transcript_line">
<td class="transcript_character">Bob</td>
<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>
</tr> <tr class="transcript_line"> <td colspan="2" class="transcript_arbitrary">I just made this tag up. It's just that easy!</td>
</tr> </table>
|
By default, the transcript is displayed as an HTML table. |
|
|
The entire table is given the CSS class |
|
|
The transcript for each post is given a unique CSS ID in the form |
|
|
Each line in the transcript is given the CSS class |
|
|
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 |
|
|
A line of description contains only one column, which is given the CSS class |
|
|
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 |
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.