Hypercompendia

It’s been such fun the last couple of days getting into hypertext again. Working from Steve Ersinghaus’ New Media class collaboration of “Apartment 9”, the students were asked to select a point of entry and continue a story from there.

I find that writing flash fiction for a couple years has changed my style of writing as I mentioned in an earlier post but it’s becoming more second nature to me now to write into the hypertext narrative form. It all comes back; working with Eastgate’s Tinderbox software, recalling the process of rolling out story without being limited to a single linear arc.

The one thing that hasn’t changed: I find myself falling back into the process of a structured map. I find it easier to create several Notes at a time (blank–“untitled”) and have them ready to write into as the stories develop. Making a new note is quick and easy in Tinderbox, yet the fast-pace of story learned via writing and reading flash fiction calls for minimal interruption and having the blank text box Notes ready is helpful.

And I prefer the Map View to write into both for its visual appeal and for its obvious view of the “whole picture” of where the story is going. But I’m simply not able to make a map without creating it as a proportioned, orderly, geometrically sound piece of art in itself:

Boy, it’s not easy getting back into hypertext narrative. Whoever says it’s the same as traditional text is wrong.

After almost two years of focusing on flash fiction–which is a style that requires a quick body punch–it almost seems like hypertext story is the opposite; expansion on concept and questions and answers instead.

While the text boxes of Tinderbox, the software I use to write hyperfiction, are exquisitely perfect for sticking with a concise, free of overwriting style, the knowledge that more data, more information, more detail, can be added in bits and pieces by simply creating another “Note” leaves a writer more open to creative flare. No one expects you to read every bit of that data so there’s really no overload. While a story may contain fifty Notes, you can get from beginning to end in forty, thirty, twenty perhaps.

I’ve just had the enticement to get back physically and mentally into hypertext narrative, something I’ve been saving to do next year, after I finish out this year’s daily flash fiction writing. But it’s not easy going from one to another form. Just as with the novel, the short story, or poetry, the mindset is completely different and I as a writer must admit I am struggling as if for the very first time.

Really happy to say that my hypertext story “Blueberries”, originally published in New River Journal, has also been selected for translation into Polish publication, been included in a doctoral dissertation, listed in the ELO directory, and a part of a new media college syllabus. Makes me itchy to get back to hypertext writing.
Just looked up the translation of “blueberries” as a title into Polish, and found:

czarne jagoda   (“jagody” means berries, and I thought “czarne” meant “black”)

jagody amerykańskie  (Since blueberries aren’t native to Poland this comes out as “American Berries”)

borówki (this one claims to be “Blueberries”)

