Schlagwort-Archive: CSS

Neue Wege #10 – E-Books, SoBooks, CSS

Sobooks

Sascha Lobo verkündet auf dem Projektblog von Sobooks… ja… was eigentlich? Zum einen, dass E-Books in der aktuellen Ausgestaltung scheiße sind. Da hat er vollkommen recht, aber die Analyse ist ja nicht neu. Dennoch lustig ist diese Passage:

E-Book-Welt wäre eine bessere, wenn EPUB-Dateien nicht vom sehr begabten Sohn der Nachbarin des Cheflektors für 27 Euro pro Stück zusammengedängelt würden.

Sascha Lobo: Über E-Books und Sobooks

Hihi…

Zum anderen erklärt Lobo, dass er mit SoBooks alles besser machen wird und deshalb den Starttermin ersteinmal in den Juni verschieben wird. Ich bleibe trotzdem gespannt!

CSS

Ich habe die „Dokumentationen“ Linkliste um diese schöne Doku erweitert: CSS Paged Media Module Level 3. Ist zwar schon ein Jahr alt, bin ich aber erst gestern drüber gestolpert. ePub3 sollte alle diese Auszeichnungen unterstützen. Aber ihr kennt das ja… Die Reader tun’s dann halt doch meistens nicht. Vielleicht wird ja mit SoBooks alles besser…

Advertisements

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn, Nachrichten

#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

Neue Wege #8

Die Links meiner kleinen Nachrichtenschau sind diesmal zwar überwiegend etwas älter, aber nichtsdestotrotz spannend.

01.01.2013
Da dieses Blog ja erst Oktober 2012 an den Start ging, habe ich euch einen Jahresrückblick erspart. Connect übernimmt das „für mich“, indem sie aufzeigen, welche Entwicklung die mobile Fotografie 2012 genommen hat.

Ebenfalls 01.01.2013
Wenn du dass hier liest, bist du mit einer gewissen Wahrscheinlichkeit Autor, der seine eigenen Werke verlegen möchte. Wie du dich passend zum neuen Jahr und seinen guten Vorsätzen zum Schreiben motivieren kannst, erklärt Anjali Sachdeva auf Creative Nonfiction.


Und noch einmal am 01.01.2013

Wurde es ganz undigital. Flavorwire zeigte etwas, das E-Books und E-Publishing vielleicht kaputt machen werden: die 20 schönsten Buchläden der Welt.

27.12.12
Noch ein Jahresrückblick. DBW präsentierte die 10 wichtigsten Stories des Jahres 2012 rund ums digitale Publizieren.

24.12.12
Pünktlich zum heiligen Abend erklärte die Huffington Post worauf man unter rechtlichen Aspekten beim Selfpublishing achten muss. Der Text richtet sich zwar an amerikanische Indiepublisher, aber so manchen guten und auch in guten alten Europa anwendbaren Tipp hält er bereit.

18.12.12
Die Aufregung war groß, als Instagram seine AGB änderte. Einen angenehm entspannte Position dazu vertrat hingegen René Hesse.
Dem kann ich mich nur anschließen: Instagram ist keine große Kunst, sondern Schnappschüsse, die durch bereitgestellten Filter aufgehübscht werden. Meine dürfen sie gerne vermarkten und ihr auch, wenn ihr wollt. Ich stelle alle meine Instagram-Bilder unter eine CC0-Lizenz. Namensnennung und Beleg währen nett, sind aber keine notwendige Bedingung.

Am 13.12.12
widmete sich Enno Lenze dem leidigen Thema der Online-Vermarktung journalistischer Texte. Leider ohne kreativen, neuen Ansatz, aber das liegt ja vielleicht im Problem begründet.

05.12.11
Auch schon etwas älter ist diese schöne Übersicht von ePubSecrets mit Links und Hinweisen, wie du Schriftarten in ePub einbetten kannst. Ich werde mich demnächst auch mal ausführlicher dem Thema widmen.

Bereits am 11.04.2012
Wenn du E-Books automatisch generierst, etwa mit meinem ganz besonderen Liebling Calibre, oder auch wenn du diese Arbeit von einem professionellen Konvertierungsdienst machen lässt, entsteht oft sehr viel sinnloser Code. India, Ink. erklärt, wie du deine CSS-Datei in so einem Fall systematisch aufräumen kannst.

