Schlagwort-Archive: HTML

#ePrdctn 9 – Drop Caps

Bevor dieses Blog komplett zur Werbeveranstaltung verkommt. Gebe ich mal wieder eine Lektion in E-Production. In „Blackbox Urheberrecht“ (verzeiht bitte) verwende ich Drop Caps. Zumindest in der ePub-Version. In Mobi sind sie mangels Unterstützung sowohl in den klassischen Kindles als auch in den Apps unter den Tisch gefallen. Lediglich der Kindle Fire konnte sie darstellen. (Updates seit April 2013 können das geändert haben).

Drop Cap in Julia Schramm: Kunst ist Kritik.

Julia Schramm: Kunst ist Kritik. In: Daniel Brockmeier (Hrsg.): Blackbox Urheberrecht. Frankfurt 2013.

Was sind Drop Caps?

Drop Caps sind Versalien oder Initialen. Der erste Buchstabe eine Kapitels, der ein besonderes Design erhält. Ich mag den englischen Ausdruck, weil er schon ansatzweise erklärt, was wir später in CSS machen: Ein Kapitälchen, das nach unten fällt. Drop Caps sind einfach ins Layout einzufügen aber machen nachher einiges her. Das Buch wirkt dann einfach edler. Der Leser sieht, dass ihr euch beim Layout Mühe gegeben habt…

Drop Cap mit Hilfe von HTML uns CSS erstellen

In HTML gibt es nicht viel zu tun: Ihr legt um euren ersten Buchstaben ein <span> und gebt ihm einen aussagekräftigen Namen.

<span class="dropcap">E</span>s ist offenbar nicht mehr möglich, PRO Urheberrecht zu sein.

Aus: Johnny Haeusler: Ich heb‘ dann mal ur. In: Daniel Brockmeier (Hrsg.): Blackbox Urheberrecht. Frankfurt 2013.

In der CSS Datei, die ihr natürlich im Kopf eures Dokuments richtig verlinkt haben müsst, müsst ihr dann nur noch das Aussehen eurer Initiale definieren, wobei ihr eurer Phantasie freien Lauf lassen könnt. Ich entschied mich für:

span.dropcap {
float: left;
font-size: 4.7em;
line-height: 0.8em;
margin-right: 3pt;
margin-bottom: -0.1em;
}

float gibt an, ob bzw. dass der Abschnitt vom restlichen Text umflossen werden soll. left definiert, dass das <span> in diesem Umfluss links steht (was ich regelmäßig verwechsle und immer denke, es bedeutet, dass das span von links her umflossen wird).

Der Rest sollte eigentlich klar sein. font-size definiert die Schriftgröße, line-height definiert die Zeilenhöhe (das muss nicht drinstehen, das hatte ich nur eingefügt, weil die von mir gewählte Schriftart zu recht großen Zeilenzwischenräumen führte) und margin den Abstand… Ihr solltet relative Werte nehmen, also em oder % damit die Drop Cap ihre Größe relativ zur vom Leser gewählten Schriftgröße hält.

Das war’s schon. Wie ich sagte: keine große Sache, aber ein großer Effekt.

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn

#ePrdctn 7 – Listen in E-Books

Heute wollte ich eigentlich mal mehrere Antworten auf Google-Suchanfragen schnell hintereinander beantworten, doch dann blieb ich schon an der ersten hängen und habe gebastelt und – #hach – lest selbst…

Der Suchbegriff, mit dem jemand auf meine Seite kam, lautete „css-befehl für aufzählungszeichnen“

Die Frage hier lautet für mich zunächst, was der oder die Suchende meint.

Dazu sollte ich zwei Sätze zum grundsätlichen Verhältnis von HTML und CSS verlieren: HTML (das „M“ steht für „Markup“) zeichnet ein bestimmtes Element in deiner Datei als etwas aus. Besipielsweise wird ein bestimmter Abschnitt deines E-Books als Liste ausgezeichnet. CSS hingegen legt das Aussehen dieser ausgezeichneten Elemente fest (das erste „S“ steht für „Style“).

