Styles für Tasten in Onlinedokumentation
Im normalen Fließtext ist es meistens am besten, die Namen von Tasten nicht besonders auffällig zu gestalten, denn dort sollten die Tasten nicht die größte Aufmerksamkeit auf sich ziehen. Anders ist es jedoch z. B. in einer Referenz speziell mit Tastenkürzeln oder in einem Dokument, das optisch besonders attraktiv gestaltet werden soll. Hier können Sie mit CSS ein Design umsetzen, das die Tasten beinahe wie echte Tasten aussehen lässt.
Beispiel 1
Press Ctrl + S to save the file.
Implementierung zu Beispiel 1
Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:
Schritt 2: Packen Sie den als Taste auszuzeichnenden Text im HTML-Code in ein SPAN-Element der Klasse keyboard-key.
Im Normalfall geschieht dies automatisch, wenn Sie in Ihrem Redaktionssystem ein gleichlautendes Zeichenformat anlegen und dem betreffenden Text dann dieses Zeichenformat zuweisen. Allerdings benennen manche Redaktionssysteme die Formate intern um. Sollte es nicht wie gewünscht funktionieren, müssen Sie sich einmal den erzeugten HTML-Code ansehen und erforderlichenfalls den Namen der Klasse im CSS-Code entsprechend angleichen.
Heißt die Klasse im CSS-Code wie in unserem Beispiel keyboard-key, muss nach dem Generieren der Onlinedokumentation das Ergebnis im vom Redaktionssystem erzeugten HTML-Code schließlich wie folgt aussehen:
Anmerkung: Eigentlich sieht HTML zur Auszeichnung von Tasten das Element <kbd> vor. Die meisten Redaktionssysteme für Technische Dokumentation unterstützten dieses Element jedoch nicht, weshalb nur der beschriebene Weg über das SPAN-Element verbleibt.
Beispiel 2
Noch etwas plastischer und auffälliger wirken die Tasten in der folgenden Lösung, basierend auf KEYS.css.
Press Ctrl + S to save the file.
Press Ctrl + S to save the file.
Implementierung zu Beispiel 2
Das generelle Vorgehen ist identisch mit dem von Beispiel 1. Verwenden Sie stattdessen lediglich folgende CSS-Codes.
CSS-Code für die helle Variante:
CSS-Code für die dunkle Variante:
Beispiel 3
Abschließend noch eine weitere Alternative mit einem leichten Schatten:
Press Ctrl + S to save the file.
Implementierung zu Beispiel 3
Das generelle Vorgehen ist auch hier wieder identisch mit dem von Beispiel 1. Verwenden Sie in diesem Fall folgenden CSS-Code: