Styles für Hervorhebungen in Onlinedokumentation

Gelegentlich ist es in einer Onlinedokumentation notwendig, einzelne Inhalte besonders hervorzuheben. Neben den Standardmöglichkeiten, die jedes Redaktionssystem bietet, eignen sich dazu insbesondere Elemente mit einem handschriftlichen Erscheinungsbild. Dies bildet zum Grundtext einen besonders großen Kontrast. Dadurch ist der Effekt der Hervorhebung besonders stark. Gleichzeitig macht es der klare Kontrast dem menschlichen Auge leicht, sich beim Lesen trotzdem auf die inhaltliche Ebene zu fokussieren.

Der CSS-Code für solche Hervorhebungen ist nicht sonderlich aufwendig.

Beispiel 1: Box zur Hervorhebung beliebiger Inhalte

Mit einem einfachen „handgezeichneten“ Rahmen lassen sich beliebige Elemente einrahmen und hervorheben.

Hello there.

Looks like I caught your attention. Didn’t I?

Implementierung zu Beispiel 1

Diese Lösung basiert im Kern auf einem Vorschlag von Tiffany Rayside: https://codepen.io/tmrDevelops/pen/NPXodB

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


.handbox{
  display: inline-block;
  margin: 10px 0 12px 0; 
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding: 1em;
  border: solid 5px red;
}

Schritt 2: Setzen Sie im Text den hervorzuhebenden Inhalt zwischen folgende beiden HTML-Schnipsel:


<div class="handbox">


</div>

Beispiel 2: Vertikale Linie links neben dem Text

Soll die Hervorhebung etwas dezenter sein, reicht auch eine einzelne Linie neben dem Text. Steht die Linie links außerhalb des Texts, wird das Layout nicht beeinträchtigt.

Sehen Sie sich das folgende Beispiel an, in dem ChatGPT ein wenig über das Hervorheben von Texten philosophiert:

“Highlighting text with color is a visually striking way to emphasize important information within a block of text. This technique can be particularly useful when designing documents or web pages, as it can draw attention to key points and help readers quickly find the information they are looking for. However, it is important to use color strategically and sparingly, as too much can be overwhelming and distracting for the reader. When using color to highlight text, it is also important to ensure that the contrast between the text and background is strong enough to make the highlighted text easy to read.”

Implementierung zu Beispiel 2

Im Wesentlichen verwendet dieses Beispiel denselben CSS-Code wie Beispiel 1. Allerdings ist hier nur die linke Rahmenlinie zu sehen. Außerdem ist sie links neben den Textfluss verschoben.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


.marker-container {
  display: flex;
  align-items: flex-start; 
  margin-left: -20px;
  padding: 10px 0 12px 0;   
}
.marker-inner{
  display:inline-block;
  border-radius: 2px 15px 225px 15px/15px 225px 15px 255px;
  padding: 0 0 0 15px;
  border-left:solid 5px red;
  text-align: left;
}

Schritt 2: Setzen Sie im Text den hervorzuhebenden Inhalt zwischen folgende beiden HTML-Schnipsel:


<div class="marker-container">
 <div class="marker-inner">


 </div>
</div>

Beispiel 3: Textmarker-Effekt

Sollen einzelne Wörter oder kurze Textpassagen innerhalb eines Absatzes hervorgehoben werden, eignet sich dazu gut ein Style mit der Optik eines mit einem Textmarker angestrichenen Texts. Wie bei einem echten, nicht mehr ganz neuen Textmarker, ist dabei die Form nicht streng rechtwinklig und die Farbe wird zum Ende hin etwas blasser.

Je nach verwendetem CSS-Code und dessen Parametern kann der Effekt eher relativ gleichmäßig sein, wie im vorstehenden Beispiel, oder auch relativ ausgeprägt, so wie hier. Das wirkt dann noch stärker manuell gezeichnet, wie mit einem bereits ziemlich eingetrockneten Textmarker.

Implementierung zu Beispiel 3

Die erste der beiden Varianten basiert auf einem Vorschlag unter https://max.hn/thoughts/how-to-create-a-highlighter-marker-effect-in-css. Die zweite der beiden Varianten basiert auf einem Vorschlag unter https://codepen.io/monooso/pen/vYVKmwE.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Für Variante 1:


span.highlight{
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 3%,
    rgba(255, 225, 0, 0.3)
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;  
}

Für Variante 2:


span.highlight{
  background: linear-gradient(
      100deg,
      rgba(255, 221, 64, 0) 0.9%,
      rgba(255, 221, 64, 1) 2.4%,
      rgba(255, 221, 64, 0.5) 5.8%,
      rgba(255, 221, 64, 0.1) 93%,
      rgba(255, 221, 64, 0.6) 96%,
      rgba(255, 221, 64, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 221, 64, 0) 0%,
      rgba(255, 221, 64, 0.3) 7.9%,
      rgba(255, 221, 64, 0) 15%
    );
  border-radius: 0.125em;
  box-decoration-break: clone;
  padding: 0.125em 0.25em;
}

Schritt 2: Packen Sie den als Taste auszuzeichnenden Text im HTML-Code in ein SPAN-Element der Klasse highlight.

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 highlight, muss nach dem Generieren der Onlinedokumentation das Ergebnis im vom Redaktionssystem erzeugten HTML-Code schließlich wie folgt aussehen:


<p>This is the <span class="highlight">highlighted</span> text.</p>