Wenn du, liebe/r Suchende/r also wissen wolltest, wie du Listen erstellst, so ist CSS die falsche Sprache dazu.
Stattdessen kannst du geordnete (ordered) Listen, also solche mit Ordnungszahlen, und ungeordnete (unordered) Listen, das sind die mit Aufzählungszeichen, in HTML auszeichnen.

Die Befehle sehen folgendermaßen aus:

<ul>
<li>ul bezeichnet die „unordered List“</li>
<li>li bzeichnet den Listenpunkt</li>
</ul>

oder eben:

<ol>
<li>ol steht dann für die „ordered List“</li>
<li>li hingegen hat die gleiche Bedeutung</li>
</ol>

Kleiner Grammatiknerdeinschub: Am Ende von Auzählungspunkten macht man keine Punkte. NIE! Vergesse ich aber dauernd…

Beide Arten der Listen werden auf jeden Fall unterstützt von ePub2, ePub3 und kf8. Bei mobi7 bin ich mir nicht ganz sicher, aber wer will denn auch noch mobi7 schreiben?

Wenn es dir hingegen tatsächlich um den Stil der Liste ging, dann stehst du zunächst einmal vor der Wahl, ob du das Aussehen deiner Listen universell oder doch lieber individuell festlegen möchtest.

Wenn du allen ordered lists den gleichen Stil zuweisen möchtest, lautet der Befehl, den du in die CSS-Datei eintragen musst, folgendermaßen:

ol {
list-style-type: upper-roman;
}

Wenn du hingegen ein Freund des Individualismus bist, musst du zunächst einmal Klassen vergeben. Deine ungeordnete Liste musst du etwa so benennen: <ul class=“smiley“>

Dann kannst du im CSS für jede Liste das Aussehen einzeln bestimmen:

ul.smiley {
list-style-image: url('smiley.png');
}

Wie dz siehst, habe ich einmal einen der vordefinierten Typen verwendet und einmal ein Bild als Aufzählungspunkt. Beide Varianten werden ganz sicher unterstützt von ePub2, ePub3 und kf8. Ich habe mir die Listen in einem halben Dutzend Readern angeguckt, bis auf Stanza lösten alle meine Listen mit dem fantastischen Smiley smiley problemlos auf.

Das Beispiel-E-Book habe ich wieder hier zur Verfügung gestellt.

Ausführlich aufgeschlüsselt, wie du Stile Listen zuweisen kannst, findest du hier.

Eine Auflistung der zulässigen Werte hingegen hier.

Viel Spaß!

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn

#ePrdctn 3 – Der Dokumenttyp

ePub arbeitet mit HTML-Dateien. Euren eigentlichen Buchtext schreibt ihr in diese Datei, zeichnet ihn mit den entspechenden Befehlen aus und könnt ihm anschließend mit Hilfe von CSS die Haare schön machen.

Deklaration des Dokumenttyps

Der erste Schritt, um ein HTML-Dokument für euer Buch zu erstellen, ist, dieses als ein HTML-Dokument auszuzeichnen.

Dafür dient die kryptische Zeichenfolge am Anfang des Dokuments. Diese wird praktischerweise von Sigil automatisch erstellt, aber da Aufklärung der Weg aus der selbstverschuldeten Unmündigkeit ist, schauen wir uns einfach mal an, was da steht.

Die erste Zeile sieht wie folgt aus:

Auszeichnung als XML Dokument

Die Zeile wird eingeklammert mit

Dokumentdefinitionsklammer

was der Maschine, die das Dokument liest, sagt, dass es hier die Dokumentdefinition findet. Als nächstes steht da

xml version=“1.0“

Das bedeutet, dass dieses Dokument eines vom Typ XML ist und sich an die Version 1.0 hält. Das dürfte jetzt etwas verwirren, da ich ja eben noch gesagt habe, wir haben es mit einem html-Dokument zu tun. Nun XML ist zunächst einmal die Metasprache. Das sagt der Maschine, wie unsere Auszeichnungen aufgebaut sind, besipielsweise:

Beispiel einer Auszeichnung

Während HTML oder genauer XHTML dann ein Subset der Metasprache ist, das definiert, was denn in diesem XML-Dokument gültige Auszeichnungen sind. Etwa zeichnet

