HTML+CSS

Leerzeichen in CSS-generiertem Text

Grundsätzlich können innerhalb der content-Eigenschaft auch Leerzeichen genutzt werden. Damit diese auch sichtbar sind, muß die Eigenschaft white-space auf pre gesetzt werden.

Geschützte Leerzeichen können durch Angabe des Unicode-Zeichens NO-BREAK SPACE mit Codepunkt U+A0 eingefügt werden, das als \a0 codiert wird:

ul.terms > li:not(:first-child)::before {
  content: '\a0& ';
  white-space: pre;
}

Textvariante von Zeichen statt grafischer Emojis verwenden

Webbrowser wie etwa Safari auf iOS ersetzen bestimmte Zeichen durch grafische Emojis. Dies mag bei Smileys passend sein, bei Pfeilen etc. ist die Darstellung als meist farbiges Bild jedoch störend. Um den Webbrowser anzuweisen, die Textvariante auszuwählen, muß dem Unicode-Zeichen das Zeichen VARIATION SELECTOR-15 mit dem Codepunkt FE0E nachgestellt werden. Das ist sowohl bei CSS-generiertem Text als auch direkt im HTML-Code möglich:

a[href^='#']::after {
  content: '\a0↕\fe0e';
}

Der vertikale Doppelpfeil ↕︎ fügt sich gut in den Text ein.

In CSS Fonts Module Level 4 wird die Zeichenvariante über die Eigenschaft font-variant-emoji einstellbar sein.

Ausklappbares Inhaltsverzeichnis ohne JavaScript

Mittels des details-Elements läßt sich ein Inhaltsverzeichnis erstellen, das durch den Benutzer eingeblendet werden kann. Ist das details-Element aufgeklappt, setzt der Webbrowser das open-Attribut auf true:

<style>
nav.toc > details > summary {
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
}

nav.toc > details > summary::after {
  content: '\a0▼\fe0e';
}

nav.toc > details[open] > summary::after {
  content: '\a0▲\fe0e';
}

@media print {

  nav.toc > details {
    display: none;
  }

}
</style>

<nav class=toc>
  <details>
    <summary>Inhaltsverzeichnis</summary>
    <ol>
      <li><a href=#eintrag-1>Eintrag 1</a>
      <li><a href=#eintrag-2>Eintrag 2</a>
    </ol>
  </details>
</nav>