28.9.11
Und noch weiter in der Vergangenheit entstanden, aber passend zum Brüder Grimm Jahr fand ich diesen Artikel über die schönsten Illustrationen von grimmschen Märchen von Maria Popova auf brain pickings.

 

Hinterlasse einen Kommentar

Eingeordnet unter Nachrichten

#ePrdctn 6 / Antwort auf die Google-Suche: Seitenzahlen in E-Books

Eine der häufigsten Suchanfragen, über die mein Blog gefunden wird, lautet „Seitenzahlen eBook/ePub/Mobi“. Grund genug, mich dem Thema noch einmal ausgiebiger zu widmen.

Screenshot eines von mir designten E-Books

Screenshot eines von mir designten E-Books

Grundsätzlich gibt es bei E-Books keine Seiten mehr. Sowohl bei ePub als auch bei Mobi handelt es sich um ein fortlaufendes Dokument. Das liegt am Responsive Design, also der Eigenschaft, dass der Text flexibel umbrechen kann. Dieses Responsive Design ist durch zweierlei motiviert: 1. ist die Schriftgröße verstellbar, kann also nach Geschmack und Sehvermögen vergrößert oder verkleinert werden. 2. Sind E-Books für mobile Endgeräte designet: E-Reader, Tablets und Smartphones. Diese Geräte verfügen über die unterschiedlichsten Displays. Das Responsive Design sorgt nun dafür, dass sich der Text immer dem Display anpasst, sodass man nur in eine Richtung scrollen oder blättern muss. Wer schon einmal eine statische Webseite auf dem Smartphone oder ein PDF auf dem Kindle gelesen hat, weiß, dass Responsive Design eine große Errungenschaft ist, denn statische Seiten führen zu wahren Scrollexzessen.

Allerdings sehe ich, dass die Notwendigkeit für Seitenzahlen in E-Books gegeben sein kann. Nämlich, wenn ich ein Printbuch nachträglich digitalisiere und es zitierfähig erhalten möchte.

Bei der Angabe von Quellen ist die Angabe der Seitenzahl eine Konvention. Eigentlich ist sie zwar im E-Book nicht länger nötig, denn dafür müssen wir uns nur den Zweck einer Quellenangabe klarmachen: die Quelle schnell und eindeutig zu finden. Klar, wenn ich ein 1000-Seiten starkes Buch vor mir habe, möchte ich es nicht komplett lesen müssen, um zu prüfen ob Herr zu Guttenberg richtig zitiert hat. Nun ist aber jede E-Reader-Software, die mir bekannt ist, mit einer Suchfunktion ausgestattet. Das heißt, dass die Angabe einer Seitenzahl obsolet ist, denn mit einer eindeutigen Werksangabe und einer kurzen Phrase (ich schätze drei Wörter genügen) im Suchfeld findet man das Zitat schnell und sicher.

Allerdings hat sich diese Erkenntnis noch nicht verbreitet, weswegen ich von Fällen gehört habe, in denen Dozenten in Hausarbeiten ihrer Studenten E-Books als Quellenangabe als nicht zitierfähig ablehnten. Es muss sich also noch eine Standardzitation für E-Books etablieren, so wie sie sich zu Beginn meines Studiums für das Internet durchsetzen musste. Bis es soweit ist, will ich hier eine Lösung vorstellen, wie man die Seitenzahlen der Printausgabe übernehmen könnte.

Nun ist es zwar so, dass die meisten E-Reader Seitenzahlen anzeigen, aber das sind weitgehend Phantasiewerte um den Lesern irgendeine Orientierung zu bieten. Daher sollte man sie nicht zum Zitieren nutzen, denn sie variieren je nach Reader.

Eine andere Möglichkeit wäre natürlich Fixed Layout. Mit kf8, iBooks und ePub3 kann man das Responsive Design „abschalten“ um fixierte Seiten zu Layouten. Allerdings ist dieser Ansatz auch grundverkehrt, geradezu absurd. Denn der umfließende Text ist eine Errungenschaft von E-Books und Fixed Layout nur dazu da, um Bücher zu realisieren, die nicht überwiegend Fließtext enthalten: etwa Bilderbücher. Wenn ihr euer Buch fixiert layoutet, dann müsst ihr es nämlich wieder speziell auf ein Device mit einer spezifischen Displaygröße auslegen.

CSS Formate für Seitenzahlen