Absatzauszeichnung

einen Absatz aus.

Doch zurück zu unserer ersten Zeile. Als nächstes steht da

encoding="utf-8"

Das definiert den Zeichensatz, in dem ihr euren Text geschrieben habt. Ich hatte die Hintergründe dazu erst kürzlich verlinkt. Die Maschine schaut einfach in einer Tabelle nach, welch komisches Zeichen ihr da verwendet und gibt es dann entsprechend aus.
Ihr müsst nicht unbedingt utf-8 benutzen, Spiegel Online verwendet beispielsweise „iso-8859-1“. Allerdings ist utf-8 weitverbreitet und leistet gute Arbeit. Ihr könntet sogar ein E-Book in Klingonisch schreiben, und utf-8 wäre in der Lage dieses darzustellen. Daher würde ich einen Wechsel nur empfehlen, wenn ihr dafür triftige Gründe habt.

Die letzte Auszeichnung in der ersten Zeile lautet

standalone="no"

Das sagt der Maschine, dass die Definition (Document Type Definition (DTD)) für die XML-Sprache, die ihr verwendet (in unserem Fall also XHTML), nicht in dieser Datei mitgeliefert ist. Stattdessen wird der Ort einer Referenzdatei, auf die ihr euch bezieht, in der nächsten Zeile zusammen mit der Definition als XHTML-Datei geliefert.

Auszeichnung als XHTML-Datei

In dieser Zeile steht also endlich, dass es sich um ein Dokument vom Typ html handelt, dass es auf der Version XHTML 1.1 des W3C basiert, dass es auf Englisch (damit sind die Auszeichnungen gemeint, nicht euer eigentlicher Text) verfasst ist und wo die Referentdatei zu finden ist.

Damit ist die Definition des Dokumententyps abgeschlossen und ihr beginnt mit der eigentlichen html-Auszeichnung, die eingerahmt wird von den Tags

HTML-Tag

In unserem Fall steht da:

XHTML-Tag

Da wir in unserer ePub-Datei XHTML verwenden, wird das hier noch einmal spezifiziert und der Maschine gesagt, wo es wieder den Katalog mit den gültigen Auszeichnungen findet, in dem dann steht, dass etwa

p-Tag, h1-Tag, div-Tag

etc. gültige Auszeichnungen sind.

Das ist unsere Dokumentenauszeichnung. Als nächstes könnt ihr noch ein paar Angaben im Kopfbereich
head-Tag

der HTML-Datei machen und zu guter letzt euren Inhalt in den

body-Tag

hineinmeißeln.

Viel Spaß!

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn

#Eprdctn 1 – Die ePUB-Datei

Ich habe hier jetzt schon so oft erzählt, dass ich es voll drauf habe mit der #Eprdctn *hüstel*, da dachte ich mir, ich sollte das auch langsam mal unter Beweis stellen. Ich möchte dies tun, indem ich euch einfach mal unser Objekt der Begierde vorstellen möchte: Das E-Book.
Wie ein guter Anatom (oder sagt man Anatomist?) möchte ich das von innen heraus tun. Im Zentrum davon wird das Dateiformat ePUB stehen, wobei es für heute erst einmal egal ist, ob in der Version 2 oder 3.

Warum ePUB? Ganz einfach!

Meiner bescheidenen Meinung nach ist PDF gar kein E-Book-Format, sondern eine exhumierte Datei, mit der man ein Layout zur Druckerei trägt. Klar es gibt wunderschöne PDFs, auch die neuen interaktiven Elemente sind (teilweise) durchdacht und machen Spaß, aber um PDF geht es mir hier schlichtweg nicht. Wollt ihr ein PDF erzeugen, dann besorgt euch am besten InDesign, das ist und bleibt das beste Layoutprogramm für diesen Zweck. Wenn ihr gerade keine 900€ im Sparschwein habt, dann könnt ihr mit ‚Word‘ oder dem ‚OpenOffice Writer‘ auch schon ein bisschen was anfangen und aus letzterem sogar direkt PDFs exportieren.

