DIY-Donnerstag, Epub Insights

EPUB INSIGHTS #3 – BASIC CSS

15. März 2018

Howdy liebe AutorInnen und SelfpublisherInnen,

nachdem ich im letzten Beitrag die html Klassen aufgelistet habe, die ich in jedem unserer E-Books verwende, möchte ich heute über die zugehörigen BASIC CSS Anweisungen für diese Klassen sprechen. Mit ihnen wird festgelegt, wie der Text einer bestimmten Klasse auf dem E-Reader erscheint. Diese Anweisungen werden in einer eigenen separaten Datei aufgeführt, die im Header der einzelnen xhtml-Dateien des E-Books verlinkt wird.

<link rel=“stylesheet“ type=“text/css“ href=“../styles/redbug-styling.css“ />

Am Ende dieses Beitrags findet er ein Worksheet mit der Liste der html TAGS und den dazugehörigen CSS Anweisungen für die von uns verwendeten Klassen.

Fließtext

In unseren E-Books gibt es zwei Klassen, die den »normalen« Fließtext betreffen. Hier gibt es von den verschiedenen Plattformen, z.B. von KDP, Vorgaben, wie dieser Text formatiert sein soll. Nämlich am besten gar nicht. Da der Leser auf einem E-Reader, je nach Modell selbst Schriftgröße, Zeilenabstand, Block- oder Flattersatz einstellen kann, empfiehlt es sich hier wirklich, nur wenige Anweisungen in der CSS festzulegen. Also sollten weder die Schriftgröße noch der Zeilenabstand besonders festgelegt werden. Außerdem empfiehlt es sich für den Fließtext keine Farbe, oder Hintergrundfarbe anzugeben, da Lesegeräte selbst oft auf weißen, grünen, schwarzen, sepia- oder amberfarbenem Hintergrund umgestellt werden können und die Textfarbe automatisch angepasst wird. Natürlich sollte auch nicht der gesamte Text kursiv oder fett dargestellt werden.

Wir nennen die beiden Klassen, die wir für Fließtext verwenden, .absatz und .umbruch

Mit .absatz ist der Beginn eines neuen Absatzes im Fließtext gemeint, der beim Kapitelanfang angewendet wird oder, wenn ein neuer Gedanke, Zeit- oder Ortswechsel stattfindet. Er ist durch eine »Leerzeile« bzw. durch einen größeren Zeilenabstand ausgezeichnet und hat im Gegensatz zum einfachen Zeilenumbruch .umbruch keinen Erstzeileneinzug. Dementstsprechend lautet die CSS Anweisung ganz einfach:

.absatz {
text-indent: 0em
margin: 0.5em 0em 0em 0em;
}

Ich habe hier die Teile, aus denen eine CSS Anweisung besteht farbig abgesetzt. Sie besteht aus vier Elementen:

  • dem Selektor, in diesem Fall die Klasse .absatz,
  • der Eigenschaft, bzw, den Eigenschaften, in diesem Fall text-indent und margin,
  • und den dazugehörigen Werten in diesem Fall z.B. 0.em für den nicht vorhandenen Erstzeileneinschub und 0.5em 0em 0em 0em für den kleinen Abstand von 0.5em nach oben.
  • Ich habe hier auch noch einmal den eigentlichen Wert 0.5  und die Maßeinheit em abgesetzt.

Die CSS Anweisung für einen einfachen Zeilenumbruch mit Erstzeileneinzug und ohne Abstand zum vorhergehenden Text  lautet dann entsprechend:

.umbruch {
text-indent: 1em;
margin: 0em 0em 0em 0em;
}

Überschriften etc.

Aber natürlich besteht ein E-Book nicht nur aus durchgehendem Fließtext. Viele Textstellen sollen besonders herausgehoben und formatiert sein. Hier ist eine Liste der BASIC CSS Anweisungen, die in unseren E-Books zur Anwendung kommen.

  • font-weight: bold;
  • font-size: 1.2em;
  • font-style: italic;
  • line-height: 1.5em;
  • letter-spacing: 0.1em;
  • text-align: center;
  • margin: 3em 0em 2em 0em;

Die Werte können natürlich je nach Bedarf angepasst werden.

Bei anderen Auszeichnungen muss man sich vorsehen, da sie nicht von allen Readern unterstützt werden.

Falls man z.B. also einen Textabschnitt durch G R O S S S C H R E I B U N G  auszeichnen will, empfiehlt es sich wirklich Großbuchstaben zu verwenden, statt der CSS-Anweisung:

  • text-transform: uppercase;

Genausowenig werden Kapitälchen, Unterstreichungen oder durchgestrichener Text und die entsprechende CSS-Anweisungen:

  • font-variant: small-caps;
  • text-decoration: underline;
  • text-decoration: line-through;

von allen Readern unterstützt.

Ebenso tricky ist die Verwendung von Initialen mit der Anweisung:

  • :first-letter {font-size:30px;}

Hier erhält man fast auf jedem Reader eine unterschiedliche Darstellungen. Weswegen ich im Moment davon abraten würde, sie zu benutzen.

An dieser Stelle möchte ich noch einmal für unseren grandiosen Newsletter werben. So erfahrt ihr, welche neuen Aktionen wir haben, welche Bücher demnächst herauskommen. Jedes Mal dabei: Die Worksheetbibliothek mit all unseren Arbeitsblättern.

Für alle E-Book-Bastler habe ich ein Worksheet erstellt, mit dem ihr das Aussehen eures E-Books kontrollieren könnt. Spielt einfach ein wenig mit den Werten aus der CSS herum, um ein Gefühl dafür zu bekommen, was gut aussieht und euren Vorstellungen entspricht.

Im nächsten Beitrag werde ich euch noch ein paar speziellere Tipps, etwa zum optischen Randausgleich in E-Books, geben.

Bis in vier Wochen

Uwe

#rbpub #redbugwriting #publishing

 

 

 

 

 

 

 

You Might Also Like

No Comments

Leave a Reply