Media Technology

eBook Typography design & display of electronic publications for eBook readers and TabletPCs

First Bachelor Thesis

Completed by

Melanie Massinger mt091070

From the St. Pölten University of Applied Sciences Media Technology degree course Under the supervision of DI (FH) Mag.art Dr.phil. Aldo Tolino

St. Pölten, on

27.06.2011 Date

(Signature Author)

(Signature Advisor)

Fachhochschule St. Pölten GmbH, Matthias Corvinus-Straße 15, 3100 St. Pölten, T: +43 (2742) 313 228, F: +43 (2742) 313 228-339, E: [email protected], I: www.fhstp.ac.at

Media Technology

Declaration

n I declare, that the attached research paper is my own, original work undertaken in partial fulfillment of my degree. n I have made no use of sources, materials or assistance other than those which have been openly and fully acknowledged in the text.

n If any part of another person’s work has been quoted, this either appears in inverted commas or (if beyond a few lines) is indented.

n Any direct quotation or source of ideas has been identified in the text by author, date, and page number(s) immediately after such an item, and full details are provided in a reference list at the end of the text. n I understand that any breach of the fair practice regulations may result in a mark of zero for this research paper and that it could also involve other repercussions. I understand also that too great a reliance on the work of others may lead to a low mark.

St. Pölten, on

27.06.2011 Date

(Signature Author)

2

Media Technology

Abstract With the development of advanced display technologies and the success of the eBook, the publishing industry currently experiences a major turnround. TabletPCs as well as eBook readers offer new ways of reading and also new use cases for books in general. This thesis explores the resulting differences of display technologies in combination with the design of ideal reading typography for electronic publications. The focus lies on the typographical possibilities for eBook design, especially in regard to the user settings offered by the devices. The display technologies themselves and their influence on the readability represent an additional key point. Those explorations are compared to the respective printed alternative. After definitions of the terms eBooks, legibility & readability, two exemplary technologies used within this paper are introduced. This includes their technical specifications, look & feel and the available setting options for the user, especially concerning the layout and appearance of eBooks. Subsequently, an insight into the environment of eBooks is given, including a description of common formats and also interdependencies between printed books, eBooks and websites. Within this second chapter, also the interaction models for digital reading and the issue of reading on the screen compared to reading off paper are being discussed. A short outlook on possible future developments of display technologies is provided at the end of the chapter. An overview of the current possibilities for eBook designers and the resulting workflow is given in chapter three. Those are compared to well-tried practices of classical book design and means of typographical arrangement. Finally, examples for eBook concepts are presented in the last chapter of this thesis. This chapter shall act as a reminder of the eBook as being a fast developing new medium, whose current restrictions in regard to their appearance do not keep it from advancing (commercially as well as concerning its design). Expert opinions on classical book design, eBook design as well as usability have been compiled to answer the research questions this thesis is dedicated to. For illustrating the differences within this field, two specific products have been chosen to represent the display technologies most prevalent on the eBook market. The Apple® iPad stands for the LED display technology, the Amazon® Kindle represents the eInk display. They have also been exemplarily used to explore the possibilities in terms of typography, especially their technical specifications and those of the eBook file formats they are using.

3

Media Technology

Table of contents INTRODUCTION  ............................................................................................................................................................  5   DEFINITIONS  .................................................................................................................................................................  6   EBOOKS.  DEFINITION  OF  TERM.  .................................................................................................................................................  6   LEGIBILITY  &  READABILITY.  DEFINITION  OF  TERMS.  ........................................................................................................................  6  

CHAPTER  1  –  DEVICE  TECHNOLOGIES  ............................................................................................................................  7   APPLE®  IPAD  2  ......................................................................................................................................................................  7   Look  &  Feel  ....................................................................................................................................................................  7   User-­‐Settings  .................................................................................................................................................................  7   AMAZON®  KINDLE  3  ...............................................................................................................................................................  8   Look  &  Feel  ....................................................................................................................................................................  8   User-­‐Settings  .................................................................................................................................................................  8   CHAPTER  2  –  EBOOKS  AND  THEIR  ENVIRONMENT   ......................................................................................................  10   EBOOK  FORMATS.  .................................................................................................................................................................  10  

ePub  .............................................................................................................................................................................  10   azw  (mobi)  ...................................................................................................................................................................  10   pdf  ................................................................................................................................................................................  10   INTERDEPENDENCIES  BETWEEN  PRINTED  BOOKS,  EBOOKS  AND  WEBSITES  .........................................................................................  10   Printed  books  ...............................................................................................................................................................  11   Websites  ......................................................................................................................................................................  11   eBooks  .........................................................................................................................................................................  12   REDEFINING  INTERACTION  MODELS  FOR  (DIGITAL)  READING  ..........................................................................................................  13   READING  ON  THE  SCREEN  .......................................................................................................................................................  15   CHAPTER  3  –  EBOOK  DESIGN  ......................................................................................................................................  19   AN  ANALYSIS  OF  CURRENT  POSSIBILITIES  FOR  EBOOK-­‐TYPOGRAPHY;  ................................................................................................  19   Layout  //  ......................................................................................................................................................................  19   Structure    //  .................................................................................................................................................................  19   Typefaces  //  .................................................................................................................................................................  21   Spacing  //  ....................................................................................................................................................................  21   Accentuation  //  ............................................................................................................................................................  23   Text  flow  //  ..................................................................................................................................................................  24   OpenType  Features  //  ..................................................................................................................................................  26   THE  WORKFLOW  OF  EBOOK  DESIGN.  .........................................................................................................................................  28   CHAPTER  4  –  LEADING  THE  WAY  .................................................................................................................................  29   EBOOK  CONCEPTS  OF  THE  FUTURE  ............................................................................................................................................  29  

Bibliotype  .....................................................................................................................................................................  29   ePub  Zen  Garden  .........................................................................................................................................................  29   Various  Marketing  Concepts  ........................................................................................................................................  29   QBooks™  ......................................................................................................................................................................  30   Decoded  by  Jay-­‐Z  .........................................................................................................................................................  30   The  Final  Hours  of  Portal  2  ..........................................................................................................................................  30   The  Elements:  A  Visual  Exploration  .............................................................................................................................  31   Our  Choice  by  Al  Gore  ..................................................................................................................................................  31  

REFERENCES  ...............................................................................................................................................................  32  

4

Media Technology

Introduction „A blank piece of paper and a computer screen when it’s off have something in common: both are empty, devoid of content, ripe with possibilities“ – (Gomez 2008, p12)

Similarities between the medium print and a computer screen, as stated here by Jeff Gomez, are certainly not negligible. Most importantly, they both represent sources for information. Whereas the innate functions of these technologies seem to be alike, their physical form brings up differences regarding the question of how they live up to that purpose. A printed page is a modern allegory for something carved into stone. The text, pictures and overall layout is definite, it isn’t responsive to its reader. Content written on a computer screen is fleeting, flexible, fluid… – everything but fixed. The reader of electronic content has influence on its appearance by simply changing the size of a window or resetting the resolution of his screen. Although typography has its own history of forms and styles, it has never before been forced to serve two entirely different technologies. Readable, attractive typography has to fulfil different requirements for those media. It has, like in the history of letterpress before, to be adjusted to technical advances and possibilities. With the upcoming of personal computers and mobile devices, a revolution of the so-called eBook has been predicted more than once. Electronic books, digital versions of printed copies, have been said to be the new – and only – way to read publications in future. But like the saying ‘those reported dead live longer’, print has obviously not met its end yet. Nevertheless, eBooks are available on a growing market and they have certainly found an audience. EBooks can be read on many different devices, from a TabletPC to the screen of a smartphone or an eBook reader. As diverse as the screen resolutions and technologies are, as diverse is the display of the written word. This thesis explores the fundamental differences of said variety of display technologies in combination with readable and attractive typography. Therewith, the differences between digital and analogue publications are going to be researched as well as which of these technologies offer better readability to the reader. It will also be researched to which extent designers of digital publications – or: eBooks more precisely - can control the final appearance of their work, especially with devices providing user settings like the choice of font size or -family. Not only is this thesis going to state, which differences concerning ideal reading typography of digital publications result from the comparison to printed products, it will also be answered which typographical advantages and disadvantages those technologies comprise. For research purposes, expert opinions regarding classical typography, digital display technologies and reading typography for the screen will be considered. For the analysis of the momentary standards of hardware technologies, two products within the fields of TabletPCs and eBook readers are going to be evaluated. Here, the Apple® iPad 2 is going to be representative for TabletPCs (with backlit LED technology), the Amazon® Kindle 3 represents the eBook readers’ technology (using an eInk-display). These products have been chosen to incorporate the display technologies most prevalent within the eBook sector.

