Geschickte Gliederung von Zahlen im Web


Zur besseren Lesbarkeit werden lange Zahlen in kleine Gruppen gegliedert. Das gilt für den Druck genauso wie für die Gestaltung von Webseiten. So werden zum Beispiel Telefonnummern von rechts in Zweiergruppen eingeteilt, die lange IBAN dagegen von links in fünf Vierergruppen und eine Zweiergruppe.

Muss man bei Printprodukten die Nummern in jedem Fall abtippen, möchte man das im Web – gerade bei langen und komplizierten Folgen – gerne per Copy & Paste erledigen. Und hier sind Sie als Webdesigner gefragt, es den Benutzern der Seite so einfach wie möglich zu machen.

Nehmen wir nochmal das Beispiel der IBAN.

Diese muss eine Länge von 22 Zeichen haben. Benutzen Sie Leerzeichen zur Gliederung, wächst die Länge und die Banking-Software wird die Nummer als fehlerhaft melden, oder noch ärgerlicher, die Ziffern nach der 22ten Stellen abschneiden.

Nutzen Sie zur Gliederung aber das HTML-Tag <span> mit zugewiesenem Abstand, werden die Ziffern gegliedert dargestellt und können trotzdem ohne Leerfelder kopiert werden.

Weisen Sie dazu <span> in der CSS-Definition einen Abstand zu:

span.space {margin-right:0.3 em;}

Der Code für die IBAN sieht dann folgendermaßen aus:

IBAN: <span class= 'space'>DE32</span>
<span>class= 'space'>6724</span>
<span>class= 'space'>0039</span>
<span>class= 'space'>2640</span>01


Übrigens: selbst den Trennstrich zwischen Vorwahl und Telefonnummer können Sie mit dem Pseudoelement „after“ so darstellen, dass er nicht mitkopiert wird.

span.space {margin-right:0.3 em;}
span.slash:after
{content: "/";
margin-right: 0.3em;
margin-left: 0.3em;}

Tel.: <span class= 'space'>06</span>
<span>class= 'space'>17</span>
<span>class= 'slash'>2</span>
<span>class= 'space'>48</span>
<span>class= 'space'>44</span>18