Aussehen von Hyperlinks verändern

(Auszug aus "ePub für (In)Designer — Mit InDesign Schritt für Schritt zum E-Book" von Sascha Heck & Yves Apel)

Unter Querverweise und Links haben Sie gesehen, welche Möglichkeiten es gibt, in InDesign Hyperlinks zu erstellen. Ob nun Hyperlinks, Querverweise oder auch Fußnoten bzw. Endnoten definiert wurden – im ePub wird alles zu Hyperlinks. Wenn Sie in InDesign Hyperlinks erstellen, gibt es im Menüfenster Hyperlink bearbeiten (siehe 2. Screenshot unter Hyperlinks) Optionen für die Darstellung der Hyperlinks. Diese haben allerdings auf den ePub-Export keine Auswirkungen.

Hyperlinks, definiert durch Zeichenformat in InDesign

Abbildung: Hyperlinks, definiert durch ein Zeichenformat in InDesign.

Sigil: Standarddarstellung von Hyperlinks

Abbildung: Standarddarstellung von Hyperlinks, hier in Sigil.

Webdesigner kennen das Verhalten von Browsern: Werden die Hyperlinks aus InDesign ins ePub-Format exportiert, so erhalten sie im Reader meist die Standard-Formatierung, und diese erscheint in der Regel im hässlichen Blau und unterstrichen. Auf jeden Fall ist es schöner, die Hyperlinks-Farbe anzupassen und vielleicht auch die Unterstreichung wegzulassen oder zumindest anders zu formatieren. Dazu ist ein Eingriff in die CSS-Datei nötig (die »template.css«).

Links kennen verschiedene Zustände:

  • link = normale Darstellung
  • hover = wenn man mit der Maus drüberfährt (was bei iPad, Kindle etc. ja nicht relevant ist)
  • active = wenn man gerade darauf klickt
  • visited = nachdem man schon mal darauf geklickt hat

Für all diese Zustände kann man nun das Aussehen definieren. Für die Syntax und Möglichkeiten ist z.B. die Seite von SelfHTML sehr interessant.

CSS-Code einfügen

Im CSS-Code gibt es von InDesign aus noch keine vordefinierten Klassen. Das heißt, Sie müssen diese zuerst selbst erstellen. Dazu öffnen Sie die CSS-Datei »template.css« mit einem Editor, scrollen ans Ende der Datei und erstellen für alle zuvor genannten Zustände eine (zunächst) leere Klasse:

a:link{
}

a:visited{
}

a:hover{
}

a:active{
}

Unterstreichung anpassen

Unterstreichung löschen

Zuerst wollen wir die Unterstreichung des Links herausnehmen. Das erreichen Sie durch den Befehl text-decoration: none;

a:link{
  text-decoration: none;
}

Wenn Sie im Layoutdokument ein Zeichenformat benutzt haben, um die Hyperlinks auszuzeichnen, finden Sie es in der CSS-Datei wieder. Damit die zwei Definitionen sich nicht gegenseitig behindern, sollten Sie die CSS-Regel für die Klasse ausfindig machen und prüfen, ob hier nicht etwas Gegenteiliges als Regel definiert wurde:

span.hyperlink {
  text-decoration: underline;
}

Sie sehen im Beispiel, dass zweimal etwas Verschiedenes für text-decoration definiert wurde. Damit die CSS-Regel funktioniert, können Sie den span-Eintrag löschen (alles, was zwischen den geschweiften Klammern steht) und eine leere Klasse stehen lassen oder die Regel komplett löschen, falls Sie den Code sauberer halten möchten.

Ansicht in Sigil: Unterstreichung ist jetzt verschwunden

Abbildung: Ansicht in Sigil - Die Unterstreichung ist jetzt verschwunden.

Gestrichelte/Punktierte Linie

Anstatt einer durchgehenden kann man auch eine gestrichelte Linie verwenden. Das wirkt nicht so klotzig. Der CSS-Befehl dafür lautet border-bottom. Als Linienart können Sie z.B. dotted oder dashed verwenden.

a:link{
  text-decoration: none;
  border-bottom: #CC3300 1px dashed;
}

Hyperlink wirkt dezenter mit gestrichelter Linie

Abbildung: Mit einer punktierten oder gestrichelten Linie wirkt der Hyperlink
dezenter und tritt mehr in den Hintergrund.

Schriftfarbe ändern

Als Zweites wollen wir die Schriftfarbe des Hyperlinks umändern. Bedenken Sie dabei aber, dass sich das nur lohnt, wenn das ePub nachher auch auf einem Reader mit farbigem Display gelesen wird. Auf dem iPad ist das kein Problem, auf einem Sony-Reader aber vielleicht doch. Viele professionelle E-Reader sind mit der E-Ink-Technologie ausgestattet, die ein sattes Schriftbild ermöglicht, aber häufig keine Farben. Neuere Modelle verfügen jedoch schon über farbige E-Ink-Displays.

Der Befehl für die Schriftfarbe lautet einfach color: #000000. Die Farbe wird in HTML und CSS in Hexadezimal-Code dargestellt. Den Trick, um den Hexadezimal-Code einer bestimmten Farbe herauszufinden, können Sie unter Hexadezimalfarben definieren nachlesen. Wir entscheiden uns hier für die Hauptfarbe Rot unseres Beispielbuches mit dem Wert ad0600. Der CSS-Code sieht so aus:

a:link{
  text-decoration: none;
  color: #ad0600;
}

ePub: Links sind jetzt rot nach Änderung im CSS

Abbildung: Im ePub bekommen alle Links nach der Änderung im CSS die rote Farbe zugewiesen.

Textmarkereffekt

Eine weitere Möglichkeit der Linkauszeichnung ist der Textmarkereffekt. Die Links werden dabei mit einer Farbe hinterlegt. Diese Auszeichnung ist aber viel aufdringlicher. Der Befehl dafür lautet background-color. Das sieht dann z.B. so aus:

a:link{
  text-decoration: none;
  color: #ad0600;
  background-color: #fdff31;
}

Textmarkereffekt: Hyperlinks werden mit einer Farbe hinterlegt

Abbildung: Der Textmarkereffekt - Die Hyperlinks werden mit einer Farbe hinterlegt.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema ePub & InDesign bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © dpunkt.verlag GmbH 2012
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "ePub für (In)Designer" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Wieblinger Weg 17, 69123 Heidelberg, fon 06221-14830, fax 06221-148399, hallo(at)dpunkt.de