Our Comic Book Markup Language (CBML)

The early stages of this project consisted of developing our Comic Book Markup Language. This phase was the core of our project as it was the foundation for further text analysis, or should we say "comic" analysis! Each panel on a page was wrapped in a <cbml:panel> element that contains speech bubbles <cbml:balloon> and panel descriptions <note>. On occasion, the speech bubble would be drawn differently to indicate "tone", in these instances we used the <rend> attribute so the speech bubble from the comic book was truly modeled within the CBML. Comic Books are almost entirely visual, so a panel description with the <note> element along with the attribute value <type="panelDesc">was included for each panel. Addtionally, we used <hi> elements to analyze the text within the speech bubbles for further specification; attribute values such as <rend="bold"> and <ana="ono"> were inserted in each element to indicate emphasis on words, onomatopoeia, etc. Upon analyzing "Bone", the team merged our unique insights to effectively analyze the comic book.

                <cbml:panel n="4" characters="#SB #PB">
                    <cbml:balloon type="speech" who="#SB"> … Oh, well… I guess you can whine
                        all you <hi rend="bold">want</hi>, when yer th’ <hi rend="bold">richest</hi> 
                        guy in th’ whole town. 
                    </cbml:balloon>
                    <cbml:balloon type="speech" who="#SB"> Oops! Silly me. <hi rend="bold">Ex</hi>
                        -richest! 
                    </cbml:balloon>
                    <cbml:balloon type="speech" who="#PB" rend="sqBubble">
                        <hi rend="bold" ana="ono">AAAH!</hi>
                    </cbml:balloon>
                    <note type="panelDesc"> smiley talking </note>
                 </cbml:panel>

Our Modal Extensible Stylesheet Language Transformation

To bring our XML to life, we created a modal XSLT that would productively "translate" our XML to HTML to showcase our comic book analysis. Keeping a user's experience in mind, our table contains the number of pages from Chapter 1 of "Bone", the descriptions for each page, the number of panels on each page. Here's a snippet of how we pulled the number of panels from each page to input in our table:

                <xsl:template match="div[@type='page']" mode="toc">
                    <tr>
                        <td>
                            <a href="#page-{position()}">Page <xsl:value-of select="@n"/>
                            </a>
                        </td>
                        <td>
                            <xsl:value-of select="string-join(distinct-values(cbml:panel/@id), ', ')" />
                        </td>
                    </tr>
                </xsl:template>