QuarkXPress 2016, Storyspace/Tinderbox, and HTML5

Half way up our stairs hangs a miniature replica of the Rosetta Stone, with the same rather uninteresting royal decree of 196 BCE written in ancient Egyptian hieroglyphs, Demotic, and ancient Greek. It proved the key to deciphering hieroglyphs, and opening up the world and culture of the ancient Egyptians. I sometimes wonder whether we could do the same today with the bewildering variety of formats used for electronic publishing.

My aim for this article seemed clear: I wanted to see how easily I could generate a publishable ‘smart-linked’ document. To keep the task as simple as possible from the outset, I concentrated on HTML5 output of an interactive plan, based on a project which I worked through some months ago in Storyspace.

The opening page is a drawn plan of Piazza San Marco (Saint Mark’s Square) in Venice. On this I wanted to have buttons, each bearing a thumbnail of a painting of the Piazza from that point. Click on the button, and you are taken to a large image of that painting, where another button will return you to the plan on the first page.

Using QuarkXPress 2016 to do this is a joy, and a lesson in efficient, purposeful interface design. I first created my project, for electronic publishing to an iPad or similar tablet, and in a couple of minutes I had my pages laid out.

quarkxpress1

The first page contained my plan, dragged-and-dropped from its PNG original, and swiftly scaled to fit. On that I placed prepared thumbnails for each of the paintings, again scaled to my desired size.

quarkxpress2

Successive pages consisted of a scaled high-resolution image of each painting, and a thumbnail of the plan to act as the button to take the reader back to the plan on the first page.

quarkxpress3

Setting the thumbnails up to act as buttons could not be easier: open the HTML5 pane, select the graphic, and set the Tap/Click Action to Go to Page, and the respective page number. Once that is done, save the project, and export to HTML5. It really is as simple as that.

quarkxpress4

I then ended up with a 15.7 MB folder containing nearly 200 items: open its index.html file and Quark’s App Studio engine fires up, and the interactive plan works beautifully. In Firefox, but for some reason Safari – even Apple’s Technology Preview – provoked an App Studio problem. Even when I asked Safari to pose as Firefox, I could not get it to open the HTML5 export. No doubt there is a simple explanation which you will be able to give in a comment here.

So for publishing in HTML5, QuarkXPress 2016 is truly simple to use, and wonderfully efficient.

The snag – and this is not the app’s fault – is that setting up HTML5 buttons like this only works for HTML5 export, of course. If you want to produce an interactive PDF or ePub version, your HTML5 controls will not work, and you have to rework the document into a form appropriate for publishing in those formats. Hence the Rosetta Stone.

quarkxpress5

QuarkXPress 2016 will also publish existing projects to HTML5, and make a beautiful job of it too. This was a less interactive draft of the same material which I had prepared in QuarkXPress 2015, exported from 2016, and viewed a few moments later in Firefox.

Another potential route, offering even more sophisticated links and full hypertext structure, are Eastgate Systems’ complementary products, Storyspace and Tinderbox. The former is primarily intended as a hypertext authoring environment, and comes with limited export features (which the user can develop themselves); the latter is the most powerful note-making and -organising environment for OS X, which comes with built-in support for smarter exporting.

storyspacex1

As they share a common file format, I took my earlier Storyspace hypertext project, opened it in Tinderbox, and exported to HTML from that. This provided source files which can be used as the basis for a more sophisticated interactive site, but requires considerably more work in terms of HTML5 (or whatever) development.

You may also note that, in Storyspace, my interactive plan is more complex: it allows you to view only those works painted in certain periods. I am sure that can be implemented in HTML5, but at a much higher cost in programming skill and effort.

The perfect solutions will of course be Storyspace reader apps for OS X, iOS and Windows, which are promised by Eastgate. But they rely on an even trickier Rosetta Stone to convert source code from the current OS X version.

In the meantime, we have some outstanding tools now: QuarkXPress 2016, Storyspace, and Tinderbox are each a joy to work with, modestly priced, and don’t cost you any monthly rental charges.