Building the Book
Early Fails
Tech geeks often use the term “early fail” to describe the positive side-effects of an idea that didn’t work. The philosophy is that you learn more from an “early fail” than you do from an “early success.” Talking about that process can also help others avoid similar mistakes. So here’s mine: I had a relatively simple goal–to embed images into texts. So I started with something I knew I could easily do: copy and paste an e-text into an html document, then add links to pictures. Relatively easy, yes, but if my overarching goal was to improve the reading experience, long, scrolling pages of unpaginated text wouldn’t work.
I then briefly considered adding hotspots to PDF files, then using an iframe to load them. This would be possible and have a lot of advantages–(1)I could use a PDF of Ruskin’s exact text, no copying and pasting required, (2) The original pagination would remain intact, (3) The original typography, white space, etc., would make for a more enjoyable, classic reading experience; and (4) PDF’s can be viewed as books with pages that turn. The big negative to this is: in order to embed hotspots in PDFs you need something like Adobe’s Creative Cloud subscription service. From equal parts fiscal responsibility and DH ethics, I resolved early on not to use tools or technologies (besides hosting services) that are not free, publicly available, and, where possible, completely open source. So, from the list above, I set a couple of priorities: hotspots or links and pages that turn.
I began by experimenting with several different platforms. FlippingBook lets you upload PDFs and embed pulsing hotspot gifs that are linked to images. The problem, again, is that the free version of this software doesn’t let you share your PDFs. FlipPageMaker is a similar program (when I say similar, it was the same software package complete with the exact same download wizard), which lets you share the document, but it’s covered by a giant “watermark” icon that obscures most of the page. FlipSnackEdu is a free trial version of FlipSnack that is marketed towards elementary and middle school teachers to make their own textbooks. You can write your own text or upload PDFs then add photos onto the page. There are actually a lot of cool things about FlipSnack and how it can be used in the classroom, at any grade, really, but you cannot format the text if you upload pdfs. You have to lay your photo over text or in the margins. There are also premium FlipSnack services to make books more interactive. So if any of these packages sound appealing to you, and you have a budget for purchasing software, these all worked to varying degrees.
BINGO!
I finally decided to stick entirely to open source, searching through GitHub for javascript that might do the job. That’s when I stumbled across Moleskin. The link has a full demo, tutorial, and source code. Downloading the .js package and uploading it to my server was straightforward, and I found I didn’t really need much of a tutorial to get it working.
The flipping mechanism is there and links are easily embedded. It supports images as well, even with dynamic effects like the “hover side effect,” but I wanted to keep Ruskin looking somewhat traditional, rather than covering the page with so many images there would hardly be space for text. So I removed the images altogether and began the painstaking process of coping and pasting Mornings in Florence paragraph by paragraph into <p></p> tags. I added <br> tags between paragraphs to improve readability. This was, by far, the most time consuming part of the process, and it had to be done for every paragraph, and then, later, redone for every paragraph, but I’ll get to that later.
And of course, that font had to go.
The offending fonts were located in the “Cufon” and the “ChunkFive” js pages. Deleting all of these files made the page formatting go haywire, so I commented-out the bottom two font .js pages, and added Garamond to the CSS. It took a little experimenting, but it worked perfectly. Then, in the CSS, I removed the wavy line icon that Moleskin was using underneath chapter headings and simply replaced it with <hr> tags in the html.
You may have also noticed in the above screencap that I added Lightbox. I used Lokesh Dhakar’s simple version, minimum bells and whistles, but easy installation and use. If you’ve never added a js to a page before, it’s almost identical to adding a CSS page, at least in this case; just link inside before your end </head> tag.
Then, in your html, you add the lightbox link like this:
<a href=”images/MurrayonBardi.jpg” rel=”lightbox” >Murray’s Guide</a>
Late Fails
I finished the hard work of reading the chapter, finding images, and embedding lightbox links, and the much harder work of formatting the paragraphs to fit the page. The next step was to make sure it was responsive on tablets and phones. Guess what.
I had three choices at this point: (1) To make the booklet responsive at the code level. (2) Make the booklet bigger. If you have any suggestions for either of these options, please let me know. I tried a few things, and it wasn’t pretty. The final option was (3) Look on every page of the booklet on a mobile device, figure out where the text has reached the bottom margin, and then rearranging the html for each and every page. That’s what I’ve done, but it was extremely tedious.
Lessons Learned
Definitely check for responsiveness before you have tagged the entire book. The impulse is to get as much online as quickly as possible to show it off and get constructive feedback, but if you do that before you’ve checked for responsiveness, you’ll end up redoing a lot of work that has already consumed a few days.
To Do List
(1) I’m concerned that if students or researchers are using my edition of Mornings in Florence, the pagination isn’t complete. You cannot easily and professional cite my project in any efficient, MLA-compliant way. So one step for the near future is to add notations of the original pagination so that if you are citing Ruskin, it will be easy to find the original page and publication information.
(2) There are a few more Lightboxes to add for cross references to other works, particularly from early versions of A Room with a View. These drafts, known as The Lucy Novels, have significantly more references to Ruskin. I still need to add and tag those.
(3) Build other mornings. There are a total of six mornings in Florence. I began with the First Morning in Santa Croce because that’s the morning most closely related to by dissertation. Other chapters will deal more with Henry James’s love-hate relationship with Ruskin.
That’s the process so far. There may be additional process/tutorial posts as the book continues to grow. If you’re working with Moleskin or another booklet program, let me know!