Nein, die Lösung, die ich hier vorstellen möchte, zeigt im Fließtext an, wo sich im Original die Seitenzahlen befanden, ähnlich wie man dies etwa aus manchen Reclams kennt. Natürlich könnte man sie einfach mit [XY] in den Text schreiben, aber ich habe mir eine Lösung überlegt, die ich etwas eleganter finde.

Screenshot: einer Seitenzahl in ePub

Screenshot: einer Seitenzahl in ePub

Dazu habe ich einen meiner Texte als PDF, als ePub und als Mobi gelayoutet. Die Dateien könnt ihr hier zur freien Verfügung downloaden. In der CSS findet ihr dann zwei Absatzformate, die meine Lösung enthalten:


p.letzterabsatz {
text-align : justify;
margin-bottom : 2em;
page-break-after: avoid;
}


p.seite {
text-align : right;
font-size : 0.7em;
page-break-after: always;
}

Das Absatzformat „p.letzterabsatz“ ist (ihr erinnert euch: sprechende Namen sind wichtig!) jenes für den letzten Absatz vor der Seitenzahl. Seine Attribute sind: Blocksatz, unterhalb des Absatzes ein Abstand von 2em und – das ist das Wichtige – dass nach dem Absatz ein Seitenumbruch vermieden werden soll.

Das Absatzformat „p.seite“ wiederum enthält die Spezifikationen für den Absatz, der die Seitenzahl enthalten soll. Er ist rechtsbündig, die Schriftgröße ist etwas kleiner als der reguläre Fließtext und nach diesem Absatz soll immer ein Seitenumbruch vollzogen werden.

Ich habe die Formate in verschiedenen Readern ausprobiert und wenn man die Schriftgröße nicht gerade zum absoluten Maximum ausreizt, sorgen die Absatzformate dafür, dass die Seitenzahl nie alleine steht, sondern immer am Fuße eines Absatzes. Ihr werdet feststellen, dass ich es mir etwas leichter gemacht habe, indem die PDF-Vorlage nie einen Seitenumbruch innerhalb eines Satzes enthält, was natürlich nicht realen Bedingungen entspricht, wenn ihr tatsächlich ein Printbuch nachträglich in ein E-Book umwandeln wollt und die Seitenzahlen an der genau richtigen Stelle behalten wollt.

Ach ja, ihr solltet auf alle Fälle im Impressum oder einer Legende erklären, was es mit den Seitenzahlen auf sich hat, denn an dem Screenshot oben seht ihr ja, dass sie von den Seitenzahlen des Readers höchstwahrscheinlich abweichen und somit verwirren können.

Und bitte versprecht mir, dass ihr dieses Format nur im „Notfall“ einsetzt und nicht anfangt, wie blöd jetzt E-Books mit Seitenzahlen zu generieren, denn das wäre ein Schritt zurück. Ansonsten wünsche ich euch viel Spaß damit. Wie gesagt, die Dateien findet ihr hier.

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn

#ePrdctn 5 – das <body>-Element

Zwischen <body> und </body> schreibt ihr euren eigentlichen Buchtext. Dazu könnt und solltet ihr verschiedene Auszeichnungen benutzen.

Screenshot eines Body-Auszugs einer ePub2-Datei

Screenshot eines Body-Auszugs einer ePub2-Datei

Die wichtigsten Auszeichnungen sind der einfache Absatz <p> und die Überschriften <h1>, <h2> … Wenn ihr einen Roman im Fließtext schreiben wollt, ist das im Grunde alles, was ihr braucht, vielleicht noch hin und wieder ein <span>-Tag um dazwischen vom Standard abweichenden Text zu formatieren, wie etwa fett oder kursiv. Aber natürlich erschöpft sich ePub nicht darin, ihr könnt Tabellen anlegen, Listen mit Ziffern oder Aufzählungszeichnen anlegen, Bilder integrieren, mit div-Containern arbeiten und und und. MobileRead bietet eine vollständige Liste der zulässigen XHTML-Tags für ePub2, die ich hier nicht wiederholen muss. ePub3 unterstützt HTML5 komplett, soweit ich das sehe. Allerdings unterstützt – um es mal wieder zu sagen – bislang noch kaum ein Reader ePub3.

Eine wichtige Anmerkung: Ihr solltet konsequent mit den Attributen id=“...“ und class=“...“ arbeiten.

