My recent reading list included several books which shared the same feature: there was a lot of historical geography inside. Not that the historical geography was the subject of any of them, but the series of unfamiliar and half-familiar place-names were long enough to get lost in. Still, though all of them were in this or that electronic format, the situation was no better than with paper books: either there were a few pictures with maps inserted as usual illustrations or, in worse cases, there were no maps at all. So, I want to talk about that a bit.
I will not discuss here the cases where a big and complex and detailed map is needed, such as in J.R.R.Tolkien’s books; It’s a serious matter as well, but it’s a different matter.
Maybe sooner or later a dedicated solution will appear in EPUB for custom maps. Sure, maps can be tolerably implemented using images, especially vector images; but so can formulas, and still we have MathML; history books (which need custom maps more often then not) are no worse then maths books after all.
What I am talking about here are those books which would do without a map, but which still could have a small one. Or two. Or more. That is, imagine a reader unfamiliar with Ancient Greece who reads a book which deals with the subject (myths maybe, or history), and the name Argolis pops up in the text for the first time. It is ok to have a link to a textual comment for this word. But isn’t it better to have a link to a little map of Ancient Greece (in the ideal case created in the same style as the illustrations, surely) with the borders of Argolis highlighted? So, that’s my topic for today.
Please note, this essay is not really technical. In fact, the technical details are more or less trivial (and already used elsewhere, e.g. on Wikipedia). My aim here is just to call more attention to some existing possibilities.
1. Why?
‘Why doing that at all?’ is, naturally, the first question an e-book creator may ask. To this I have two general answers:
- In the realm of visual annotation e-books can do much more than their natural rivals, paper book (we will see some examples of that). The reason for it the possibility to make things to some extent dynamic (even as little as the presence of hyperlinks already changes things a lot); and, well, the e-book is not becoming any heavier to carry (its size on the disk is in any case very small compared to an album of music).
- Such sort of annotations, if prepared well, is something useful the user gets in addition to the story; that is, in case of open domain texts, it is one of the many little things that makes your edition substantially better then just the text downloaded from anywhere online.
This sums up to a somewhat trivial answer: because it helps to make your e-book better. Better than a paper book, firstly; and than some other e-books, secondly. Also, by the way, doing such things may be very exciting.
2. What?
Now, assuming that you decided to look into this possibility for your particular e-book, what are the exact options?
The simplest thing to use is a map with a location mark, an «X is here» map. Surely, «X» in «X is here» is not necessarily a point; and that brings us one step further, to a map with a highlighted object. The object may be a set of points (cities that joined some union feature discussed in the text), or a line (borders of a kingdom in a history book), or a blurred spot of complex shape and varying opacity (a region where a dialect is spoken, in a book on folklore or linguistics), or whatever else that can be placed over a map. With the state borders, which change over time, there is an additional nice possibility: they can be highlighted differently depending on the place in text where the link was clicked. The initial example about Argolis falls into this category.
For more complex purposes, more complex things can be done. If a continuous travel is in question, a map with a route line can be used. Such a map is obviously useful (and often used) in large-scale travel stories, like those of Jules Verne, but it can be of use much more frequently, in virtually every story where a travel with more then two stopping points is involved. Consider the following lines in the Dryden’s translation of The Aeneid:
Then to Chaonia’s port our course we bend,
And, landed, to Buthrotus’ heights ascend.
Imagine now, that «Buthrotus» is a link to a map again, but on this map not only the place is highlighted, but all the journey up to this point is traced with a line. Note by the way, that such a dynamic electronic map is much better than a single fixed map with the whole route, which is what you can have on paper. The electronic variant only shows you the portion of the way which a hero has already made, without disclosing the future moves earlier than the readers get to know about them; so the map does not become a spoiler. Well, frankly I am not sure that spoilers are so much of a concern with The Aeneid, but with many other books they surely are.
So, just look at the story you are formatting and ask yourself: would a map be of some use to a reasonable percentage of readers? And if so, why not make one?
3. How?
Implementing functionality like this can be very different depending on the technologies you expect to be supported by the reader. In general, it’s all about having a fixed image (map) with custom overlays (highlights), in whatever way you can implement it (that is, in whatever way the target readers support it). Below are some indications.
The best thing for such purposes I know of is actually SVG with parameters. You may notice that a map with a highlight is actually used to illustrate the very concept of parametrized SVG; SVG and small maps really go well together.
If you want pure XHTML/CSS with no SVG or scripting of anything (being unsure of the support of these things in the target software, I mean), you may, in the first place, reuse the way Wikipedia does it: place the ‘highlight’ image over the ‘map’ image using CSS positioning (EPUB3 standard disables position: fixed value, but apparently allows both relative and absolute which are required here). However, my expecience with CSS positioning in actual e-readers is rather negative, the problems ranging from slight misrenderings during resizing to total chaos.
Another XHTML/CSS way to do the trick is to have the map as a background of a div, and the highlight image as a contained element inside this div. An important part of the trick is that when the values margin-top and margin-bottom are set in percent, they are set in percent of the containing element width. Therefore, using the margins of the inner element, one can enforce the proportions of the outer element, so that all of the background is visible. Two more remarks regarding this approach:
- In both XHTML/CSS approaches you will need to create multiple fragments of XHTML for this, one for each highlight; or maybe generate them with a script from a list of coordinates.
- Note that in an e-book the map width needs to vary together with the page width, so the ‘highlight’ image must have width and position defined not in pixels but in percent of the parent element’s width, and background-size property has to be used to scaled the map (the support of this property is not to be taken for granted as yet, and legitimately so: it is a part of CSS3, not CSS2.1).
This approach will also work only in some readers (partly because of the mentioned background-size property); for me it works ok in Calibre in particular. For this approach I know no brief online explanation to which I could give a link, so I’ll explain it here. Here’s how it looks in XHTML (the location of the Wicked Witch highlighted with red on the map of Oz; the map for this example is taken from the edition by Project Gutenberg).
Here’s the XHTML code:
<div style="width:70%; max-width: 570px; margin-left: auto; margin-right: auto; padding:0; border: 0; background-image: url(oz.png); background-size: 100%; background-repeat: no-repeat;"> <img style="width: 2.5%; height: auto; border: 0; margin-left: 30.7%; margin-top: 6.8%; margin-right:0; margin-bottom: 63.2%; padding: 0;" src="redcircle.png" alt="dot" /> </div>
Click here to open the image in a separate window where you can play with the browser window width to see that the mutual positioning is not affected by shrinking; the width is set to 70% rather then 100% to make it easier to shrink the image in the demo.
One final remark (my heart bleeds, but I have to say that): if the possible highlights are few, you may just have a separate map-with-a-highlight image for each case. That’s ugly, but – sh! – the user will never know. And, on the other hand, such an approach works everywhere, and looks as dynamic as anything (clicking on the links on different pages of the book, you are still shown what looks as the same map with different things highlighted). Hopefully, though, more thorough support of CSS and SVG in the major readers will make such remarks unnecessary soon enough.
If you enjoy doing such things but are worried by the incomplete support of the necessary features by the reading software, you may actually consider the following possibility: create two versions of the book (with and without advanced functionality), make them both available to the user, and explain the difference. This will allow you, firstly, to make exciting things without creating problems (that is, to work with all the beauty of SVG without feeling guilty) and, secondly, to make the users more aware of the relations their preferred e-reader has with the relevant formats, thus maybe creating (if the absence of some particular feature will prove important for many books) a tiny little bit of pressure on the developers.
4. What else?
So far I have talked about maps here, but the title says Maps and More; and there’s actually more to mention briefy. Geography is by no means the only layer of information which can be enhanced in this way. If a novel frequently mentions non-trivial architectural elements of a particular style or type of building (be it a gothic cathedral or a classical temple) a schema with these elements highlighted on demand would often be better then a textual comment; another book would profit from a «highlightable» schema of a certain dress or an armour or whatever. If it it useful – why not?
Happy formatting!