Unser dritter Kandidat, das Mobipocket-Format, also die Kindle-nativen Dateien wiederum sind kein offenes Format. Es gibt zwar vertrackte Methoden, eine Mobipocket-Datei zu öffnen (leider finde ich gerade den Link nicht, ich werde ihn nachreichen), aber eigentlich will Amazon das nicht und es ist auch nicht notwendig, denn im Grunde steckt dahinter das gleiche wie bei ePUB und Amazon empfiehlt sogar explizit, dass man sein E-Book in ePUB schreibt und dieses dann anschließend mit dem KindleGen in mobi umwandelt. Natürlich muss man darauf achten, welche Spezifikationen kf8 (das ist die neueste Sprache, die hinter mobi steckt) unterstützt und welche nicht. Ich habe rechts die Dokumentation verlinkt.

ePUB

Womit ich also bislang gearbeitet habe und weiter arbeiten werde, ist ePUB. Die erste Frage, die sich uns stellt, ist: wie erzeuge ich denn so eine ePUB-Datei. Ein ePUB ist im Grunde nichts weiter als ein Zip-Ordner. Ihr könnt sogar euer E-Book umbenennen von DieUndertaker24.COM/YEAH!.epub in .zip und es anschließend entpacken. Aber vorsichtig! Macht das nicht mit der einzigen Version, die ihr habt, denn wenn ihr es anschließend wieder zippt und umbenennt, ist es unleserlich. Ihr müsst es ganz speziell zippen, für Mac habe ich unter ‚Tools‘ ja bereits ein Programm hierfür vorgestellt, für andere Betriebssysteme suche ich noch.

Im Grunde könntet ihr also alle Dateien stur mit einem Texteditor schreiben, dann verpacken und hättet so euer ePUB. Natürlich gibt es komfortablere Methoden. Beispielsweise könnt ihr euer E-Book erst in einem anderen Programm layouten, angefangen vom einfachen Texteditor über Word bis hin wieder zu InDesign und das so entstandene Dokument dann mit diversen Tools in ePUBs umwandeln. Da gibt es Tools, die bessere Ergebnisse liefern (einmal mehr: InDesign) und welche die schlechtere liefern (etwa Calibre). Schließlich bleibt euch noch der Weg, mit einem speziellen ePUB-Editor zu arbeiten (einzig mir bekannter: Sigil) und da ich gerade eben nicht die 900 Euronen für InDesign habe, Calibre mir zu unsauber arbeitet und wir so oder so den Code noch einmal Zeile für Zeile anschauen müssen, wenn wir gute Ergebnisse wollen, wird Sigil das Instrument meiner Wahl sein.

Die Ordnerstruktur eines ePUB

Doch noch nicht heute, wo es mir erst einmal ums Kennenlernen geht. Denn Sigil versteckt vor uns pflichtbewusst all die Dateien, die wir nicht brauchen, sondern die Sigil automatisch erzeugen kann. Daher habe ich ein ePUB, an dem ich gerade bastle, entpackt und stelle es euch hier vor. Leser, das ist ePUB. ePUB, das ist der Leser.

ePUB-Datei

Wie ihr sehen könnt, stecken in unser Datei zwei Ordner und eine mimetype-Datei. Die mimetype definiert für jede Maschine, die versucht, unser ePUB zu lesen, um welchen Dateityp es sich handelt. Die Wikipedia erklärt das ganz wunderbar, sodass ich hier gar nicht weiter darauf eingehen muss.

Ordner Meta-Inf in der ePUB-Datei

Der Ordner META-INF ist ebenfalls schnell abgehandelt, er enthält lediglich eine XML-Datei, die nichts weiter tut, als dem Lesegerät zu sagen, dass es eigentlich alle Infos, die es braucht im Ordner OEBPS in der Datei content.opf findet.

Wirklich spannend ist also der Ordner OEBPS. Das steht für ‚Open eBook Publication Structure‘ und ist ein Relikt aus den Anfängen der digitalen Bücher, denn der Vorläufer unseres ePUB-Standards nannte sich noch ‚Open eBook‚. Schön, dass wir uns so noch ein bisschen an ihn erinnern.

