Original Edition for Terminal
View the original edition of On The Web
In 2011 xtine received a Terminal commission from Austin Peay State University to create Browser Poems. For this project, she translated three works of literature into user-experiences for the web browser. On The Web is one of these translations in which Kerouac’s On The Road becomes On The Web.
Analog and Digital
While reading the novel, xtine crossed out every appearance of the word, “road” in her copy of the book and replaced it with the word, “web” to investigate whether modern life and web surfing are reflected in the original road-trip manuscript. (In many cases, the work still speaks to wanderers hitchhiking on the open road or browsing the information superhighway). The visual and interactive design of the project is based on the original manuscript design style: the scroll. Each page was scanned and placed into the virtual scroll utilizing HTML5 and CSS3, enabling the user/reader to scroll through the text in a web browser. Readers can also skim the work for the word “web” to test its integration into Kerouac’s 1957 context by clicking on the last occurrence of the word on any page where it is found, or by tabbing through the scroll.
This is the second time On The Road was a muse for xtine. Her last reading of the book resulted in a letterpress paper bag give-away that she conducted at City Lights Bookstore in 2007.
Usability Note: Please view the original work in a current version of Chrome or Safari. Be sure to scroll so the links appear away from the top scroll image before clicking from one instance of “web” to the next. It is more effective to use the Tab key to move through the original document.
View ON THE WEB (Original Edition)
On The Web, 5K and Half-K Editions
In winter 2012 xtine learned about the book project, Code Poems and embraced the challenge of reinterpreting On The Web (original version) to meet the guidelines set forth by the editors of the upcoming book. Unfortunately, she misread “,5k” to mean 5 kilobytes. So she created On The Web 5K Edition and On The Web Half-K Edition. When completely stripped of visual graphics (there is no room for graphics at 5k and certainly not at half of a kilobyte), the browser translation simply displays the heart of the concept: quotes in which “road” is swapped with “web”. At 5 kilobytes there is enough memory to display specific fonts (see the link to Google Web Fonts in the head area of the HMTL code) and references to individual pages. With only half of a kilobyte to spare, we're simply left with a short selection of quotes, presented as a new poem. This was a great opportunity to exercise the concept of the project—I will use it as a teaching tool.
On The Web as a teaching tool--exploring positioning
In terms of utilizing current web standards, the most difficult challenge I faced in constructing the original work was making the pieces of tape “sticky.” That is, I wanted to upload each page as individual graphics, and I wanted the virtual scroll to be constructed in the same manner, digitally, as Kerouac's original. So I needed to figure out how to place two pieces of tape at the bottom of a single scan from the book such that the tape would appear to overlap two consecutive pages.
Setting up the scroll in HTML
The HTMl is easy: use the image source tag to place the first page, then place each piece of tape, then place the next page. I put the pages and the pieces of tape inside a div tag so I could use absolute positioning to control where the tape would appear. My HTML code looked like this:
You might have noticed that I do not close the division tags once they are opened. Each scanned page of the manuscript received this same treatment in the HTML code. At the very end of the HTML page, I closed all of the division tags opened for each page (over 300 div tags). By leaving all of those divs open, I could use absolute positioning on the default parent, the body tag. That is, none of the individual pages became “parents” because they were all busy referring to the default parent, the body tag. This keeps the pages in order, rather than having them stack down and to the right as the scroll grows (which would have happened if they were parents to each other).
Relative Positioning (the tape)
Notice that each page takes a class called “page.” In my style sheet I positioned the tape using relative positioning. This will take the graphics referencing the two tape classes and position them “relative” to where they would have naturally occured in the document. The tape images would have naturally occurred just underneath the page, aligned to the left.
The “lfttape” and “rttape” classes both position the graphics 25 pixels above where they would naturally occur on the page. This is results in an overlapping graphic (it also doesn’t hurt to know that the tape images are 42 pixels tall, so this positions the tape nearly halfway between both pages, vertically). The left tape is positioned 45 pixels from the left edge of the page, while the right piece of tape is positioned 245 pixels from the left edge of the page.
Questions? Contact xtine [at] missconceptions [dot] net. See a complete portfolio of work.