5

Media Technology

Definitions eBooks. Definition of term. Further term specification is based on a definition of books as an instrument for media communication. Books are perceived as creations aimed at the transmission as well as storage of content in form of lettering (and pictures) which got physically published according to copyright laws. The term eBook is an abbreviation for electronic book and refers to the digital version of said physical form of a book. The definition of eBooks used within this thesis sets itself apart from digital editions of print magazines and folios created with emphasis on a different combination of media. Understanding the term in a broader meaning, an eBook signifies content providing more interactivity than the traditional definition of (e)books. In particular, this means hyperlinks, possibilities to bookmark, to take notes and to share content within a community. Additionally, they provide means for implementing multimedia content. EBooks are – as they consist of digital data – not bound to a specific physical medium and can therefore be read on various devices.

legibility & readability. Definition of terms. This thesis does not aim at being an extensive analysis of reading performance and -speed on different media. Therefore, the two terms legibility and readability are both going to be used to describe either said reading performance of users or the tangibility of textual user interfaces. The usage of those terms may differ in context but will not be assigned to other meanings as the abovementioned.

6

Media Technology

Chapter 1 – device technologies Apple® iPad 2 The iPad 2, a TabletPC developed by Apple®, is basically a device supporting usage in the areas of entertainment, business and education. The 9.7” touchscreen device displays its content on a backlit LED display with a pixel density of 132ppi at a resolution of 1024 x 768px. (Apple Inc.® 2011, [http://www.apple.com/ipad/specs/])

LED displays consist of so-called light emitting diodes, electronic semiconductor diodes. Through voltage application, the diode emits light in a colour depending on the semiconducting material. Within a display plane using this technology, each pixel is represented by three LEDs – one red, one green, one blue. The perception of the pixels’ colour is due to the additive mixture of colour stimuli. Simply said, the watchers’ eyes assemble the three diodes to one point of colour, combining it with the other pixel colours into one whole picture. The more light the individual diodes emit, the brighter the pixel occurs. (cf. Walk 2010, p1f, p4f) The iPad is not a dedicated eBook reading device - it offers multiple ways of utilization. For reading eBooks, the user has to install a reader application of his/her choice from Apples’® AppStore. Here, a variety of software is provided. For the analysis within this thesis, Apples’® proprietary application iBooks has been chosen, though. Look & Feel The iPad with its 9.7” screen and average TabletPC measurements of 24,12 x 18,57 x 8,8 mm and 601g of weight is a little bigger (and heavier) than an average book. Using a touchscreen, it has no navigational tools (which would be relevant for reading eBooks) placed on the hardware end. It uses swipe and simple touch gestures for page turning. In iBooks, a publication gets viewed within a frame imitating the look of a book. Holding it upright, there appear some book pages on the right-hand side of the one-column text, faking the feel of a book flipped open. In landscape mode (to which the user can switch by rotating the device), it even simulates a page spread of a book, imitating the page fold and showing pages at the left and right of the now two-page one-column layout. As those pages never change in number, regardless on which page you are within the book, this feature demonstrates the efforts of the eBook industry to copy the physical form of a book. The column(s) of text get(s) set centred on these simulated book pages. The content itself can be displayed justified or flush-left-ragged-right. Within the book frame, menus for bookmarking, a search, the font and brightness settings as well as buttons directing to the table of contents and the library are provided. Those can be faded out with a simple touch gesture in the middle of the page. Also, it shows the iPads title bar, displaying time and connectivity status, as well as a pagination using page numbers (x of xxx) and a progress bar. (This bar fades out with the other parts of the menu.) If available within the metadata of the publication, the running title is viewed on top of the book. User-Settings Fonts  

Within the menu for font settings, iBooks allows to choose between six different fonts, which are listed by their actual names. The selection comprises five serif fonts (Baskerville, Cochin, Palatino, Georgia and Times New Roman) and one sans-serif alternative (Verdana). The text can be set in ten different levels of font size, affecting not the columns’ width, but the amount of words per line. 7

Media Technology

Line-­‐Spacing  

 

It is currently not possible for the user to change the line spacing of the running text. Page  Layout  

As mentioned before, the user can change the overall page layout through rotation of the device, producing a two-page spread in landscape mode. Also, the alignment of the text columns can be changed (justified/ragged-right) within external iBooks-settings on the device. The colour of the paper can be set white (for high contrast) or sepia. Also, the general accessibility settings of the iPad get passed to the iBooks application: The contrast setting White on Black renders the ePublications within iBooks alike.

Amazon® Kindle 3 The Kindle eBook reader, developed and sold by Amazon® is currently published in its third version. It utilises the eInk technology, providing a reflective, bi-stable display. The electronic ink shows similar characteristics as printed paper. It uses electrophoresis – the movement of electronically charged particles through supporting material within an electric field – to print the content onto the display. In difference to LED displays, the eInk technology does not emit light itself. Physically, our perception of colour on these devices base on the same principle as reading off paper: the reflection and absorption of light. As the displaying of information on an eInk screen only needs voltage during the process of changing content, it needs far less energy than LED screens. (cf. Desmarais 2003, p88) Look & Feel Though it is significantly thinner, by its overall measurements the Amazon® Kindle (3) can be compared to an average book: 19 x 12,2 x 0,85 cm. With its 240g, it is an extremely lightweight device. Its display has a resolution of 600x800 at a pixel density of 167ppi. (cf. Amazon.com® 2011, [http://www.amazon.de/dp/B003DZ1Y8Q])

It uses hardware-integrated buttons for page turning, placed on the left and right side of the device to provide comfortable usage for the hold with either hand. For displaying ePublications, the Kindle uses a one-column layout without integrating much further distractions for the reader. The top bar shows the title of the publication as well as battery and connectivity status, the pagination is provided using percentage as well as line numbers and a progress bar. The running text gets set into a justified text area (by default), which is positioned centred on the page. That page layout gets affected in regard of line-length, when the user rotates the screen (which he/she can do with the help of menu-settings only). Also, the line-length will be shorter in particular cases, when the wordspacing within this line would otherwise cross a certain threshold. User-Settings Fonts  

The font selection for the Kindle is deliberately smaller than in the iPads’ iBooks application, offering three alternatives. The default font provided by the Kindle 3 is PMN Caecilia (roman), but it also offers a condensed version thereof. The sans-serif version renders the text in Helvetica Neue LT (medium). The actual names of those fonts are not mentioned within the menu, the user can only choose between default, condensed and sans serif. The Kindle 3 allows for setting the text in 8 different sizes, always maintaining the same column width and alignment. 8

Media Technology

Line-­‐Spacing  

 

Also, the line-spacing can be set to small, medium or large – representing approximately 110%, 120% and 130% of the set font size. Page  Layout  

The column of body text can be altered in width with the settings for words per line, offering two levels of narrowing besides the default value (fewest, fewer, default). Also, the alignment can be set from default (justified) to a ragged-right alternative.

9

Media Technology

CHAPTER 2 – eBooks and their environment eBook formats. ePub The ePub format, short for electronic publication is widely adopted as a (free and open) standard format for viewing eBooks relying on the Open Publication Structure. It is a registered trademark of the International Digital Publishing Forum, which has released the first public draft for version 3.0 on 15th of February 2011, the latest standardized version is 2.0.1. „EPUB defines a means of representing, packaging and encoding structured and semantically enhanced Web content — including HTML5, CSS, SVG, images, and other resources — for distribution in a single-file format.“ (International Digital Publishing Forum 2011, [http://idpf.org/epub/30/spec/epub30-overview.html])

This definition reveals the basis of ePub-publications – (x)Html and CSS – which states a resemblance to websites (and web design). According to the specification of ePub 3.0, its key concept is to leave the content presentation widely to the user. It is possible for the content designers, though, to provide style sheets with preferred rendering attributes. However, ePub cannot guarantee the display according to those desired styles, as it is up to the users reader software to interpret them. (c.f. International Digital Publishing Forum 2011, [http://idpf.org/epub/30/spec/epub30-overview.html])

azw (mobi) Azw bases on the MOBI format and represents the eBook format supported by the Amazon® Kindle eBook reader (and respectively Amazons® reader applications available for other devices like for example Androids’® or Apples’® phones). Azw – like ePub – bases on xHtml for structural- and CSS for formatting issues. (c.f. Mobipocket.com 2011, [http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen&File=mobiformat.htm])

pdf Thinking of electronic publications, pdf – portable document format – is a popular file format for the distribution thereof. As this open standard represents a digital photocopy of a set text, it is rendered equally on every device. Of course, this reduces its accessibility and it cannot be reinterpreted by ereading software. Also, it does not provide any means for integrating multimedia content as well as other features of eBooks established in the definition of term. Therefore, it is not one of the formats considered relevant to eBook design within this thesis.

Interdependencies between printed books, eBooks and websites Having already put out the similarities between printed books and eBooks, now another medium adds its influence on those electronic publications. As eBooks basically consist of the same elements as a website, an analogy between them can also be built. In the following, characteristics of printed books and websites are going to be contrasted to those of an eBook. Given the fact that an extensive comparison would go beyond the scope of this thesis only the aspects of and influences on the design and typography as well as reading usage of those three media are going to be considered. First, they are going to be explored separately, followed by a chapter containing 10

Media Technology

considerations for reading models of eBooks attending to the characteristics presented beforehand. Printed books Printed books, perceived as viewable resources of information, have a long tradition. Their physical form, including the choice of format, paper and dimensions, has affected the organization of their layout ever since. Analysing the typographical components within a book, there is not just the body – or running – text, but possibly also titles, pagination, side notes, block quotes, footnotes and other accentuation that help keeping up the flow of reading. Besides, there are certain structural parts like an abstract, appendix or index. „All such devices are attacks on linearity, providing means of entrance and escape from the one-way stream of discourse. Whereas talking flows in a single direction, writing occupies space as well as time. Tapping that spatial dimension - and thus liberating readers from the bonds of linearity - is among typography's most urgent tasks.” (Lupton 2010, p92)

Different to screen design, typesetters don’t compose page after page, they construct page spreads, two pages which will be viewed together as the book is flipped open. Every book has its own character, style and feeling – or at least it aims at doing so. Rooted deeply in typographic practise is the choice of fonts and scaling. Robert Bringhurst, an American typographer and author of the book ‘The Elements of Typographic Style’ expresses the importance of those choices within various rules of classical typography contained in said book. „Read the text before designing it.” (Bringhurst 2004, p20) „Choose a typeface or a group of faces that will honor and elucidate the character of the text.” (Bringhurst 2004, p23) „Shape the page and frame the textblock so that it honors and reveals every element, every relationship between elements and every logical nuance of the text.” (Bringhurst 2004, p24)

Those are just three rules describing the correlation of the character of a text and its typographical representation and hierarchical structure. Books, as mentioned before, are something finished. Letters in phrases in words in sentences in paragraphs in chapters, ... – all of them have a fixed place as soon as the book is printed. This adds completeness to our perception. When holding a book, one can roughly measure by the number of pages how long it will take to read it. Acting on instinct, one can even in most cases tell from holding it, if it’s actually worth to be read. The physicality of those printed pages are familiar to the readers and help them to judge and – as critics of electronic publications might say – engage. (cf. Pearson et al. 2010, p16)

Websites Searching online for information has never been as easy as today, although not every source may be as trustworthy as it would be wished for. These pieces of information exist mostly in textual form. „Web design is 95% typography.” (Reichenstein 2006, [http://www.informationarchitects.jp/en/the-web-is-allabout-typography-period/])

Even if web developers might not agree on the (high) percentage given in this quote, text actually represents an important kind of user interface on the web. Websites and their interactivity give the user a certain control over the actual content. They are reacting on the users’ input – be it a keyword-search or other kinds of influencing the displayed data 11

Media Technology

(for example a simple log-in). Enough said to state that websites are mostly non-linear media. The arising implications on their design focus on navigational issues as well as – of course – proper content representation according to the sort of information it provides. Typographical decisions on the web have long time been driven by limitation: Few fonts were considered to be wide-spread enough to count as web-safe, CSS did not provide (enough) possibilities (for example for controlling hyphenation), flash-replacement of fonts hasn’t been platform independent, the text is too flexible to set it properly, … Not all of these reasons (and excuses) to neglect typography can be declared void nowadays, but the possibilities of font kits and their practise of embedding the font into websites have risen typographical awareness and hope within the web design community. Thinking about how users behave when searching information on websites, Jakob Nielsen, a usability expert could give an answer. The first line of his article on how users read on the web is: ‘They don’t.’ Further reading of the article reveals that users merely scan every passage of text when browsing than really reading it. (cf. Nielsen 1997, [http://www.useit.com/alertbox/9710a.html]) Whether this behaviour is due to the lack of readability (resulting from low quality resolution of display technology (more on that issue in the upcoming chapter 2/reading on the screen) or can be seen as a cultural development (users expect to feel productive when they sit in front of a computer), isn’t completely resolved yet. (cf. Lupton 2010, p92f) eBooks In wild contrast to the physicality of a book and in superficial similarity to websites stands the digital eBook. Inheriting attributes from both, it is caught in the middle. With regards to content, it is more similar to the traditional book, in terms of representation and intrinsic structure it strongly resembles a website. Consisting of reflowable text, the eBook adjusts to the respective specifications of the reading device. That also means that the running text – somewhat like on websites – has to be altered in column width and height, and if the user wishes also in font family, size and even spacing. With eBooks, these elements are even more flexible than in web design because there exist no boxes or columns whose attributes can be specified as fixed. The flexibility of content and representation also allows the eBook to provide new use cases for books. Besides the narrative function when containing for example a novel or tale, it can also be used as a selectively accessible database (when presenting an encyclopaedia or alike) or interactive imagery. Also, it provides the basis for community features. (cf. Carden 2008, p10f) Being embedded in a digital environment, eBooks inherit some of the standard features of digital documents and offer different options to the user. Firstly, electronic publications are searchable for any keywords the user may come up with. This functionality aims at providing non-linear access to an eBooks’ content. Further it facilitates linking to other passages or documents as well as the digitally adopted function of bookmarking. These bookmarks can be extended into personal side notes, recommendations or other means of sharing content of an eBook with a certain community. Even though these functionalities seem to strongly resemble those of a website, one can not finally say that eBooks are accessible in a non-linear way. Considering the latest reading interfaces, those electronic books offer no means of jumping into a book besides a table of content that allows switching between different chapters, the selection of one defined page or a specific keyword search. The experience of reading a book on such a device is highly sequential in principle. The feeling of thumbing through a book is missing as well as the accustomed haptic and feel of holding it. (cf. Pearson et al. 2010, p19)

Nevertheless, considering these extensive possibilities of usage, different requirements in terms of design arise which have to collude with the rules of traditional text representation. This demand

12

Media Technology

results from the above-mentioned familiarity of printed books as well as the pretension of optimized legibility for those publications.

Redefining interaction models for (digital) reading The book is one of the oldest interfaces for transferring information. Its history has shaped a custom habit of usage within society – people have internalized the feel and practice of reading. This chapter should not put this circumstance into question, but rather identify differences concerning the basic characteristics of the user interfaces of books and mentioned technical devices, which may affect possible approaches of designing it. The most important point within this comparison constitutes the presence and/or absence of an axis. A books’ axis is given by its physicality and the fact that the pages are bound together in some way. Flipped open, the book therefore provides a central axis, creating – as already mentioned – a page spread. TabletPCs as well as eBook reader have no such carefully defined axis. In doing so, the approach of considering the display as one single page without a spine and drawing the axis through the horizontal centre is as valid as the practise of regarding the screen as being surrounded by potential axes on every edge. (cf. Mod, 2011, [http://www.alistapart.com/articles/a-simpler-page/])

Figure 1: the multidirectional axis (cf. Mod 2011, [http://www.alistapart.com/articles/a-simpler-page)]

The considerations defining four possible axes bases on the prominent usage of each of those directions by the Apple® iPad (and many other TabletPCs) within their applications. On the contrary, the central-axis-approach may be more applicable for the Kindle and other eBook reader devices. Building on those perceptions, also the act of page turning on eBook devices has to be reviewed. Whereas the book provides pages that are permanently available and visible for the reader, on 13

Media Technology

electronic devices, the page and spine themselves have no fixed place and can therefore not be expected from a certain direction. „The screen becomes a small portal to an infinite content plane […] ” (Mod 2011, [http://www.alistapart.com/articles/a-simpler-page/]

Figure 2: the infinite canvas (cf. Mod 2011, [http://www.alistapart.com/articles/a-simpler-page/])

Interaction models for publications viewed on iPads have extensively been discussed, the most prevalent approaches being those of the Card- (swipe gestures for forward and backward movements) and the Scroll Model (learned from webbrowsers). („Card Sharks” vs. „Holy Scrollers”) Oliver Reichenstein defined parameters for the decision over those interaction patterns for different use cases. He suggests to not discard one of those models but recommends usage depending on content: • •

Cards should be used when presenting a long one-column text block or page-per-page structures (like presentations f. ex.). (There, the eBook finds its use case.) A combination of the Card and Scroll model should be applied for granular, complex structures like newspapers or the like.

With this being an applicable starting point, the interfaces of the iPads’ iBooks as well as the Kindle provide such – or similar – interaction models. Still, one could reconsider this in favour of the eBook as specific product. In the same article, Reichenstein puts out that it is advisable to employ big gestures (such as swiping) for big actions (next article or chapter) and small gestures (like scrolling) for the continuation within associated thoughts or elements. (cf. Reichenstein 2010, [http://www.informationarchitects.jp/en/ipad-scroll-or-card/])

This thought itself provides the basis for the consideration of using a mixture of those interaction models for the eBook: Swipe gestures would be used for chapter breaks. The content within those chapters is accessed through scrolling down.

14

Media Technology

Reading on the screen As computers and screens have found their way into our daily working lives, we do not only read (or respectively scan) text on screens when browsing the web. Users get confronted with digital documents and texts in various forms that they are more or less obliged to read. Reading on the screen has always been accompanied by the question whether the legibility of a text is really influenced by display technologies and their characteristics. These questions are of course also of concern when thinking about designing eBooks. To provide a basis for a comparison of legibility of screens and paper, a short overview of screen resolutions and pixel densities of various displays, and the point density for print-products will be given in the following:

Device

Diagonal

Resolution

Phones/Notebooks/Tablets 3,5” 480 x 320 3,5” 960 x 640 13,3” 1280 x 800 9,7” 1024 x 768 3,7” 800 x 480 7” 1024 x 600 eBook Readers Amazon® Kindle 3 6” 800 x 600 Barnes & Nobles® Nook 8,2” 800 x 600 Sony PRS350 5” 800 x 600 Other Displays Standard-aspect Monitor (4:3) 14” 800 x 600 Widescreen Monitor (16:10) 15,4” 1280 x 800 Standard-aspect Monitor (4:3) 17” 800 x 600 Standard-aspect Monitor (4:3) 19” 1024 x 768 Widescreen Monitor (16:10) 24” 1920 x 1200 Widescreen Monitor (16:10) 27” 2048 x 1152 Print Newspapers Die Presse Frankfurter Allgemeine Zeitung … Magazines PAGE VOGUE … HQ-Print in general Apple® iPhone 3G/3GS Apple® iPhone 4 Apple® MacBook Pro Apple® iPad 2 HTC® Desire Samsung® Galaxy Tab

Point Density 163ppi 326ppi 132ppi 132ppi 252ppi 170ppi 167ppi 122ppi 200ppi 71ppi 98ppi 59ppi 67ppi 94ppi 93ppi

200dpi 240dpi

300dpi 300dpi >= 300dpi

Table 1: electronic devices, print media, resolutions & point densities

15

Media Technology

The data contained within this table base on the following sources: Apple® iPhone 3GS (cf. Apple® Inc. 2011, [http://www.apple.com/iphone/iphone-3gs/specs.html]) Apple® iPhone 4 (cf. Apple® Inc. 2011, [http://www.apple.com/iphone/specs.html]) HTC® Desire (cf. HTC® Corporation 2011, [http://www.htc.com/de/product/desire/specification.html] Apple® MacBookPro (cf. Apple® Inc. 2011, [http://www.apple.com/macbookpro/specs-13inch.html]) Apple® iPad 2 (cf. Apple® Inc. 2011, [http://www.apple.com/ipad/specs/]) Samsung® Galaxy Tab (cf. Samsung Electronics Austria GmbH® 2011, [http://www.samsung.com/at/microsite/galaxytab/]) Amazon® Kindle (cf. amazon.com 2011, [http://www.amazon.de/dp/B003DZ1Y8Q]) Sony PRS350 (cf. Sony Europe Limited® 2011, [http://www.sony.at/product/rd-reader-ebook/prs350#pageType=TechnicalSpecs]) Barnes & Nobles® Nook (cf. Barnesandnoble.com® 2011, [http://www.barnesandnoble.com/nook/features/techspecs/index.asp?cds2Pid=35611]) The other mentioned displays are of conventional sizes and resolutions for CRT, LCD, TFT and LED displays. The calculations of pixel density are based on the following formula: ppi = ( sqrt (w2 + h2) ) / diag therefor ppi = diagp / diag w = width in pixels h = height in pixels diagp = diagonal in pixels diag = diagonal in inches

As the observant reader may have noticed, the point density of printed products is measured in DPI (dots per inch) whereas on screens, PPI (pixels per inch) are used. The pixels per inch refer to the pixel density of computer monitors. The ppi-number stands of course in close proximity to the screens’ resolution. As seen in the list above, a 24” monitor display with a resolution of 1920x1200 would have a pixel density of 94ppi, whereas setting its resolution to 1280x800 would produce 63ppi, enlarging the viewed pixels. Dots per inch – dpi – are used in print to tell how many colour-points per inch are produced by the printer and are therefore a parameter for the quality of the printed product. The point density of both – print and screen display – is of special concern when considering the proper representation of typographic elements. The more points are available for displaying an element, the sharper are curves and slanted lines. Especially in smaller font sizes a higher quantity of dots/pixels is beneficial. (cf. Gremillion 2010 [http://www.webdesignerdepot.com/2010/02/the-myth-ofdpi/]) To what extent this factor influences the legibility of text on screens will be explored in the following: Although the general sentiment seems to be that display technologies aren’t at the point of equal readability as print nowadays, (cf. Nielsen 2010, [http://www.useit.com/alertbox/ipad-kindle-reading.html]) a study as early as 2004 aims at proving otherwise. Having analysed the legibility of LCD, paper, and even CRT(!) displays under matched luminance and viewing conditions, Venkiteshwar M. Subbaram (2004) stated that their measure of legibility is the same. The presumption that the increasing pixel density of screens automatically enhances readability is invalidated within the conclusion of Subbarams’ studies. He does not declare its influence void, but limits it to the impact on legibility of font sizes below 10pt. During the study, documents set in three serif (Georgia, Times New Roman, Plantin) and three sansserif fonts (Verdana, Arial, Franklin Gothic) were tested, whereas the most legible fonts have been Verdana and Arial. Seeing that the third sans-serif font has been least legible, it is stated that none of the two groups of fonts can be determined to provide better readability. According to Subbaram, the fonts used for publications have to be evaluated for intended usage separately. (cf. Subbaram 2004, p210f) 16

Media Technology

Going even further back in time, a study in 1999 found matching results. It is stated that 8-bit onscreen text is not significantly more or less readable than 600dpi text on paper. Concerning the choice of fonts, similar findings are provided: each font has to be evaluated separately. (cf. Weisenmiller 1999, p101)

That represents a key point of those studies, as it is stated that the display technologies themselves do not hinder ePublications to be readable like printed hard copy. Mainly, it has been found that the design for displays (in some cases) requires an adapted choice of fonts. To map these findings to the analysed devices, the iPad and Kindle, their device technologies may have to be looked at a little closer. Keith Peters experimented with a USB microscope and the said devices (Kindle 2, iPad 1), publishing photographs taken thereof in his blog BIT 101.

Figure 3: iPad at magnification levels of 26% (left) and 365% (right) (Peters 2011, [http://www.bit-101.com/blog/?p=2722])

Figure 4: Kindle at magnification levels of 26% (left) and 400% (right) (Peters 2011, [http://www.bit-101.com/blog/?p=2722])

Figure 5: a book at magnification levels of 26% (left) and 400% (right) (Peters 2011, [http://www.bit-101.com/blog/?p=2722])

17

Media Technology

Here, not only the differences in technology, but also the significant difference of rendering is shown. The Kindle display looks organically and very similar to the printed products, whereas on the closeups of the iPad, one can identify blurry parts at curves and slanted lines. At a magnification level of 400x (Kindle) and 375x (iPad), the Kindles resemblance – and the iPads disparity – to print is even more noticeable. Nevertheless, those facts do not prove one of the technologies to be more legible than the other, which has also been confirmed by studies for casual (cf. Nielsen 2010, [http://www.useit.com/alertbox/ipad-kindle-reading.html]) as well as educational (cf. Marmarelli et al. 2011, p2) reading environments. Here again, the fact of psychological and sociological impact on reading has to be considered. As this subject has already been superficially touched in the chapter about websites, it has to be reviewed in the context of the eBook again. Whether we are subconsciously connecting different forms and purposes of reading with different interfaces (printed books / any form of a screen), is a question left to be resolved. „ […] in front of the computer screen — and especially online — we are relentlessly tuned in to change. We have learned to expect something to happen and are thus doubly compelled by an urge to click.“ (Hillesund 2010, [http://firstmonday.org/htbin/cgiwrap/bin/ojs/index.php/fm/article/viewArticle/2762/2504#p8])

Giving a short outlook on future prospects of display technologies and their legibility, recent developments indicate increasing point densities as well as the advancement of enhanced systems for the display of digital information. In the area of electronic paper, besides electrophoresis, many technologies are going to be fully explored in the next few years, such as f. ex. bistable LCD planes. In the field of conventional systems, the iPhone 4 stands for the increasing of pixel density with its 326ppi “retina” display. The term retina is borrowed from another technology conceivably used in the future – the Virtual Retinal Display, which does not need the detour of a display medium to convey information. It projects content directly to the retina of the viewer, where it unifies with his/her perceived image of the real world. (cf. Doniec 2003, p4)

18

Media Technology

CHAPTER 3 – eBook design An analysis of current possibilities for eBook-typography; Though the display technologies themselves may not represent an obstacle for readability, the classical eBook is still limited in its scope for design and therefore limiting the legibility on a different level. Within this chapter, those possibilities are going to be evaluated, as well as which factors of final representation can momentarily be influenced by the designer and which are controlled by the device. In each of the following subchapters an overview of the classical approach to book design will be given and compared to the possibilities within the eBook universe. The presented findings are based on an analysis of publications on both reader devices as well as the specification of the latest standardized versions of the ePub file format (especially the specification of the Open Publication structure (cf. International Digital Publishing Forum 2010, [http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm]) and the Kindle Direct Publishing Guide (cf. Amazon.com® 2011, [https://kdp.amazon.com/self-publishing/help?topicId=A17W8UM0MMSQX6#format]) as well as the Mobipocket specification (cf. Mobipocket.com 2011, [http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen]ff). Said analysis examines the key points for typographical design mentioned in the following paragraphs within ePublications. Layout // The layout and proportions of a set text on a page always stands in relation to the format of its transporting medium. For all sorts of print media the choice of measurement and format is assigned to the designer, who decides upon them with the intended look in mind. There exist many approaches on how to create a balanced page and to construct its type area. But before discussing the multiple alternatives of dividing the pages’ space, it has to be stated that none of these are applicable for the design of (classical) eBooks. What a piece of paper may be for a book, the screen resolution and physical dimensions of a reading device is for the eBook. Those differ from one device to another, though, so the designer is left in the dark in question of the final proportions of the displayed page. Additionally, both of the reading devices examined reserve themselves the right to define the width and height of the text block – and both of them set it in one column centred on the page. On the Amazon® Kindle, the user can even readjust the columns’ width to set fewer or more words per line. Concerning other recurrent decorative layout elements like f. ex. coloured plains, the layout of an ePub/azw is also limited. Besides the fact that they get ignored during the export process anyway, placing them persistently on the pages is impossible because of the characteristics of reflowable text within eBooks. It has to be noted, though, that it is not impossible at all to create coloured, bordered, … boxes within an eBook, as f. ex. for emphasising quotes or similar. Those can be reached with simple means of HTML (div-boxes) and the respective CSS properties. Actually, this is possible for every element nested or anchored within the text flow but not for independent elements aimed at being placed outside of the text flow. Structure // Starting at the skeletal structure of a book, there exist different sections to find ones way while reading. A cover, pages for Copyright Notes, Titles and dedications, a Table Of Content, a Foreword or Preface, Appendices, Endnotes, a Glossary, Bibliographies… can – but do not have to – be comprised by a book besides its body text, depending on its genre and purpose. An HTML document does provide means for creating nested structures expressing relations and 19

Media Technology

interdependencies between the used elements. Therefore, it constitutes a great base for structuring (e)books internally. The segmentation into those fragments is supported by both of the file formats and realized through XML- and HTML-data sets within the container formats. „A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to pick and choose among its offerings.” (Lupton, 2010, p132)

Hierarchically, the text elements most noticeable are the headlines – they break the content into smaller fragments in order to provide an overview thereof. The running text itself constitutes the essence of the book – its actual purpose. Therefore, special regard should be given to its design. It has to be readable, present, but the written word should not call as much attention to itself as to distract the reader. (cf. Bringhurst 2004, p17) Subordinate in structural importance are marginalia, page numbers, captions, super- and subscripts as well as footnotes. They support the running text through providing additional information. Their characteristics are usually not as prominent as to interrupt the flow of the running text. Elements within a text block – like quotes or other accentuation – should be subtle and distinct all the same in order to integrate into the text without giving the impression of being a break point for reading. Of course, those rules for structuring the page optically may not suit the look intended. There, they can be broken if the result supports the message of the text. For example, quotes can be pulled out of the running text and set in bold and loud type to attract the readers’ attention instead of being subtle. Those methods are applied mostly in publications like magazines and are not often seen in novels or scientific reports. The provided hierarchy should make clear, which elements belong together and are of the same or different importance. To channel the readers’ attention to a specific element or give it more hierarchical importance, its characteristics can be changed to stand out from running text. Typographically, visual hierarchies are created through alternation of spatial or graphic characteristics of the page and its type. This can be achieved by modifying indentation, line spacing or placement and (font) size, style or colour. (cf. Bringhurst 2004, p60; Lupton 2010, p132) Those principles, aiming at being carried out perfectly in print design, are sometimes difficult to achieve when it comes to eBooks. Thinking of the above-mentioned possibilities to structure an eBook internally, it has to be stated that those structuring issues have nothing to do with the visual representation thereof, though. Both of the analysed eBook readers provide basic means to create a visual structure on the page. Differences in font size and weight can be assigned to headlines and subheads as well as space can be added before or after them. It gets more difficult with elements subordinate to running text. Marginalia, which (obviously) usually get positioned in the margin of a text block, cannot be realized at the moment (within the analysed pieces of software). One of the more prominent reasons for the lack of this possibility is the individual shaping of the text block by the device. Additionally, these text blocks do not leave margins big enough anyway. As there exists nothing such as a fixed page in the eBook universe, the paging is provided by the device itself – readjusting after every change of font settings by the user. It is not part of the work done by the book designer. Considering this fact, the concept of footnotes seems to be lead ad absurdum. However, they are usually implemented in a different way when necessary: A well-set eBook provides linked superscripts directly guiding to the note at hand, borrowing characteristics of both hypertext and endnotes. The most difficult element to layout properly within an eBook is the picture. It is not decided, on which page it will be displayed and which paragraphs exactly accompany it on this page. 20

Media Technology

Rudimentary settings are provided for the designer. He/she can decide upon the alignment – left, centre, right – and whether the text flows around the picture (and with which padding). Especially the settings for embedded pictures (as well as floated boxes) can cause unaesthetic one-word lines around the borders of the picture – depending on page layout, device measurement and user settings. Additionally, a picture width of 100% may differ from one device to another in actual size, so graphs and charts tend to be illegible on smaller screens (like for example the Kindle display). Placing captions can follow the same procedure as setting footnotes, but they can also be set as a special formatted paragraph beneath the picture itself. The interpretation of the format instructions is left with the device. For fractions of text that present quotes, a blockquote-tag can be assigned, leaving the possibility to indent, italicize, set bold or define space before it. Typefaces // „Choose faces that suit the task as well as the subject.“ (Bringhurst, 2004, p95)

The selection of a typeface for a specific text is usually a process requiring consideration of many parameters. The purpose of the text, its inner structure and origin, the usage of diacritics and other analphabetic symbols, the medium on which the text gets published... – these are all factors of importance. The running text of a book is usually set in one font (family). For headings, captions, drop caps and other elements it may be used another one (or two). (cf. Bringhurst, 2004, p95-113) The Internet has told us (until recently) limitation in our choices of typefaces – and so still the eBook does. The font selection is primarily chosen by the device, it provides a default font with which it will happily display every document it may be forced to view. The final decision is left to the user, though: The Amazon® Kindle sticks with three fonts (two being different versions of one face), whereas the iPad offers six different typefaces. As unsuitable this may sound with the abovementioned rules of traditional typography in mind, this decision is based on important considerations. Thinking of the results of Subbarams (2004) and Weisenmillers (1999) studies in concern of the most readable fonts for displays (‘it depends’), it even has its validity. For an eInk reader, a font especially designed for screen usage may not be the right choice, as well as a traditional book face with delicate serifs for example may not provide the best legibility for a TabletPC like the iPad. (Unfortunately, with Baskerville, an 18th Century typeface that is amongst the iPads offerings, this is exactly the case.) Here, the designer has to rely on the manufacturer to know their technology best. For the choice of default font weight, the same principle has to be applied. The designer has the possibility to choose the weight of headlines when supported by the readers’ software (respectively available for the chosen face), though. „Don't compose without a scale.“ (Bringhurst 2004, p45)

Concerning font size, it has to be repeated that the user has the possibility to readjust the text size as he/she pleases. Of course, this has no implications whatsoever on the usage of a scale when defining the sizes of different elements. The running text as well as headlines will be scaled proportionally to their default size. Spacing // As with dividing the surface of the page into balanced parts of content, on a micro-basis of typography the space between letters has to provide an equal stability. There are combinations of individual letters that will need more (f. ex. gg, gy, gf, qj,...) or less (f. ex. Ty, Av, Ve, Ya,…) spacing to let the word appear legible and even. (cf. Hochuli 2009, p23, p29)

21

Media Technology

Figure 6: kerned (left) and unkerned (right) combinations

Designers of digital typefaces usually create instructions for the layout program on how to handle those pairs, called kerning tables. These may be incomplete or do not provide the right values for intended usage. The letters can be selectively adjusted (kerning) or changed for a whole paragraph style (tracking), as it is common for headlines. Having their source within those efforts to create balanced words and letter pairings, ligatures represent a special form of spacing.

Figure 7: Ampersands

A ligature consists of two or more letters that are merged into one combination to give it a uniform and even appearance. The most popular ligature is the ampersand (&), being a fusion of e and t, forming the Latin word et (meaning and). Ligatures are often available for combinations of ff, ft, fi, ffi and the like. They have to be provided by the font itself and can be set automatically by the layout program as well as manually. (cf. Bringhurst 2004, p50ff)

Figure 8: combinations with (left) and without (right) ligatures

„The readability of a text is influenced not only by the choice of typeface, type size, correct or incorrect letterand wordspacing, and the length of line, but also by the line-spacing or interlinear space, often termed ‘leading’.“ (Hochuli 2009, p47)

The settings for leading are an important means for the designer to change the overall appearance of the text block. With altering the baseline grid, the grey-value of the text also changes. The line22

Media Technology

spacing value is also to be seen dependent to the choice of fonts. A font with greater x-height and aperture is likely to need more leading, because it appears bigger compared to a font with small xheight set in the same size. (cf. ibid.) Within eBooks, the influence of the designer on such spatial issues is even more limited than on the web. With CSS, you can control leading as well as letterspacing (and therefore kerning as well when employed in combination with separate classed). The characteristic of eBook readers, though, to define the font as well as the line-length and overall layout circumvents every reasonable consideration of spacing. You can’t put space between letters that may look entirely different on another device anyway. Even though those characteristics can be influenced with CSS also within an eBook, it is really not advisable to do so in order not to impair the users control over those properties, which could end in a worse state than leaving them at default values. Ligatures are, as mentioned before, a feature of the typeface and there exists no way to enforce ligatures with means of HTML or CSS. Accentuation // Typography is a meta-language of speech transferred to paper. Whereas while speaking, our body language and intonation convey the parts we want to emphasise, the written word needs other tools to articulate in such a way. Punctuation  

Punctuation marks are the most important means to convey intonation. As they describe the language spoken, there exist regional differences on how to punctuate consistently. Taking quotation marks, for example: There exist many different forms, f. ex. (inverted or single) Guillemets, but there are also single and double quotes, available for positioning on the baseline or either at the ascenders’ height. It is advisable to set the punctuation marks commonly used in the country the publication gets published. (cf. Bringhurst 2004, p86f)      

  Figure 9: Quotation Marks

Italics

The most popular way to accentuate a word or a group of words within running text is to set it in italics. Cursive letters are said to read a little slower than roman ones, but still they have the advantage of catching the readers’ attention without disturbing the flow of the text. (cf. Hochuli 2009, p20f)

23

Media Technology

Figure 10: Italics between roman letters

Small  Caps

The same applies to words set in small caps, although these are more often used to deflect attention from words usually consisting solely of uppercase letters (f. ex. CIA or TV). (cf. Lupton 2010, p52)

Figure 11: Small Caps between roman letters

With applying according styles (with the help of classes) and HTML entities (for punctuation), these forms of accentuation can be achieved for eBooks, too, for readers and formats that support them – which the Kindles mobi/azw as well as the iPads ePub do. Of course, like in print typography, they can only be used if those variations of the used typeface are available (and installed on the device), otherwise they are going to be simulated by slanting the letters (‘italic’) or producing fake small caps or full caps.

Text flow // The structural control in the area of micro typography speaks out in form of paragraph markings, hyphenation and justification, (hanging) punctuation and drop caps. With those, the reading fluency can be supported and enhanced.   Marking  Paragraphs  

Paragraph indents are used to separate different self-contained thoughts and to loosen up the flow of text in order to provide means of entrance and exit for the reader. A typographical standard solution would be to set an indent of one em (the width of the capital M in the current typeface and–size), but at least an en (em/2) big. Indents are not used if the break of thoughts has previously been marked with a line break, as well if the line is the first within a chapter, after a quote or the like. (cf. Bringhurst 2004, p34) If it suits the text, indentation can also be abandoned and the paragraphs could be marked with a line break instead. This practise is popular on the web as it makes it easier to scan the whole text with rather providing information chunks than paragraphs. Also, the paragraph could get hung into the margin or marked otherwise. The methods of indentation as well as line breaks are also applicable for eBook design, as the ptags can be styled accordingly. Other possibilities of marking the paragraphs are momentarily not supported. The Kindle reader does provide automatic indentation, whereas the designer can still decide over its size. On the iPad, there is no default value for indentation, but it can also be defined. For preventing indentation where it is not needed, an additional class-style can be created, assigned to every first 24

Media Technology

paragraph. Also, for both formats there exists the possibility to change the paragraph spacing to add

space before the first line. Alignment  

The hyphenation and justification of a text has a great influence on its readability. A block of text has to be balanced and even in its inner structure – which there is word- and letterspacing within the lines. When set justified, the lines uniform in length are to be carefully set as not to appear uneven and not forming rivers within the paragraphs. Such a river – a connected space running over multiple lines – puts the text strangely into the foreground, irritating the reader. Setting a text ragged (ragged right/flush left or ragged left/flush right) can produce a page more lively and is often used with longer lines. The rag has to provide variation to a certain scale, but not as much as to appear chaotic or too large proportionally to the overall line length. The last, not as popular option (for longer texts) of alignment is to centre the text on the middle axis of the page, a form often used for setting poetry or rhymes. (cf. Lupton 2010, p112f) As with the page layout, justification can be set by the user on both of the analysed devices. Here, the producer of the eBook reading device bears the responsibility of proper rendering within the chosen columns, keeping in mind that the user can still change from justified to ragged right. For the designer, there are no means to influence the final justification settings at any rate. Hyphenation  

Hyphenation within running text follows certain rules to not disturb the flow of reading. First, it is advisable to avoid more than three consecutive lines ending with a hyphenated word. Further, the hyphenated word should leave at least two letters in the last line and take three onto the next, or it should not be hyphenated at all, if this would lead to a fraction of a word standing alone in a new line. Those reference points can and should be adapted to the particular language employed by the text – this is especially the case when not setting roman letters, but f. ex. Greek, Arabic or Chinese characters. (cf. Bringhurst 2004, p43f) The formats introduced do not provide any possibilities to control hyphenation settings manually. This may not be a surprise when thinking of the limited possibilities of CSS in that sector. Within web design, Javascript can help along to improve hyphenation and to provide settings that give more control over the final appearance. As the reading devices will ignore such scripts, the control has to be assigned to the software, equipped with automatic hyphenation on both devices. Hanging  Punctuation  

To enhance the appearance of a column, the punctuation on the beginning or end of lines is hung a little bit out of the columns’ margin. This method lets the columns’ borders look even, whereas setting punctuation within the text block would produce an optical indent. (cf. Lupton 2010, p58) Regrettably, neither the iPad nor the Kindle renders the text accordingly, leaving no chance for influencing those settings within the ePub or azw-files. Drop  Caps  

Making their grand entrance in fairy tales and old scribes, drop caps – either neutral or playful – are still often used to invite the reader into a new chapter. Those big letters at the beginning of the first paragraph within the new chapter can be set in different ways. They can either be positioned on the 25

Media Technology

baseline of the first line, or be taken into the first few lines, aligning with the second, third or even fourth line. Here, the running text can flow around a bounding box encircling the letter or around the form of the letter itself. (cf. Lupton 2010, p125) Those entrance points can be realized with both of the analysed devices and formats. They can be defined with accordingly styled classes, or more inelegantly but useful for artistic drop caps, with pictures embedded in the text flow.

Figure 12: Drop Caps from Alejandro Paul, Darren Booth and Linzie Hunter for the Daily Drop Cap project (Hische 2011, [www.dailydropcap.com])

OpenType Features // Digital Fonts distributed in the OpenType-Format (.otf, .ttf or .ttc) provide several advanced features for typesetting. Within an OpenTypeFont, multiple different glyphs can be comprised for one distinct character. For example, the font can comprise different ampersands, ligatures or a set of swashes. More specifically, OpenType supports Small Capitals, Ligatures and Alternate Glyphs, various Figures and Ornaments. (The support of those features is simply a basis for fonts to provide them – not every OpenType font is obliged to actually contain them!) With those, the flow of text can be significantly advanced (f. ex. with the setting of old-style-figures to not disrupt reading with capital ones). (cf. Microsoft Corporation 2008, [http://www.microsoft.com/typography/otspec/TTOCHAP1.htm]; Adobe® Systems Incorporated 2011, [http://www.adobe.com/type/opentype/#feat])

Having partly already mentioned them within the previous chapters, it has to be stated here that most of these features cannot be applied within eBooks. Small Caps can be achieved through respective CSS properties if the font supports them, but besides that, it is not possible to reach the OpenTypes’ features with reasonable means. Those efforts have to be reconsidered anyway, as with the users’ free choice of fonts one can never be sure which face the text will get displayed in. A change of font would make the careful arrangement of OpenType characters obsolete immediately.

26

Media Technology

What eBooks can & cannot do.. Control over the layout proportions Structure (index, appendix, copyright page,..) Headlines & subheads Marginalia Pagination Footnotes Captions Quotes & control over quotation marks Typeface selection Font size Leading Letter- and wordspacing Italics Control over text alignment Marking paragraphs Hyphenation Hanging punctuation Drop caps Small caps Ligatures Alternate glyphs Figure styles Ornaments

ý þ þ ý ý þ þ þ ý þ þ þ þ ý þ ý ý þ þ ý ý ý ý

ý = no þ = yes þ = yes, partly þ = yes but not advisable Table 2: What eBooks can & cannot do: an overview

27

Media Technology

The workflow of eBook design. Having mentioned HTML and CSS a lot, it has to be stated for completeness that an eBook – regardless if published in ePub or mobi-format – consists of more than just two files for content and styling. Additionally, there are files defining the mime type, the table of contents and other metainformation separately. These files can be created manually according to the specifications of the respective version of the file format intended for usage. When working with layout software, though, an export for electronic publications can set them up automatically filled with the information taken from the layout document. Tools for working with eBooks can be found within software formerly used for print publications like Adobes® InDesign (and Digital Editions functioning as an eBook-reader application for testing) (www.adobe.com) or QuarkXPress (www.quark.com), but there have emerged products specialized in cross media publishing as well, like f. ex. WoodWing (www.woodwing.com). Taking Adobe® InDesign, a standard program for the digital workflow of publications, as an example – it supports eBook export functions. Especially with the release of InDesign CS5.5, many settings important for ePub or azw export are now available from within the program. This is of special convenience when setting a document intended for printed as well as digital disposition. Although a print layout won’t look alike when exported as an ePublication, the additional settings to prepare it for this proceeding do not influence the creation of the print pdf-file. For further optimizations on the design – for example to realize drop cap styles properly, the ePub container file has to be extracted and the classes for those styles have to be edited separately. Adobe® InDesign comes with the possibility to export directly to ePub by default. For creating azwformatted eBooks, one can either convert the beforehand-generated ePub with the KindleGen tool or else download a Kindle Plugin for InDesign, both provided by Amazon® itself.

28

Media Technology

CHAPTER 4 – leading the way eBook concepts of the future A definition of what the term eBook comprises nowadays and how it is produced on the basis of traditional books has now been provided. Summing it up: With considerable effort, (good) designers may succeed in making such a classical eBook look like a (poor) copy of a printed book, especially in terms of typographic accuracy. The reason for eBooks, though being a different medium, to still aim at resembling the printed versions so much probably lies in the marketing- and usage habits, as Johannes Schneider, Director of the university library Leipzig, believes. (cf. Schneider 2011 qtd. in Schwarz 2011, p36) Whether this is the right approach to produce digital publications as engaging as analogue ones is a question of belief. At the moment, digital artists, designers and developers are sounding the potential of interactivity on electronic devices like TabletPCs, creating new captivating content types that open up possibilities in terms of their (typographic) design. The eBook is now in its infancy, ready to be revisited and adapted to a new media culture emerging. „We’re at the crossroads of one of the great meeting points between technology and culture, but no one seems to be quite sure what to do.” (Arber 2011, p26)

Nevertheless, there exist already many different approaches for making usage of the possibilities for interactivity within the eBook and also how to improve the typography and overall design. Examples of implementations as well as ideas that lead the way for the eBook will be provided in the following:

Bibliotype www.bibliotype.org

A project by Craig Mod, providing an HTML eBook framework, shows how typographical basics could be implemented in eBooks. His version is optimized for reading on the iPads’ web browser, making usage of scripts for optimized hyphenation as well as adjusting the line-length according to the set font size. Here, the basics for the mentioned Card- and Scroll interaction model are implemented. ePub Zen Garden www.epubzengarden.com

This project is based on the CSS Zen Garden, which has been an experimental playground for raising awareness for the possibilities of CSS for formatting (instead of relying on HTML elements for design issues) back then. Now, this site has the same ambitions, showing example designs for eBooks in the ePub file format.

Various Marketing Concepts Concepts for the marketing as well as design of eBooks have been created for example within a competition launched by the School Of Design in Munich. The results have been diverse, basing on the current problems concerning eBooks. 29

Media Technology

The missing haptic of an eBook would be bypassed with E-Book-Cards for example, informing about the book and giving people something to put onto their bookshelves. Another approach has been an eBook adjusting to the reading speed – adding or removing details from the story. A third concept takes the model of trading cards as a template. Segmenting a book into many pieces, the whole story cannot be completely read until every part has been collected – or traded. (cf. Dohmann 2011, p18)

With the iPad being a multimedia-supporting device, eBooks in ePub or azw-format are not the only possibility to present stories. Aside from the magazine publishing scene, books have also found their way to people in the form of individual apps. Within those, the designer has again full control over layout and typographic decisions, even though it has to be stated that these concepts are not device-independent any more and have to be created separately for every device intended to support. QBooks™ http://www.tuaw.com/2010/08/24/qbooks-bring-kids-picture-books-to-life-on-the-ipad/

...A series of children books, providing interactive versions of books also available as printed alternatives. The books can be personalized by entering the names of the children using it, so as to provide story lines with their respective characters playing a role. The key point of presenting this app is the fact that those books consist of the same content in their printed version and that the employed interactivity is not really changing but enhancing the experience.

Decoded by Jay-Z http://atrandom.com/jay-z-decoded

This book providing stories about the music business as well as personal experiences of and by American rapper Jay-Z is available as a printed book as well as standard and enhanced versions of eBooks and additionally as standard and full version of an iPad and iPhone app. These applications and files provide not only stories, but also interactive parts. In the App version, you can choose songs to be ‘decoded’ (providing notes and annotations by Jay-Z) and view other audio-visual material. Being published in so many versions, Decoded can be experienced in multiple ways, leaving open three ways of consumption. Here, the content is not forced to adapt to the medium but the versions are developed independently with the possibilities of each of those publication types in mind.

The Final Hours of Portal 2 http://www.thefinalhoursofportal2.com/

This app can be seen as a hybrid of a book and a journalistic experience. It reports behind-thescenes information about the creation of the game Portal 2 by Valve. It contains photographs, videos as well as textual and interactive content.

30

Media Technology

The Elements: A Visual Exploration http://periodictable.com/ipad/

This eBook line aims at providing a new way to discover the periodic table. It represents a good example for possible learning experiences through this new form of books. The Elements is also available as printed book.

Our Choice by Al Gore http://pushpoppress.com/ourchoice/

Our Choice is the digital edition Al Gores book about the global climate crisis, available for iOS devices. It employs very well integrated interactive parts that can be fully controlled by the user, who can choose the order in which he/she consumes the content. The interaction involved corresponds well with the purpose of the book: to encourage people to stand up actively for environmental protection.

This collection of distinctly presented content does not aim at completing the picture around the eBook, but at giving an impression of the current development process and at leaving room for inspiration and future ideas on how to improve the reading experience. Having left the definition relatively open in the beginning of this thesis, the research made shows that eBooks in their current form (and design) only represent a starting point for immersive experiences yet to come. Considering the effort put into applications like the above-mentioned, the eBook has a chance at being perceived as media products that have to be built with the same care for their design and reading typography as printed books.

Some books are to be tasted, others to be swallowed, and some few to be chewed and digested. Francis Bacon

31

Media Technology

References Adobe Systems Incorporated® (2011). OpenType. [http://www.adobe.com/type/opentype/#feat] (accessed 31.05.2011) Amazon.com® 2011. Amazon® Kindle – Technical Specifications. [http://www.amazon.de/dp/B003DZ1Y8Q] (accessed 28.04.2011) Amazon.com® (2011). Kindle Direct Publishing Guide. [https://kdp.amazon.com/selfpublishing/help?topicId=A17W8UM0MMSQX6#format (accessed 16.05.2011) Apple Inc.® 2011. Apple® iPad 2 – Technical Specifications. [http://www.apple.com/ipad/specs/] (accessed 28.04.2011) Apple Inc.® 2011. Apple® iPhone 3GS - Technical Specifications. [http://www.apple.com/iphone/iphone3gs/specs.html] (accessed 02.06.2011) AppleInc.® 2011. Apple® iPhone 4 - Technical Specifications. [http://www.apple.com/iphone/specs.html] (accessed 02.06.2011) Apple Inc.® 2011. Apple® MacBookPro - Technical Specifications. [http://www.apple.com/macbookpro/specs13inch.html] (accessed 02.06.2011) Arber, J. (2011). Groundhog day for magazines. In: Computer Arts 2011, 184, p26 Barnesandnoble.com® 2011, Barnes & Noble® Nook – Technical Specifications. [http://www.barnesandnoble.com/nook/features/techspecs/index.asp?cds2Pid=35611] (accessed 02.06.2011) Bringhurst, R. (2004). The Elements of Typographic Style. 3rd rev. And expanded ed. Canada, USA: Hartley & Marks Carden, M. T. J. (2008). E-Books Are Not Books. Napa Valley, California, USA: ACM. Desmarais, N. (2003). E Ink and Digital Paper. Library Faculty and Staff papers. Paper 17. In: Against the Grain 14:6 (December 2001-January 2003), p88-90 Dohmann, A. (2011). Überzeugungsarbeit. In: Page 2011, 06, p18 Doniec M. (2003). Funktionsweise und Einsatzmöglichkeiten von Virtual Retinal Displays. Karlsruhe, Germany: Universität Karlsruhe Gomez, J. (2008). Print is Dead. Books in Our Digital Age. London, UK: Macmillan Gremillion, B (2010). The Myth of DPI. [http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/] (accessed 18.03.2011) Hillesund, T. (2010). Digital reading spaces. How experts handle books, the Web and electronic paper. In: First Monday, Volume 15, Number 4

32

Media Technology

Hische, J. (2011). Daily Drop Cap. [http://www.dailydropcap.com] (accessed 09.06.2011) Hochuli, J. (2009). Detail in typography. 2nd revised edition. London, UK: Hyphen Press HTC Corporation® 2011. HTC® Desire – Technical Specifications. [http://www.htc.com/de/product/desire/specification.html] (accessed 02.06.2011) International Digital Publishing Forum (2010). EPUB 2.0.1 [http://idpf.org/epub/201] (accessed 16.05.2011) International Digital Publishing Forum (2011). EPUB 3 Overview. [http://idpf.org/epub/30/spec/epub30overview.html] (accessed 18.04.2011) International Digital Publishing Forum (2010). Open Publication Structure (OPS) 2.0.1. v1.0.1. [http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm] (accessed 16.05.2011) Lupton, E. (2010). Thinking with Type. A critical guide for designers, writers, editors & students. 2nd rev. And expanded ed. New York: Princeton Architectural Press Marmarelli, T. / Ringle, M. (2011). The Reed College iPad Study. Portland, Oregon, USA: The Reed Institute Microsoft Corporation (2008). Advanced Typographic Extensions – OpenType Layout. [http://www.microsoft.com/typography/otspec/TTOCHAP1.htm] (accessed 31.05.2011) Mod, C. (2011). A Simpler Page. [http://www.alistapart.com/articles/a-simpler-page/] (accessed 02.05.2011) Nielsen, J. (1997). How Users Read on the Web. [http://www.useit.com/alertbox/9710a.html] (accessed 20.04.2011) Nielsen, J. (2010). iPad and Kindle Reading Speeds. [http://www.useit.com/alertbox/ipad-kindle-reading.html] (accessed 20.04.2011) Pearson, J. / Buchanan, G. / Thimbleby H. (2010). HCI design principles for ereaders. Toronto, Ontario, Canada: ACM Peters, K. (2010). Kindle and iPad Displays: Up close and personal. [http://www.bit-101.com/blog/?p=2722] (accessed 12.05.2011) Reichenstein, O. (2010). iPad: Scroll or Card?. [http://www.alistapart.com/articles/a-simpler-page/] (accessed 29.04.2011) Reichenstein O. (2006). Web Design is 95% typoraphy. [http://www.informationarchitects.jp/en/the-web-is-allabout-typography-period/] (accessed 20.04.2011) Samsung Electronics Austria GmbH® 2011. Samsung® Galaxy Tab – Technical Specifications. [http://www.samsung.com/at/microsite/galaxytab/] (accessed 02.06.2011) Schwarz. R (2011). Zwischen den Zeilen ... Pixel. In: Weave 2011, 03, p36 Sony Europe Limited® 2011. Sony PRS350 – Technical Specifications. [http://www.sony.at/product/rd-readerebook/prs-350#pageType=TechnicalSpecs] (accessed 02.06.2011)

33

Media Technology

Subbaram, V. M. (2004). Effect of display and text parameters on reading performance. Dissertation, The Ohio State University. Walk, J. (2010). Grundlagen der LED Beleuchtungstechnik. Weisenmiller, E. M. (1999). A study of the readability of on-screen text. Dissertation, Blacksburg: Virginia Polytechnic Institute and State University

34

Media Technology

List of figures Figure 1: the multidirectional axis (cf. Mod 2011, [http://www.alistapart.com/articles/a-simpler-page)] ........... 13   Figure 2: the infinite canvas (cf. Mod 2011, [http://www.alistapart.com/articles/a-simpler-page/]) ................... 14   Figure 3: iPad at magnification levels of 26% (left) and 365% (right) (Peters 2011, [http://www.bit101.com/blog/?p=2722])..................................................................................................................................... 17   Figure 4: Kindle at magnification levels of 26% (left) and 400% (right) (Peters 2011, [http://www.bit101.com/blog/?p=2722])..................................................................................................................................... 17   Figure 5: a book at magnification levels of 26% (left) and 400% (right) (Peters 2011, [http://www.bit101.com/blog/?p=2722])..................................................................................................................................... 17   Figure 6: kerned (left) and unkerned (right) combinations ................................................................................ 22   Figure 7: Ampersands ....................................................................................................................................... 22   Figure 8: combinations with (left) and without (right) ligatures .......................................................................... 22   Figure 9: Quotation Marks ................................................................................................................................. 23   Figure 10: Italics between roman letters ........................................................................................................... 24   Figure 11: Small Caps between roman letters .................................................................................................. 24   Figure 12: Drop Caps from Alejandro Paul, Darren Booth and Linzie Hunter for the Daily Drop Cap project (Hische 2011, [www.dailydropcap.com]) ............................................................................................................ 26  

35

Media Technology

List of tables Table 1: electronic devices, print media, resolutions & point densities .............................................................. 15   Table 2: What eBooks can & cannot do: an overview ....................................................................................... 27  

36