Ordner OEBPS einer ePUB-Datei

Dieser OEBPS-Ordner wurde von Sigil erzeugt. Der Inhalt muss nicht bei jedem ePUB genauso aussehen, aber die hier vorhandenen Elemente müssen immer da sein. Gehen wir sie der Reihe nach durch.

content.opf

Das Herzstück ist die Datei content.opf. Es handelt sich hierbei um die Container-Datei, die hauptsächlich mit dem Reader kommuniziert, indem sie ihm sagt, wo er welches Dateiformat findet, in welcher Reihenfolge er die Textdateien anzeigen soll und welche Metainformationen der Editor mitgeliefert hat. Wir werden uns noch ausführlich mit der content.opf befassen, denn ohne sie gibt es kein E-Book. Hier ist nur erst einmal wichtig, dass alle Ordner und Dateien in der content.opf ausgezeichnet sein müssen, oder sie existieren für die Lesegeräte schlichtweg nicht. Solange ihr das aber macht, könnt ihr die wildesten Ordnerstrukturen anlegen oder komplett auf Ordner verzichten.

Fonts

Als nächstes haben wir da den Ordner ‚Fonts‘, in den ihr einfach alle Schriftsätze packt, die ihr in eurem E-Book verwenden wollt, am besten im ‚Open Type‘-Format. Aber Obacht! Schaut euch die Lizenzen der Fonts genau an. Dürft ihr sie verwenden? Dürft ihr sie auch kommerziell verwenden? Und last not least: dürft ihr sie denn auch weitergeben? Wie ich oben beschrieben habe, kann jeder, der ein ePUB erwirbt (das nicht mit DRM versehen ist) dieses einfach entpacken und sich die Schriftsätze herausholen. Meines Wissens nach gibt es noch keinen Präzedenzfall, ob der Verlag dann für die Weitergabe haftet.

Images

Der Ordner ‚Images‘ enthält entsprechend alle Bilder, die im ePUB verwendet werden sollen.

Styles

Der Ordner ‚Styles‘ enthält die CSS-Datei, die später der Hauptverantwortliche sein wird für das Aussehen eures E-Books. Wenn ihr wollt, könnt ihr auch mehrere CSS-Dateien verwenden, ihr müsst sie nur entsprechend angeben. Ferner müsst ihr beachten dass ePUB (genau wie mobi) nicht alle CSS-Befehle akzeptiert, die im Web funktionieren. Außerdem gibt es eine Handvoll Befehle, die im Netz keinen Sinn machen würden und ePUB-spezifisch sind. Das alles findet ihr in den von mir verlinkten Dokumentationen und ich werde später auch noch genauer darauf eingehen.

Text

Als nächstes haben wir da noch den Ordner ‚Text‘ in diesem steckt – ihr habt es bestimmt erraten – unser eigentlicher Buchtext. Und zwar in Form von HTML-Dokument(en). Prinzipiell könnt ihr alles in ein HTML-Dokument packen. Allerdings sind besonders die reinen E-Reader in Sachen Rechenleistung etwas schwach auf der Brust, sodass ich euch das nicht raten kann. Genauso könntet ihr für jeden Satz ein eigenes HTML-Dokument anlegen, aber auch das ist nicht ratsam, denn bei jeder neuen Datei fügen die Reader automatisch und notgedrungen einen Seitenumbruch ein. Ihr solltet euch also vor Beginn eine sinnvolle Dokumentstruktur überlegen. Als Faustregel sind Kapitel ein guter Beginn.

Das Inhaltsverzeichnis

Schließlich haben wir noch die Datei mit dem kryptischen Namen toc.ncx. Das ist das Inhaltsverzeichnis (Table of Content). So ziemlich jeder Reader kann Seitenunabhängig immer auf das Inhaltsverzeichnis zugreifen. Damit dies gelingt, braucht er die toc.ncx.

So lieber Leser, das ist also unser ePUB. Ich hoffe, es ist dir sympathisch und du schaust mal wieder rein. Bis dahin: viel Spaß!

2 Kommentare

Eingeordnet unter #ePrdctn