{"id":845,"date":"2010-11-30T16:25:43","date_gmt":"2010-11-30T15:25:43","guid":{"rendered":"http:\/\/www.sachaheck.net\/blog\/?p=845"},"modified":"2012-03-20T21:14:20","modified_gmt":"2012-03-20T20:14:20","slug":"indesign-to-epub","status":"publish","type":"post","link":"https:\/\/www.sachaheck.net\/blog\/indesign\/indesign-to-epub","title":{"rendered":"InDesign to ePub Leitfaden (Teil 2)"},"content":{"rendered":"

EDIT 20.3.2012: Im April 2010 habe ich den folgenden Artikel ver\u00f6ffentlicht. Im November darauf einen zweiten Teil<\/a> des ePub-Leitfadens. Mittlerweile ist daraus ein komplettes Buch entstanden. Manche Infos im Artikel sind nicht mehr unbedingt aktuell. Wer sich also \u00fcber aktuelle Techniken im E-Book-Bereich informieren m\u00f6chte kann sich Yves Apel<\/a>s und mein Buch mal ansehen:<\/p>\n

\"ePub<\/a><\/p>\n

Im Teil 1 des E-Book-Leitfaden hier im Blog<\/a> wurden die Basics beschrieben, wie man Dokumente in InDesign f\u00fcr den bestm\u00f6glichen ePub-Export vorbereitet. Nun ist der ePub-Export (XHTML \/ Digital Editions) aus InDesign CS4 und CS5 (Stand November 2010) nicht so unbedingt der Wahnsinn. Da ist noch mehr drin. Aber bis dahin m\u00fcssen wir noch abwarten. Gespannt darf man auf CS6 sein, denn momentan ist ja auch bei Adobe alles Richtung Digital Media gestellt. Die Wahrscheinlichkeit, dass die n\u00e4chste InDesign Version da so manches bietet, ist relativ gro\u00df.<\/p>\n

Dennoch ist in ePub viel mehr m\u00f6glich als das, was der automatische Export her gibt. Der Trick besteht darin, die ePub-Datei auseinander zu nehmen und manuell die (X)HTML- und CSS-Dateien weiter zu bearbeiten. Via CSS stehen sehr viele weitere Layoutm\u00f6glichkeiten zur Verf\u00fcgung.<\/p>\n

In den letzten paar Wochen habe ich einiges intensiv getestet. Momentan steht an Literatur nur Englisch-sprachiges zu Verf\u00fcgung. Da haben wir zum einen das Werk von Elisabeth Castro<\/a> und dann das E-Book von Rufus Deuchler<\/a>. (Achtung, das Buch von Rufus gibt’s nur als E-Book zu erwerben.) Vor allem das Buch von Liz Castro ist sehr hilfreich f\u00fcr das Verstehen der Zusammenh\u00e4nge mit ePub. Jedoch hat f\u00fcr mich nicht alles einwandfrei funktioniert und ich musste einige Dinge ab\u00e4ndern. Im Folgenden werden deshalb einige L\u00f6sungen vorgestellt die mir geholfen haben, ein m\u00f6glichst gutes ePub zu erstellen, das auch ein wenig meinen typografischen Anspr\u00fcchen gen\u00fcgt ;-)<\/p>\n

ePub entzippen und wieder zur\u00fcck zippen<\/h1>\n

Eine ePub Datei ist ja ansich eine ZIP-Datei. M\u00f6chte man sehen, aus welchen Dateien so eine ePub-Datei besteht, h\u00e4ngt man einfach an den Dateinamen anstatt .epub die Endung .zip an und enzippt sie dann mit Hilfe eines Programmes wie Stuffit Expander <\/a>auf dem Mac oder dem Mac-internen Tool, auf Windows z.B. mit Winzip<\/a> oder Win-RAR<\/a> o.\u00e4.<\/p>\n

Nach dem Entzippen erhalten wir einen Ordner mit allen Dateien die ein ePub ausmachen:<\/p>\n

\"\"<\/p>\n

Es gibt hier f\u00fcr jedes Kapitel eine eigene XHTML-Datei. Das \u00bbtemplate.css\u00ab beinhaltet die Regeln f\u00fcr das Aussehen unseres E-Books. Im Ordner Images finden wir nat\u00fcrlich unsere Bilder. In der Datei \u00bbtoc.ncx\u00ab werden die Infos zum Inhaltsverzeichnis gespeichert, der \u00bbNavigation Map\u00ab. Auch die Datei content.opf werden wir sp\u00e4ter nachbearbeiten.<\/p>\n

Per AppleScript<\/h2>\n

Man kann jetzt diese Dateien einfach mit einem Texteditor z.B. bearbeiten. Aber um aus diesem Ordner wieder ein ePub, ein lesbares E-Book zu machen, m\u00fcssen wir den Ordner wieder zur\u00fcck zippen und wieder die Endung \u00bbepub\u00ab hinten dran h\u00e4ngen. Leider kann man z.B. nicht einfach mit dem Stuffit-Expander oder dem Mac-internen ZIP-Tool den Ordner wieder packen und epub dran h\u00e4ngen. Das Buch ist dann nicht mehr lesbar. Auf dem Mac kann man ein Applescript nutzen, das diese Aufgabe \u00fcbernimmt. Ich habe z.B. im Mobileread<\/a>-Forum dieses AppleScript<\/a> gefunden das sehr gute Dienste leistet. Einfach Ordner drauf ziehen per Drag&Drop und schon wird’s umkonvertiert ohne weiteres Zutun.<\/p>\n

Per Terminal<\/h2>\n

Es ist auch m\u00f6glich, das Zur\u00fcckpacken zum ePub h\u00e4ndisch vorzunehmen. Auf dem Mac geht das mit dem Terminal (Programme \/ Dienstprogramme). Hier tippen wir nun:<\/p>\n

cd [dann hier den Ordner mit den enzippten Dateien hineinziehen per Drag&Drop, Enter]
\ndann eingeben:<\/p>\n

zip -0Xq MeineDatei.epub mimetype [Enter]<\/pre>\n
zip -Xr9Dq MeineDatei.epub * [Enter]<\/pre>\n
Jetzt befindet sich wieder eine ePub Datei in dem Ordner mit dem Namen MeineDatei.epub. \u00bbMeineDatei\u00ab einfach ggf. umbenennen:<\/p>\n
\"\"<\/a><\/p>\n
F\u00fcr Windows-User d\u00fcrfte das Info-ZIP<\/a> Programm gute Dienste hierbei leisten. (Mangels Windows-Rechner noch nicht getestet)<\/p>\n
Tools zur ePub-Bearbeitung<\/h1>\n
Sigil<\/h2>\n
Bei Sigil<\/a> handelt es sich um ein Google Open-Source Projekt, ein Programm zum Editieren von ePub-Dateien. Das hei\u00dft, dass das Programm sowohl f\u00fcr Mac als auch f\u00fcr Windows und Linux verf\u00fcgbar ist. Was bei Sigil cool ist: Man braucht die ePub-Datei nicht erst zu entzippen um sie zu bearbeiten. Sigil kann auch so den Inhalt der Datei \u00bbsehen\u00ab. Bei den Beispielen weiter unten kommt Sigil zum Einsatz. Da Sigil ein Open Source Projekt ist und immer weiter verbessert wird, kann es sein, dass man auf Bugs trifft w\u00e4hrend der Arbeit. So habe ich z.B. festgestellt, dass Sigil (Version 0.3.1), Inhaltsverzeichnisse (Navigation Maps) die mit InDesign exportiert werden, nicht mehr erkennt und diese einfach ignoriert. Allerdings kann man den Fehler durch einen Workaround beheben durch manuelles Nachbearbeiten der toc.ncx-Datei. Das werden wir weiter unten sehen.<\/p>\n
Textwrangler<\/h2>\n
Hat man die ePub-Datei entzippt, kann man die Dateien mit einem einfachen Texteditor bearbeiten. Allerdings ist es viel bequemer, spezielle Editoren zu benutzen. Diese k\u00f6nnen bei der richtigen Syntax behilflich sein bzw. helfen, den \u00dcberblick zu behalten indem sie Teile des Codes farbig auszeichnen. Textwrangler<\/a> ist ein beliebter Editor f\u00fcr Mac, der kleine Bruder von BBEdit<\/a>. Eine Alternative w\u00e4re z.B. Textmate<\/a>. F\u00fcr Windows gibt es Notepad++<\/a>. Andere Alternativen findet man auch auf der alternative.to-Plattform<\/a>.<\/p>\n
Calibre<\/h2>\n
Calibre<\/a> ist ebenfalls ein Open-Source-Tool, f\u00fcr Mac, Windows und Linux verf\u00fcgbar. Calibre ist nicht wie Sigil dazu gedacht am Code zu arbeiten, sondern ist vor allem ein Konvertierungstool. So kann man ePub-Dateien bspw. f\u00fcr Amazons Kindle aufbereiten und ins Mobi-Format konvertieren. Aber auch etliche andere Konvertierungen sind m\u00f6glich. Au\u00dferdem kann man mit Calibre z.B. Metadaten erg\u00e4nzen oder ein neues Coverbild einf\u00fcgen. Als Enduser kann man mit Calibre auch sein E-Book-Archiv pflegen. Ich pers\u00f6nlich benutze es vor allem f\u00fcr Konvertierungen zu anderen E-Book-Formaten.<\/p>\n
Firefox ePub-Reader<\/h2>\n
Es gibt f\u00fcr Firefox ein cooles Plug-in, ePub-Reader<\/a>. Einmal installiert, kann man mit Firefox ePub-Dateien \u00f6ffnen und lesen. Das Tool eignet sich vor allem zur Kontrolle. Es ist immer gut, ein produziertes E-Book in verschiedenen Readern zu testen. Man erkennt da teilweise erhebliche Unterschiede bei der Darstellung, auch bei den Hardware-Readern.<\/p>\n
Adobe Digital Editions<\/h2>\n
Digital Editions<\/a> ist der ePub-Viewer von Adobe. Der Viewer von Adobe ist empfehlenswert zur Kontrolle der bearbeiteten ePub-Dateien. Digital Editions setzt die CSS-Stile gut um, im Gegenteil z.B. zum E-Reader Stanza<\/a>. (Bei meinen Tests schneidet Stanza am schlechtesten ab, was die Umsetzung von meinen Layoutvorgaben betrifft)<\/p>\n
Dreamweaver<\/h2>\n
Wer Dreamweaver<\/a> installiert hat, besitzt bereits ein gutes Authoring-Tool f\u00fcr ePub-Dateien. Dreamweaver ist ja das professionelle Web-Authoring Tool von Adobe und besitzt einen guten Code-Editor. Ein Vorteil bei Dreamweaver ist auch, dass man CSS-Klassen z.B. visuell mit Hilfe des Dialogfensters bearbeiten kann wenn man die genaue CSS-Syntax nicht kennt. Ich benutze Dreamweaver gerne um ein bestimmtes Layoutelement WYSIWYG zu definieren und danach den CSS-Code zu kopieren.<\/p>\n
ePub-Check<\/h2>\n
Der ePub-Check<\/a> ist ein Tool das zu Verf\u00fcgung gestellt wird um die Dateien gegenzupr\u00fcfen ob auch alles dem Standard entspricht. Man sollte das ganz zum Schluss einmal tun, vor allem wenn man sp\u00e4ter seine E-Books auf Apples Plattform iBooks verkaufen m\u00f6chte. Besteht die Datei den ePub-Check nicht, kann es gut sein dass sie vom iBooks-Store abgelehnt wird weil nicht konform \u2026<\/p>\n
InDesign-to-Kindle Plug-in<\/h2>\n
Amazon hat vor einiger Zeit sein InDesign-to-Kindle Plugin<\/a> herausgebracht. Das ist auch sehr lobenswert. Das Problem ist nur, dass man eigentlich nicht wirklich viele Einstellungsm\u00f6glichkeiten hat: Die Navigation Map l\u00e4\u00dft sich via TOC-Style exportieren. Dann hat man die M\u00f6glichkeit ein Coverbild zu bestimmen und man kann dem E-Book einen Namen geben. Das war’s dann auch schon. Wenn der Export den Anspr\u00fcchen gen\u00fcgt, ist es eine M\u00f6glichkeit ein Amazon-optimiertes E-Book aus InDesign heraus zu bekommen. Um allerdings ein hochwertiges E-Book zu produzieren, kommt man derzeit nicht um eine extensive Nachbearbeitung herum.<\/p>\n
Erweiterte ePub-Bearbeitung<\/h1>\n
Bilder im Text verankern<\/h2>\n
Im ersten Teil des E-Book Leitfadens<\/a> wurde schon erkl\u00e4rt, dass Bilder im Text verankert werden sollten, damit sie in der richtigen Reihenfolge exportiert werden. Werden Bilder nicht im Textfluss verankert, wird zuerst der ganze Text exportiert und erst danach die Bilder. Den besten Einfluss darauf, was in welcher Reihenfolge exportiert werden wird, hat man, wenn tats\u00e4chlich alles im Textfluss verankert wird. Man schneidet dazu das Bild mit Apfel(Strg)-X aus, platziert den Cursor im Text vor den betreffenden Absatz wo das Bild nachher erscheinen soll, f\u00fcgt einen neuen Absatz ein und kopiert das Bild aus der Zwischenablage da hinein. Zuerst verdeckt das Bild den restlichen Text. Man kann dem aber Abhilfe schaffen indem dem Absatz mit dem Bild ein eigenes Absatzformat zugewiesen wird. Z.B. ein Absatzformat \u00bbBild\u00ab. In diesem Absatzformat sollte man nun den Zeilenabstand auf \u00bbAutomatisch\u00ab setzen. Dadurch passt sich der Abstand \u00fcber und nach dem Bild automatisch an die H\u00f6he des Bildes an. Man sollte auch immer einen \u00bbAbstand vor\u00ab und \u00bbAbstand nach\u00ab eintragen damit die Bilder nachher nicht am Text kleben. Diese Abst\u00e4nde werden ins ePub \u00fcbernommen.<\/p>\n
\"\"<\/p>\n
Soll dem Bild eine Bildlegende hinzugef\u00fcgt werden, kann man diese einfach in einem Absatz nach dem Bild einf\u00fcgen:<\/p>\n
\"\"<\/p>\n
Bilder mit Text umflie\u00dfen<\/h2>\n
Manchmal m\u00f6chte man Bilder vielleicht nicht so gro\u00df abbilden und z.B. ein Portrait einfach in den Text einbinden. Was in Programmen wie InDesign ganz einfach per Textumflie\u00dfen-Optionen geschieht, wird bei einem ePub-Export ganz einfach ignoriert. Bisher (November 2010) ist es auch nicht m\u00f6glich, mit InDesign die Datei so vorzubereiten, dass Bilder mit Text im exportierten ePub umflossen werden. Man kanns nur so vorbereiten, dass nachher die Optionen dazu zur Verf\u00fcgung stehen. Das geschieht wieder einmal mit Hilfe der Absatz- und Zeichenformate. Noch lange nicht alle Einstellungen der Absatz- und Zeichenformate werden ins ePub \u00fcbernommen aber was auf jeden Fall geschieht, ist: Es wird eine Klasse daf\u00fcr im CSS vorgesehen. Durch Bearbeitung der CSS-Datei kann man dann das gew\u00fcnschte Aussehen erreichen.<\/p>\n
Man kann zwar durch CSS vieles im ePub erreichen, jedoch h\u00e4ngt es immer vom Endger\u00e4t ab, was wie dargestellt wird. Bei einer meiner Tests z.B. stellte das Amazon Kindle Bilder, die umflossen werden sollten nicht richtig dar. Der Sony-Reader hingegen perfekt so wie’s vorgesehen war. Das ist eben auch der Nachteil am ePub. Ebenso wie es viele verschiedene Browser gibt auf denen Webseiten anders aussehen, so gibt es auch viele E-Reader die alle ihre eigenen Regeln umsetzen. Momentan m\u00fcssen wir damit wohl leben und k\u00f6nnen nur versuchen unsere ePub-Datei so hinzubiegen, damit sie m\u00f6glichst \u00fcberall gut aussieht, auch wenn man bei manchem Reader auf typografische Feinheiten eher verzichten mu\u00df.<\/p>\n
Wie umflie\u00dft man nun Bilder? Zuerst einmal m\u00fcssen die Bilder wieder im Textfluss verankert werden. Wie im vorangegangenen Beispiel, f\u00fcgen wir erst eine Leerzeile ein und kopieren dann das ausgeschnittene Bild in den Textfluss. Dann geben wir dem Absatz ein Absatzformat, wobei diesmal der Zeilenabstand nicht auf \u00bbautomatisch\u00ab steht sondern auf 0. Abst\u00e4nde vor und nach k\u00f6nnen hier auch raus genommen werden:<\/p>\n
\"\"<\/p>\n
Danach kann das verankerte Bild mit Hilfe der Optionen f\u00fcr Verankerte Objekte richtig platziert werden. Achtung (!!!):<\/strong> Dies hat jedoch gar keine Auswirkungen auf das exportierte ePub. Es dient nur zu besseren Darstellung in unserem InDesign-Dokument. F\u00fcr das ePub ist nur wichtig, dass der Absatz indem das Bild steht, mit einem eigenen Format gekennzeichnet ist.<\/p>\n
\"\"<\/p>\n
Nat\u00fcrlich kann man dem Bild \u00fcber die Umflie\u00dfen-Optionen einen bestimmten Abstand zum Text mitgeben. Aber auch dies hat keine Auswirkung auf unsere ePub.<\/p>\n
Bild umflie\u00dfen per CSS<\/h3>\n
Um das Bild in der ePub-Datei nun tats\u00e4chlich zu umflie\u00dfen, mu\u00df man die CSS-Datei bearbeiten. Zuerst wird unser Dokument exportiert wie im Teil 1 des Leitfadens<\/a> beschrieben. Um die CSS-Datei zu bearbeiten kann man entweder die ePub-datei entzippen oder eben das Ganze mit Sigil bearbeiten ohne irgendwas entzippen zu m\u00fcssen.<\/p>\n
Zun\u00e4chst sieht unser XHTML-Dokument so aus:<\/p>\n
\"\"<\/p>\n
Das Bild wird noch nicht umflossen. Werfen wir aber ein Blick in den Code, sehen wir, dass das Bild in ein <p>-Tag eingebettet ist und mit einer Klasse \u00bbbild-umfliessen\u00ab versehen ist.<\/p>\n
\"\"<\/p>\n
Das ist wichtig, denn wir \u00e4ndern nun den Eintrag f\u00fcr die Klasse \u00bbbild-umfliessen\u00ab nur ein wenig ab. Dazu \u00f6ffnen wir die template.css-Datei. Hier finden wir den entsprechenden Eintrag:<\/p>\n
\"\"<\/p>\n
Hier stehen nur die Dinge drin, die InDesign mitexportieren kann. Dazu geh\u00f6rt das Bild-Umflie\u00dfen leider nicht. Wir f\u00fcgen also jetzt manuell folgende zwei Zeilen hinzu:<\/p>\n
float: left;
\npadding: 0 15px 0 0;<\/strong><\/p>\n
Die 15px bei Padding bestimmen den Abstand vom Text zum Bild. 1. Wert: Abstand oben, 2. Wert: Abstand rechts, 3. Wert: Abstand unten, 4. Wert: Abstand links. Unser CSS sieht nun so aus:<\/p>\n
\"\"<\/p>\n
Achtung auf die richtige Syntax! Das Resultat im E-Book sieht dann so aus:<\/p>\n
\"\"<\/p>\n
Dokument nachtr\u00e4glich in Kapitel aufteilen<\/h2>\n
Eine M\u00f6glichkeit, das E-Book in Kapitel aufzuteilen ist im ersten Teil des Leitfadens<\/a> beschrieben worden. Dazu erstellt man einzelne InDesign-Dateien die dann in ein Buch importiert werden. Diese einzelnen Dokumente werden nachher beim Export zu einzelnen XHTML-Dateien. Man kann aber auch so arbeiten, dass man alles in einem einzigen Dokument verwaltet und die Kapitel erst nachher einf\u00fcgt. Der Vorteil liegt nat\u00fcrlich im schnelleren Dokument-Management. Die Einteilung in Kapitel ist jedes Mal dann notwendig, wenn man m\u00f6chte, dass im E-Book nachhher eine neue Seite beginnt. Mit Sigil ist das ganz einfach machbar:<\/p>\n
Man stellt den Cursor einfach in den Text an die Stelle wo das Dokument aufgeteilt werden soll und w\u00e4hlt in Sigil aus dem Men\u00fc \u00bbInsert\u00ab \u00bbChapter Break\u00ab:<\/p>\n
\"\"<\/p>\n
Dadurch wird in der linken Leiste ein XHTML-Dokument hinzugef\u00fcgt. Man kann dieses dann umbennen wie man m\u00f6chte:<\/p>\n
\"\"<\/p>\n
Kapitel sind au\u00dferdem wichtig zur Navigation. Man kann z.B. einen Hyperlink erstellen der dann auf eine bestimmte XHTML-Seite verweist. Dazu weiter unten mehr.<\/p>\n
Initialien (Drop Caps) erstellen<\/h2>\n
Initialien kann man im ePub auf \u00e4hnliche Art und Weise erstellen wie die Bild-Umflie\u00dfen-Funktion: per CSS. Es gibt nur ein Problem bei der Funktionsweise von InDesign bei Initialien: Auch wenn f\u00fcr den Absatz ein Absatzformat angelegt wird, in dem Initialien definiert werden, wird dem Initial selbst jedoch kein Zeichenformat zugewiesen. Genau das ist jedoch wichtig, damit InDesign eine <span>-Klasse exportiert:<\/p>\n
\"\"<\/p>\n
Man mu\u00df also das Zeichenformat \u00bbInitial\u00ab manuell zuweisen, bzw. bei mehreren per Suchen\/Ersetzen-Routine:<\/p>\n
\"\"<\/p>\n
Nachdem das Ganze wieder exportiert wurde (siehe ersten Teil des Leitfadens<\/a>), werfen wir einen Blick in den XHTML-Code:<\/p>\n
\"\"<\/p>\n
Erst einmal hat das \u00fcberhaupt keinen Effekt:<\/p>\n
\"\"<\/p>\n
Unser Absatz f\u00e4ngt an mit einer Deklaration der Klasse \u00bbtext-initial\u00ab (unser Absatzformat) und dann folgt eine <span>-Klasse \u00bbinitial\u00ab f\u00fcr unser Initial \u2013 nur f\u00fcr den Buchstaben \u00bbU\u00ab. Diese span-Klasse ist es, die wir jetzt in der template.css-Datei bearbeiten m\u00fcssen. In der CSS-Datei steht folgendes:<\/p>\n
\"\"<\/p>\n
Die Klasse ist also leer. InDesign hat hier gar nichts rein geschrieben. Deshalb erg\u00e4nzen wir den CSS-Eintrag nun manuell:<\/p>\n
float: left;
\nfont-size: 3.2em;
\nmargin-top: 0.25em;
\nmargin-tight: 0.05em;<\/strong><\/p>\n
Unser CSS sieht nun so aus:<\/p>\n
\"\"<\/p>\n
In der HTML-Ansicht sieht man die Auswirkung davon:<\/p>\n
\"\"<\/p>\n
Man mu\u00df hier ggf. etwas mit den Werten spielen um den erw\u00fcnschten Effekt zu erreichen.<\/p>\n
Inhaltsverzeichnisseite manuell erstellen<\/h2>\n
In einem ePub bzw. E-Book, wie wir es hier verstehen, gibt es keine Seitenzahlen. Es wird linear gelesen. Eine bestimmte Textpassage kann im Sony-Reader auf Seite 15, auf einem iPad aber bspw. auf Seite 10 angezeigt werden. Das kann man nicht im voraus wissen. Bei E-Books ist es m\u00f6glich zwei verschiedene Arten von Inhaltsverzeichnissen zu erstellen: Die \u00bbNavigation Map\u00ab die bei den meisten Readern in einer Seitenleiste angezeigt wird oder man kann auch ganz vorne eine Seite einf\u00fcgen mit Inhaltsverzeichnis. Dieses verweist dann aber nicht auf eine bestimmte Seitenzahl, sondern mit Hilfe von Hyperlinks springt man zu einer bestimmten Textpassage.<\/p>\n
Diese Seite mit dem Inhaltsverzeichnis wird schon in InDesign angelegt. Man kann jetzt hier die Hyperlinks definieren die dann auf einen zuvor gesetzten Textanker verweisen. Ich bevorzuge allerdings die Bearbeitung im ePub, da man hier das Ganze mehr im \u00dcberblick hat und sofort den Code entsprechend korrigieren kann. Dazu wird die Inhaltsseite ganz einfach als Text exportiert:<\/p>\n
\"\"<\/p>\n
Anker setzen<\/h3>\n
Um im Inhalt per Hyperlink auf eine Textstelle verweisen zu k\u00f6nnen, mu\u00df auf sog. Textanker verwiesen werden, da es Seitenzahlen ja nicht gibt. Um so einen Textanker zu definieren, geht man in den XHTML-Code und sucht die betr. Stelle. Einen Textanker definiert man so:<\/p>\n
<a id=“MeinTextanker“><\/a><\/strong><\/p>\n
Die Zeile wird einfach vor die Textstelle eingef\u00fcgt auf die man verweisen m\u00f6chte:<\/p>\n
\"\"<\/p>\n
Links erstellen und verweisen<\/h3>\n
Zur\u00fcck zur Seite mit unserem Inhaltsverzeichnis. Da wir jetzt den Textanker erstellt haben, kann nun auf diesen verwiesen werden. Wir suchen also im Quellcode den Text den wir mit einem Hyperlink versehen m\u00f6chten. Der Link zum Textanker wird erstellt durch:<\/p>\n
<a href=“..\/Text\/Datei.xhtml#MeinTextanker“>Hier kommt der Text hin<\/a><\/strong><\/p>\n
Der Link verweist erst mal in den Ordner \u00bbText\u00ab in dem die XHTML-Dateien im ePub zu finden sind, dann auf die entsprechende XHTML-Datei in dem sich der Textanker befindet und dann mit der Raute (#) auf die sog. ID. Diese haben wir weiter oben im Abschnitt \u00bbAnker setzen\u00ab definiert. Achtung auf die richtige Syntax!<\/p>\n
\"\"<\/p>\n
Der Link im Inhalt ist gesetzt. Alles super. Man wird aber feststellen, dass die Links in dem h\u00e4sslichen Standard-Blau und unterstrichen daher kommen. Aber durch ein wenig CSS kann man auch das leicht verbessern.<\/p>\n
Aussehen von Hyperlinks ver\u00e4ndern<\/h2>\n
Wenn im CSS nichts explizit ausgewiesen wird, werden Hyperlinks automatisch im Standard-Blau dargestellt. Um das Aussehen zu ver\u00e4ndern gehen wir kurz in die CSS-Datei template.css.<\/p>\n
Links haben verschiedene Zust\u00e4nde: link = normale Darstellung, hover = wenn man mit der Maus dr\u00fcber f\u00e4hrt, active = wenn man gerade drauf klickt, visited = nachdem man schon mal drauf geklickt hat. F\u00fcr all diese Zust\u00e4nde kann man nun das Aussehen definieren. F\u00fcr die Syntax und M\u00f6glichkeiten kann z.B. die Seite SelfHTML<\/a> weiter helfen.<\/p>\n
Zwei Dinge sind hier vor allem meiner Meinung nach interessant: Die h\u00e4ssliche Unterstreichung weg zu bekommen und das Standard-Blau an eine Farbe anzupassen die vielleicht sonst noch im Buch vorkommt. Die Unterstreichung bekommt man weg indem man \u00bbtext-decoration\u00ab auf \u00bbnone\u00ab setzt. Wir f\u00fcgen also am Schluss der CSS-Datei die 4 Zust\u00e4nde des Hyperlinks hinzu, jeweils mit der Eigenschaft \u00bbtext-decoration: none\u00ab. Im folgenden Beispiel wurde nur beim Zustand \u00bbhover\u00ab eine Unterstreichung zugelassen. Durch die Eigenschaft \u00bbcolor\u00ab kann man dann auch noch einen anderen Farbwert definieren.<\/p>\n
\"\"<\/p>\n
Um einen bestimmten Farbwert aus einem Bild zu benutzen, sampelt man diesen mit der Pipette in Photoshop und kann dann im Farbw\u00e4hler den Wert ablesen:<\/p>\n
\"\"<\/p>\n
Das Resultat sieht dann im Reader z.B. so aus:<\/p>\n
\"\"<\/p>\n
Es wird nur unterstrichen wenn man mit der Maus dr\u00fcber f\u00e4hrt und dann aber auch in einer anderen Farbe, hier: #973c07. Das sieht doch schon professioneller aus als das Standard-Blau.<\/p>\n
Bildgr\u00f6\u00dfe(n) ver\u00e4ndern<\/h2>\n
Wie gro\u00df wird mein Bild im ePub? Ich platziere ein Bild in InDesign z.B. mit 195 mm Breite. Man kann jetzt in Photoshop bspw. ausrechnen wieviel Pixel breit mein Bild im ePub wird. Wir erstellen einfach ein neues Dokument mit 195 mm Breite und best\u00e4tigen danach mit OK.<\/p>\n
\"\"<\/p>\n
Wenn wir jetzt in den Bildgr\u00f6\u00dfen-Dialog gehen, sehen wir oben die Pixelbreite:<\/p>\n
\"\"<\/p>\n
Achtung: Das ist aber nur so, wenn, wie im ersten Teil des E-Book Leitfadens<\/a> beschrieben wird, das ePub exportiert wird mit der Bild-Export-Funktion \u00bbOptimiert\u00ab. Ansonsten werden die Bilder immer 1:1 ausgegeben, egal wie sie in InDesign skaliert wurden. Um dann einen Einfluss auf die Gr\u00f6\u00dfe der Bilder zu nehmen, m\u00fcsste man dann nachtr\u00e4glich durch CSS die Bildgr\u00f6\u00dfen \u00fcberall optimieren.<\/p>\n
Bildgr\u00f6\u00dfe per CSS ver\u00e4ndern<\/h3>\n
Es ist klar, dass es auch im ePub nicht die optimale Bildgr\u00f6\u00dfe gibt, da man ja nicht wei\u00df, auf welchem Endger\u00e4t das ePub gelesen wird. Manchmal m\u00f6chte man aber vielleicht dass ein Bild immer \u00fcber die volle Breite geht. Man kann das z.B. ganz einfach per CSS l\u00f6sen.<\/p>\n
Wenn man aus InDesign ein ePub exportiert erh\u00e4lt man folgenden XHTML-Code:<\/p>\n
\"\"<\/p>\n
Das Problem hierbei ist, dass die Klasse innerhalb des <p>-Tags steht. Damit folgender Trick aber funktioniert, muss er innerhalb des <img>-Tags stehen:<\/p>\n
<p><img class=“bild100″<\/span> src=“..\/Images\/photo212.jpg“ alt=“photo212.jpg“ \/><\/p><\/strong><\/p>\n
D.h. dem Bild wird hier eine Klasse \u00bbbild100\u00ab zugewiesen. Nun m\u00fcssen wir dieser Klasse sagen, dass sie die volle Breite einnehmen soll. Dazu \u00f6ffnen wir die template.css-Datei und f\u00fcgen den CSS-Code dazu ein:<\/p>\n
.bild100 {
\nwidth: 100%;
\n}<\/strong><\/p>\n
Mit dieser Einstellung wird das Bild jetzt die ganze Breite der Anzeige einnehmen.<\/p>\n
Man kann auch direkt in den img-Tag die Anweisung platzieren. Etwa so:<\/p>\n
\"\"<\/p>\n
Allerdings kann es sein, dass das nicht f\u00fcr alle Leseger\u00e4te funktioniert.<\/p>\n
Navigation bearbeiten<\/h2>\n
Als \u00bbNavigation Map\u00ab wird das interaktive Inhaltsverzeichnis bezeichnet, das bei den meisten E-Readern in der linken Seitenleiste zu finden ist. Hier als Beispiel links das von Digital Editions und rechts das E-Pub-Reader Firefox Plug-in:<\/p>\n
\"\"<\/p>\n
Man kann diese Navigation Map schon aus InDesign heraus vorbereiten indem man TOC-Styles erstellt. Wie das geht, wurde im ersten Teil des E-Book Leitfadens<\/a> besprochen. Ein Problem gibt es hier aber: Die TOC-Styles werden in InDesign auf Basis der Absatzformate erzeugt. Nehme ich z.B. mein Absatzformat \u00bbKapiteltitel\u00ab mit auf, wird eine Navigation daraus erstellt. Was aber mache ich mit Seiten, die zwar in der Navigation auftauchen sollen, die aber keinen speziellen Titel haben? Z.B. Impressum, Widmung, Coverseite o.\u00e4.? Hier mu\u00df wieder die manuelle Bearbeitung her. Aber eigentlich ist das Bearbeiten der Navigation Map sehr einfach. Sie wird generiert aus der Datei toc.ncx innerhalb unseres ePub-Ordners. Man kann diese toc.ncx-Datei einfach in einem Texteditor \u00f6ffnen. Ich mag dazu z.B. Textwrangler<\/a> nehmen:<\/p>\n
\"\"<\/p>\n
Die Datei ist mit \u00bbnavPoint\u00ab-Eintr\u00e4gen aufgebaut. Ich kann nun z.B. einfach so einen Textblock kopieren (hier rot dargestellt) um einen weiteren Navigationspunkt in der Navigation Map einzuf\u00fcgen. Im Tag <text> steht der Text der nachher angezeigt werden soll. Bei <content src=“Text\/MeineDatei.xhtml“ \/> mu\u00df auf die entsprechende XHTML-Datei verwiesen werden die man ansteuern m\u00f6chte. Gibt es f\u00fcr die Seite noch keine einzelne XHTML-Datei m\u00fcsste man zun\u00e4chst, wie weiter oben beschrieben, das Dokument in weitere Kapitel aufteilen.<\/p>\n
Eine andere M\u00f6glichkeit w\u00e4re, auch hier auf Textanker zu verweisen. Wie man Textanker erstellt wird weiter oben erkl\u00e4rt und im jetzt folgenden Beispiel der Verschachtelung von Navigationseintr\u00e4gen sieht man im Screenshot wie man auf den Textanker in der toc.ncx-Datei verweist.<\/p>\n
Verschachtelung von Eintr\u00e4gen<\/h3>\n
Es ist auch m\u00f6glich, Hierarchien zu erzeugen. In der \u00bbNavigation Map\u00ab erscheint dann z.B, ein Ausklapppfeil mit Unterkapiteln etwa:<\/p>\n
\"\"<\/p>\n
Um das zu erzeugen, mu\u00df entweder im InDesign Dokument diese Hierarchie schon vorbereitet werden oder man erstellt diese manuell nachher in der toc.ncx-Datei indem man die navPoint-Eintr\u00e4ge verschachtelt. Hier im folgenden Screenshot sieht man z.B. die toc.ncx dieser hier dargestellten Map:<\/p>\n
\"\"<\/p>\n
Der erste navPoint-Tag wird erst zum Schluss geschlossen. Dazwischen stehen noch die navPoint-Eintr\u00e4ge der zwei Unterkapitel.<\/p>\n
Coverbild zurechtr\u00fccken<\/h2>\n
Wenn man als erstes Dokument f\u00fcr das ePub den Buchdeckel vorsieht, wird dieses Bild auch schon automatisch verwendet um in der Vorschau angezeigt zu werden. Jedoch kann es hier vorkommen, dass das Bild nicht ganz hineinpasst und ein gutes St\u00fcck rechts und unten abgeschnitten wird. Man kann das Beheben durch einen kleinen Eingriff in die cover.html-Datei sowie die Datei mit dem Namen content.opf. In der HTML-Datei f\u00fcgen wir folgenden CSS-Befehl zu unserem <img>-Tag, das unser Bild enth\u00e4lt, hinzu:<\/p>\n
style=\"max-width: 100%;\"<\/pre>\n
\"\"<\/p>\n
Danach gehen wir in die content.opf-Datei.<\/p>\n
\"\"<\/p>\n
Hier m\u00fcssen wir die Zeile:<\/p>\n
<meta name=“cover“ content=“MeineID“\/><\/strong><\/p>\n
einf\u00fcgen. Bei \u00bbname\u00ab sollte immer \u00bbcover\u00ab als Wert stehen. Der Wert von \u00bbcontent\u00ab sollte derselbe sein wie unten im Manifest-Tag die ID des Buchdeckels. Jetzt sollte das Coverbild richtig skaliert angezeigt werden:<\/p>\n
\"\"<\/p>\n
Schlusswort<\/h1>\n
Der momentane Stand von E-Books ist nur der Anfang einer neuen \u00c4ra. Das ePub-Format eignet sich momentan auch nur f\u00fcr Dinge die linear gelesen werden. Nachschlagewerke oder reich illustrierte B\u00fccher sind noch davon ausgenommen. Villeicht \u00e4ndert sich das aber ja noch. Wer wei\u00df was ich hier in 10 Jahren z.B. schreiben werde. Aber da gibt es auch noch einen anderen Zug: Der der digitalen Magazine und L\u00f6sungen wie die von Woodwing<\/a> oder von Adobe<\/a>. Hier hat man layouttechnisch weitaus mehr M\u00f6glichkeiten, jedoch ist man da auch an Hardware gebunden, z.B. iPad, was aber nicht jeder hat … also m\u00fcssen auch z.B. Android-Plattformen bedient werden und andere Plattformen ebenfalls. Aber vielleicht ist ja auch die Adobe Air<\/a>-Technologie geeignet um eine plattformneutrale L\u00f6sung zu schaffen …? Wir bleiben gespannt und freuen uns auf das Publishing … 4.0?? ;-)<\/p>\n
Hier wurden nun einige Tricks und Workarounds vorgestellt, die ich durch Studieren von ePub, dem Lesen von Fachliteratur (Liz Castro<\/a>, Rufus Deuchler<\/a>), dem Diskutieren in den HilfDirSelbst-Foren<\/a>, dem Verfolgen des #ePrdctn Hashtags auf Twitter<\/a> und nat\u00fcrlich durch viel Trial & Error raus gefunden habe. Viele Dinge fehlen bestimmt noch und dem ein oder anderen werden Dinge einfallen die man mit ePub auch noch machen m\u00f6chte, an die ich noch gar nicht gedacht habe. In diesem Fall freue ich mich \u00fcber interessante Kommentare hier im Blog, auf der HilfDirSelbst-Plattform<\/a> oder auch pers\u00f6nlich<\/a>.<\/p>\n
[like]<\/p>\n
\u00dcber neue Artikel auf dem Laufenden bleiben?<\/p>\n
\"\"<\/p>\n