Zahlen formatieren im Web

Anfang der Woche stolperte ich über eine Auswertung zu OSM-Adressen von Simon Poole. Wie das bei statistischen Auswertungen so üblich ist, dominieren dabei Tabellen und Zahlen.

Gerade große Zahlen sind aber schnell schwer zu lesen. Wie viele Nullen hat 1000000 genau? In der Typographie werden Zahlen deshalb nicht einfach Ziffer für Ziffer mit identischem Zeichenabstand gesetzt, sondern gesondert behandelt. Ein paar Beispiele für eine Million:

  • 1000000
  • 1.000.000
  • 1 000 000
  • 1’000’000
  • 1,000,000

Dies direkt so anzugeben hat jedoch diverse Nachteile.

  1. Beim Kopieren von Tabellen wird der Inhalt insgesamt kopiert. Kopiert man insbesondere aus dem Web in Tabellenkalkulationsprogramme wie Calc oder Excel, so werden da aufwendige Algorithmen oder Handarbeit notwendig, um Zahlen deutlich als solche zu erkennen. Insbesondere sind 1,001 sowie 1.001 je nach Herkunft ungefähr eins oder knapp über tausend.
  2. Auch beim Lesen ist die Verwendung von Punkt oder Komma schwierig, weil nicht eindeutig.
  3. ungeschützte Leerzeichen wären notwendig, um einen Zeilenumbruch innerhalb der Zahl zu verhindern.
  4. Gerade bei großen Tabellen ist die durchgängige Formatierung aufwändig.

Betrachtet man Zahlen mit Nachkommastellen, tauchen zusätzliche Herausforderungen auf. Um untereinander stehende Zahlen schnell vergleichen zu können, wäre eine Ausrichtung wünschenswert, bei der das Komma aller Zeilen an der gleichen Stelle steht. In Tabellenkalkulationsprogrammen wird dies üblicherweise erreicht, indem die Anzeige auf eine feste Anzahl von Nachkommastellen konfiguriert wird: zusätzliche Ziffern werden abgeschnitten, fehlende Ziffern in Form von Nullen angehängt.

Natürlich kommt einem bei all dem sofort CSS in den Sinn. Sollten Stylesheets nicht in der Lage sein, auch die Formatierung von Zahlen anzupassen? Tatsächlich stößt man bei der Suche im Netz auf einen früheren Entwurf in der Richtung: Im Wiki der CSS-Working-Group vom W3C.

Die aktuelle Liste von Standards und Entwürfen vom W3C enthält jedoch kein Modul mit entsprechenden Angaben.

Um dieses Problem anzugehen (und anstatt für meine letzte Prüfung zu lernen) habe ich ein Modul für jQuery geschrieben. Eine Beispielseite zeigt der folgende iframe:

Wie funktioniert das Plugin?

Zunächst wird mit letteringjs dafür gesorgt, dass beliebige Zeichen mit CSS-Selektoren zugänglich sind. Lettering.js kapselt dazu jeden einzelnen Buchstaben von gewünschten Elementen in ein entsprechend klassifiziertes <span>-Element. Die Klassen (char0, char1,…) werden allerdings im Folgenden gar nicht mehr genutzt. Vielmehr lassen sich die einzelnen Zeichen mit CSS über die Pseudoklassen :nth-child(n) und :nth-last-child(n) ansprechen. Durch die Möglichkeit, den Platzhalter n zu verwenden, ist dies deutlich einfacher als der Weg über die einzelnen Klassen.

Zunächst werden aber die per lettering zerlegten Zeichen klassifiziert und dann gruppiert: Als Klassen gibt es das Vorzeichen, Ziffern, das Komma und Einheitenzeichen. Heuristisch wird dabei davon ausgegangen, dass die Einheit mit der ersten nicht-Ziffer (nach dem Komma, falls nötig) beginnt.

Tausender-Gruppierung

Um jeweils drei Ziffern zu gruppieren, wird per CSS-Pseudoklasse :before das entsprechende Trennzeichen generiert. Per default ist dies ein Leerzeichen, das sich aber per Überladung der CSS-Klasse sowie durch Angabe beim Aufruf des Plugins überschreiben lässt.

Für die Zahl vor dem Komma wird :before auf :nth-last-child(3) angewandt, für die Nachkommastellen auf :nth-child(3). Hier wird dann das Trennzeichen über die CSS-Property content generiert.

Ausrichtung am Komma

Um einheitlich am Komma ausrichten zu können, wird per Javascript zunächst die maximal notwendige Breite der Nachkommastellen ermittelt. Das Ergebnis wird dann dem mit display: inline-block formatierten Block der Nachkommastellen zugewiesen. Hier entsteht jedoch ein Problem, das dexter entdeckte: Skaliert man im Browser nur den Text, aber nicht die gesamte Darstellung, so werden Absolute Werte wie solche in Pixeln nicht mitskaliert.

Um dieses Problem zu lösen muss die notwendige Breite in Schrift-relativen Größenangaben wie em angegeben werden. 1em entspricht dabei nach Spezifikation der Kantenlänge eines typographischen Gevierts in der verwendeten Schriftgröße, und  dessen Höhe wird durch die Schriftgröße bestimmt, die sich mit jQuery herausfinden lässt. Aus der berechneten Pixel-Zahl lässt sich also zur Einheit em umrechnen, so dass auch bei einer reinen Schrift-Skalierung kein Problem mehr auftritt.

Ausblick

Zunächst fehlen noch ausgiebigere Tests. Außerdem wäre die Anwendung auch außerhalb von Tabellen praktisch. Mal sehen, wozu ich in den nächsten Tagen komme.

Danach plane ich das Plugin auch „offiziell“ zu veröffentlichen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.