Zahlen­gliederung digital

Immer wieder liest man, dass Zahlen im Printbereich zur besseren Lesbarkeit gegliedert werden sollten, während eine Gliederung »für elektronische Vorgänge nicht zulässig ist« – was natürlich völlig unsinnig ist.

In beiden Bereichen dient die Gliederung dem besseren visuellen Erfassen der Zahlen. Während im Printbereich Zahlen nur gelesen werden, kommt allerdings im digitalen Bereich eine weitere Funktion hinzu: Die Zahl muß weiter verwendet werden können.
Diesen Vorteil wissen wir alle zu schätzen; Wer will schon noch lange Nummernfolgen abschreiben statt sie einfach zu kopieren und in ein Formularfeld einzufügen? Um Zahlen im digitalen Medium sowohl für das Lesen als auch fürs Kopieren zu optimieren, muß man sie also richtig gliedern. Wie der Abstand zwischen den Zifferngruppen zustande gekommen ist, interessiert im Printbereich niemanden. Spätestens jedoch, wenn man eine mit Leerzeichen gruppierte Zahl kopiert und in ein Textfeld einfügen möchte, dessen Länge begrenzt ist, wird man bemerken, dass es am Rechner nicht ganz so egal ist. Versuche die zwei visuell ähnlich gegliederten Zahlenfolgen in das Textfeld zu kopieren.

123 456 78
12345678

Die obere Bankleitzahl wurde mit Leerzeichen gegliedert, während die untere Zahl ohne Leerzeichen gegliedert wurde. Jedoch habe ich im HTML-Code die Zifferngruppen in span-Elemente unterteilt …

<span class="add-space">123</span><span class="add-space">456</span>78

… und diesen im CSS auf der rechten Seite einen Abstand zugewiesen:

<style>
  .add-space {
    margin-right:  0.4em
  }
</style>

Auf diese oder ähnliche Weise erhält man Zahlen, die sowohl gut lesbar als auch gut weiterzuverarbeiten sind; und es funktioniert nicht nur mit Abständen. Stattdessen kann man Elementen bspw. auch ein Tausender-Trennzeichen folgen lassen:

123.456.78
12345678

Dazu im CSS auf der rechten Seite per Pseudoelement :after ein Zeichen (URL-kodiert) folgen lassen:

<span class="decimal-point">123</span><span class="decimal-point">456</span>78

<style>
  .decimal-point::after {
    content: ".";
  }
</style>

Telefonnummern

Eine Besonderheit gibt es bei Telefonnummern: Damit Android- und iOS-Betriebssysteme die Zahl trotz Gliederung noch als Telefonnummer erkennen, sollte man sie als tel-link formatieren:

<a href="tel:12345678"><span>12</span><span>34</span><span>56</span><span>78</span></a>