czarne borówki  (Again, (“Black Blueberries”)

And this one’s my fave: “There is no human translation for that”

Was really happy to come upon a review of my work in the 100 Days Project of 2009, that is, the 100 hypertext stories.

While the review is in Polish by Mariusz Pisarski of korporacja ha!art and while I won’t make an attempt at translation here, running it through an online translator gave me the general drift of it. It’s complimentary and thoughtful and I truly appreciate the effort and time that Mr. Pisarski put into the article. It seems that he too writes in hypertext and that is something I’ll be checking out further.

Meanwhile, while I’m of Polish descent–my grandparents on both sides came to America in the early 1900s–I’m going to ask a friend of mine to translate into Polish my thank you note. I knew how to say thank you in Polish, but had to look up the spelling: Pan Pisarski, dziękuję.

A Bottle of Beer has been one of my most worked-on, revamped, and favorite hypertext stories and it’s great to have it in its most technologically advanced form yet. As I was all set now to wish it luck and wave it out the door I realized with surprise that it’s already made the rounds for submission  in its earliest forms to the few places that accept and present new media work.

Whoa. The years have flown by. There are a couple places where I haven’t sent it out but they are sites where it’s not really a good fit–even I know it before the editor’s gentle explanation returns it to my doorstep.

So while I’m still glad I’ve done all the work to bring it to this level since all writing and learning procedure is a step up on the next piece, it’s sort of sad that it’s just going to sit here unseen. So on to the next, I guess.

In trying to solve my image problem (not my personal image; that I’ve come to gradually accept) I of course found a round-about more difficult and time-consuming solution.

Since I wanted the images to be centered within the boxes, and since they are linked out of text or stretchtext, changing the margin edge by the code I showed in the previous post didn’t work unless the image was the only stretchTarget. Otherwise, the new margin set changed the text as well. Soooooo…

I worked around the code problem by making the images the smaller size of 400 pixels in Photoshop, made up a new file in Photoshop with a 550 width (as the images were marked, to give a 25 px each side border), painted it black (the background color of the piece, both column and body in A Bottle of Beer), and dragged the Photoshop image onto the black background and centered it, figuring in advance based on the resized image to leave a 10 px top and bottom margin and resulting in 75 px side margins. And, it works.

Of course as usual, I’ve solved an immediate problem for a particular piece of work rather than learning the right way of doing things by taking the time to look up the code scenario. It just seems that if I sit and figure things out logically, play with the code or find a way around it, it not only produces an answer, it’s a lot more fun. Somewhere in the future I’ll need to do this again, only it won’t work with the particulars and elements of the new piece.

That’s when I hope to have learned the right way of doing things.

So far, Safari has been able to point out various HTML errors that Firefox automatically appears to override and fix.  I’ve used Firefox and like it, but when working on a hypertext piece that’s going to go online, it’s become obvious that you need to pick one of the pickier browsers to work with.

What worked beautifully in Firefox didn’t work with all browsers. I have FF and Safari on the Mac–which is naturally where I’m working since I use Tinderbox to start the piece out. On my PC, which I rarely use but have for backup and to hold all the years’ worth of stuff pre-Mac, I use Internet Explorer as the default browser and have since downloaded Chrome and Opera. That gives me two operating systems and five browsers to check the work. Also, I might add, different screen resolutions because of the various monitor sizes. This led to the last problem I need to deal with, the background images which looked great on my Mac, but fell a couple hundred pixels short on the PCs.

Safari’s refusal to accept font color tags unless they were posted before each paragraph of hidden or stretch text (in a group of three paragraphs, the middle one would return to the main text color) was similar to one of the other browsers that would only take the first paragraph and then return. I’m sure there’s a more professional way of doing this–which is why I wish I’d learned coding from the basics instead of jumping into the middle–but I did manage to fix by tagging each paragraph.

The problem of an uncentered image on the first page, where I inserted a 400px wide image instead of the 550px, I had used the proper code within the head:

<style type=”text/css”>

.stretchTarget {
margin: none;
margin-left: 100px;
}

</style>

It wasn’t until I studied another page where I’d done the same thing in stretchtext that I discovered I had changed a headline size from h1 to h2 but hadn’t changed the closing tag. (The image came from the linked headline) and so even though the headline was okay, it messed up what followed–the image.

So while I’ll likely still work in Firefox, I’ll know enough to doublecheck immediately each page in Safari as I work. Of course the best way would be to run the pages through the W3C Validation Service, but that shows me that my pages really have no right to be working at all and just makes me feel bad.

Have finally spent some time yesterday on finishing up A Bottle of Beer. I’ve included images I’ve taken myself and Photoshopped into more artistically (some, not all are done well–I’ve gotten some confidence since several of my graphics have now been accepted for publication!) suitable visuals and managed to get them to “hide” and “unhide” via stretchtext.

It’s likely the “flashiest” piece I’ve done, and likely that is because it was first written into Hyptertextopia and that was their basic color choice–black background and brightly colored links. But it suits this piece, and while I’m tempted to explain that the colored text that is revealed via links are the themes and separate from the main (white text) narrative, I suppose I’ll have to “Barthesize” and let the reader figure that out. And love it or hate it.

I’m still working on the problem of the hidden text not remaining consistent in color in Safari and Internet Explorer. I’ve solved it by adding the font tags to each paragraph. I’ve still to check if the stretchtext works in IE and Chrome. It works properly in Firefox (which is what I use) and in Safari so far. (UPDATE: Chrome showed up two open font tags but everything else was okay–odd that Safari and Firefox automatically closed them. Also, in working on the other PC with a larger screen, didn’t realize my background images set at 1280 x 800 weren’t sufficient. Have to work on that so that not too much relevant stuff is cut out on the right hand side. Maybe need to float or code to fit screen?) (UPDATE #2: Downloaded and tried Opera and everything works.)

Learned a lot, and am happy that this piece–aside from the tweaks and maybe some image changes–is finally displayed at its best.

I don’t have the kinks worked out yet about hidden images linked from hidden text, nor the different browser display of any images at all, but I’m giving myself a break and playing in Photoshop with some of my photos I’ve selected for A Bottle of Beer.

Still playing around with size and placement, but this is the fun part:

UPDATE: Did get the image to work, but only as the target from original text links–as opposed to stretchtext hidden text links. Haven’t checked it with IE and Chrome yet, but it works in FF and Safari. Haven’t done anything with the font color problem yet since it works in two out of four browsers and that’s likely an easier problem to fix.

Just when I thought I was hot shit getting all that stretchtext working properly I exported the piece to the site online and problems immediately came up.

While I work with Firefox to open the html pages offline, I still needed to see the flow of the narrative when sticking in the images on a more occasional basis, since once the stretchtext is in the Tinderbox form, I can’t see where they are (including them into the main text of the box from whence they emerge), and in the file exported to a desktop file, they are arranged alphabetically rather than by narrative flow. Once the pages were set with the stretchtext code and the font, sizes, etc. were pretty much decided and working, and Firefox opening the file on the hard drive worked the images open in stretchtext, then I exported the project online. And the fun began.

In Firefox, the images don’t show up. In Safari, something worse; the stretchtext seems to have lost it’s font color in the middle paragraph of three–though two paragraphs will hold the color:

Then I went over to the PC and with Windows XP and Internet Explorer, found that only the first paragraph held the font color while subsequent paragraphs returned to white, even though the closing font tag was not until after the last paragraph.

The image, in Firefox showed nothing, in IE and Safari showed the empty place-holder box:

So I downloaded Chrome on the PC. It handles the font-color code, but not the images. Chrome also didn’t display the Rockwell font very well, almost made it unreadable while it was fine in the other three browsers. So that’s four browsers and two of them have trouble with the font color changes and all four have a problem with the images. The colors, BTW, are your standard #ffffff, #000000, #ff0000, #00ff00, and #0000ff.  Looks like I’ll be doing some work on this today. But then this is one of my strong points, I love to track down problems and solve them. I’m just a bit slow.