ARTWORKABLE

Follies in Project Design

Free-Form Poetry vs CSS
Sep 20, 2021

A continuation of my reflection on how poetic structure and HTML converge.

I wrote a free-form poem a few years ago by the name of Host. I wanted to include it in my project, because I’m proud of it, and I thought it’d be a good fit. But, upon encoding it into both XML and HTML, I came across some challenges.

This poem is free-form/free-verse, e.g. it adheres to no set structure or rhyme scheme. Most of my poems are like this, but Host is particularly egregious, because it was originally written with full-sentence lines and stanzas that were whole paragraphs. I transferred the work as it was, untouched, into the standard HTML/CSS set-up I’d crafted for my poetry and was disheartened to find that it had completely broken the styling. The lines were taking up the whole page, overlapping with the info box at the side, and made a mess of my aesthetic design.

Here's what the poem's HTML originally looked like:

                   <div id="s2" class="stanza">

                  <div id="l2" class="line">
                     <span class="inner">It has tendrils threaded like muscle that have wrapped around the beating of my heart, taking hostage the pumping of my blood in demand of something unknown to me.</span>
                  </div>
               </div>

Ridiculous, right? It bleeds off the page here, just like it was bleeding into the other elements in my styling.

In an interesting reverse of my previous conundrum, this obstacle caused me not to re-evaluate the XML, HTML, or CSS, but instead the structure of the poem itself. I realized, staring at the clutter of text, that this wasn’t the best way to arrange the lines, to deliver the thoughts and core of the text. For the pace and rhythm I had in mind, my initial structure wasn’t nearly effective enough. I went back to my Google Docs page and enjambed the poem in a few different ways before settling on the construction that I have now. I think it’s more fitting for the tempo of how I want my audience to read it, it builds tension better, and it overall makes the poem more pleasing to look at, with or without my CSS additions.

Here's the current form of the poem HTML:

                   <div id="s2" class="stanza">

                  <div id="l2" class="line">
                     <span class="inner">It has tendrils threaded like muscle that have wrapped
                        around the beating of my heart, </span>
                  </div>

                  <div id="l3" class="line">
                     <span class="inner">taking hostage the pumping of my blood in demand of
                        something unknown to me.</span>
                  </div>
               </div>

Much more readable.

HTML/CSS structure and styling influenced the way that I looked at and reworked my poem. It gave me a new perspective in how the piece would read to a third-party, and led me to a realization that ultimately ended up in a better formed poem. The relationship between text-encoding and poetry became a two-way street at that moment. They influenced each other equally in this project so far -- the poetry is in no way beholden to conform to an arbitrary XML/HTML structure, but the HTML/CSS is not dictated completely by a given poem, either. They can intermingle, weaving into something that has become a mixture of both, something that embraces the pragmatism of the code and beauty of the artwork.

Isn’t that amazing?