das id-Attribut in HTML

Mit Hilfe von id werdet ihr später eure Überschriften aus dem Inhaltsverzeichnis heraus ansprechen. Das ist ein sehr schönes Feature, wenn ihr nicht nur eure HTML-Dateien verlinkt, sondern das Textdokument weiter strukturieren könnt. Ich werde darauf zurückkommen.

das class-Attribut in HTML

class wiederum ist die Auszeichnung, die von CSS angesprochen wird. So könnt ihr mehrere Stile für das gleiche Tag verwenden. Beispielsweise gab es mal eine schöne Edition der unendlichen Geschichte (als Printbuch) in der der Text abwechselnd schwarz und rot war. (Ich glaube je nach Protagonist). In ePub realisiert könnte das mit den Tags <p class=“red“>Bastian Balthasar Bux</p> und <p class=“black“>Atréju</p> realisiert werden. In der CSS-Datei würdet ihr dann für p.red und p.black jeweils die Textfarbe definieren.

Das bringt mich auch zum letzten Punkt für heute: Arbeitet mit sprechenden Namen! Ihr werdet verzweifeln, wenn ihr im css nur kryptische Klassen von p.1 bis p.29453 habt. CSS ist zwar nicht „Case Sensitive“- unterscheidet also nicht zwischen Groß- und Kleinschreibung, dennoch lohnt es sich bei den Auszeichnungen mit „Highlightning“ zu arbeiten, wenn ihr komplexe Namen habt. Also: class=“AbsatzVorDemSchlusswort“.

Fortsetzung folgt.

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn

#ePrdctn 4 das <head>-Element in ePub2 und ePub3

Die heutige Lektion ist schnell erklärt. Im <head> werden Metaangaben zur einer Seite gemacht. Während aber der <head> in Webseiten eine eigene Wissenschaft ist, ist er in einer ePub2-Datei ein Leichtgewicht und wird auch in Version 3 nur etwas schwerer.

Der <head> einer ePub2-Seite

Der <head> einer ePub2-Seite

In ePub2 befinden sich im <head>-Bereich lediglich das <title>-Tag, in das ihr den Namen des Dokuments schreibt. Ich habe schon zuvor erwähnt, dass Kapitel eine gute Einheit pro XHTML-Dokument in einer ePub-Datei sind. Das kann ich hier nur wiederholen, denn so lässt sich in <title>Der Titel des Kapitels</title> schreiben.

Zweitens setzt ihr einen Link im <head> auf euer Stylesheet:
<link href=“../Styles/Lebenslauf.css“ rel=“stylesheet“ type=“text/css“ />
href – definiert den Link als Hyperlink
../Styles/Lebenslauf.css – gibt das Linkziel an.
rel – definiert die Art des Links, nämlich dass es ein
stylesheet – ist.
Type – konkretisiert die Art des stylesheets
text/css – es handelt sich um ein Stilesheet vom Typ css.

Das war es.

Man kann die CSS-Angaben auch direkt in den Kopf hineinschreiben. Das ist ePub2-konform und ich habe es sogar schon gesehen, allerdings will mir beim besten Willen nicht einleuchten, warum man das tun sollte.

Calibre ist ganz groß darin den <head> im Stile einer Webseite aufzublasen, aber die Angaben die Calibre dort macht, entsprechen nicht dem ePub-Standard, entsprechend ist fraglich, ob überhaupt ein Reader etwas damit anfangen kann.

ePub3

Auch bei ePub3 ist der <head> nicht viel größer, es kommen lediglich ein paar Spezifikationen hinzu.

Zum einen gibt es noch den Befehl trigger, der angibt, welche Aktionen bei einer eingebundenen Multimediadatei möglich sind. Zulässige Werte sind: show, hide, play, pause, resume, mute und unmute.

Ferner erlaubt ePub3 das Einbinden von Javascript, was ebenfalls im <head> passiert. Und zwar entweder direkt oder analog zu CSS über einen Link auf ein externes Dokument.

Und zu guter letzt unterstützt ePub3 noch Text-to-Speech, weshalb man im <head> die „W3C Pronunciation Lexicon Specification“ (PLS) einbinden kann, die dem Vorleseprogramm sagt, wie es was auszusprechen hat.

Mehr Infos zum Aufbau findet ihr auf der Seite des idpf.

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn