Strange behaviour of String Interpolation Refactorings in VisualStudio 2015/Roslyn/Resharper

We switched to VisualStudio 2015 at work a few days ago, using Resharper inside as before. VisualStudio has some great new features in this version, a few bugs, and some strange behaviours I don’t understand.

In some articles I’m going to talk about some strange refactoring suggestions I discovered, starting with string interpolations here.

Just to ask beforehand: Is there any way to identify where a refactoring comes from (is it a suggestion and/or implementation of Roslyn or Resharper?) Strange behaviour of String Interpolation Refactorings in VisualStudio 2015/Roslyn/Resharper weiterlesen

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.

Windows 8 Einrichten

Habe heute einen neuen PC in der Hand gehabt, auf dem Windows 8 vorinstalliert war und sollte das einrichten.

Fazit: Benutzerfreundlichkeit sieht anders aus. Zugegeben: Im Vergleich zu Windows 98 geht vieles besser, aber dennoch ist mir vieles aufgefallen, was ich als Useability-Bug einordnen würde.

  1. Fehlermeldungen: Die Einrichtungsroutine ist als geführter Dialog gestaltet. Auf Seite 7 oder 8 erfolgt die Einrichtung eines Benutzerkontos, was die Angabe eines Benutzernamens, eines Passwortes sowie eines Passwort-Hinweises erfordert. Weder ist hier erkennbar, dass der Passworthinweis eine Pflichtangabe sei…
  2. …noch, dass sich der Benutzername vom Rechnernamen unterscheiden muss. Dumm nur, dass das erst hier auffällt. Ich kann mir nicht vorstellen, dass es als Idee mittlerweile eine Ausnahmeerscheinung wäre, den eigenen PC einfach mit dem eigenen Vornamen zu benennen. Heißt der PC aber erst einmal (nach Seite 1 oder 2 der Einrichtungsroutine) „Anton“, so gibt es später nur eine Fehlermeldung, das Benutzerkonto dürfe nicht genauso benannt werden wie der Computer. Immerhin kann man im Dialog zurückgehen bis auf Seite 1 – aber dumm gelaufen: Hier ist der Rechnername mittlerweile festgelegt und lässt sich nicht wieder ändern.
  3. Nach der letzten Formularseite dauert die endgültige Einrichtung ein paar Minuten, die wie schon mindestens seit Windows 98 bekannt, durch „Werbung“ überbrückt werden. Dabei wird darauf hingewiesen, dass sich an der rechten Seite des Bildschirms unsichtbar ein Menü versteckt, das eingeblendet werden kann, indem man mit der Maus in die Ecke zeigt. Verpasst man dies jedoch, deutet darauf hinterher nichts mehr hin – ein typischer Fall von „Mystery Meet Navigation“ und damit eines der klassisch großen No-Gos der Useability.
  4. Es mag sein, dass Microsoft seinen Desktop in Windows 8 nach Möglichkeit vor den Nutzern verstecken will. Wie sonst wäre es zu erklären, dass es keinerlei Hinweis darauf gibt, wie der Desktop zu erreichen wäre? Gut: Nach jahrelanger Windows-Vorprägung werden „Poweruser“ eventuell schnell die altbekannte Tastenkombination Windows+D ausprobieren, aber intuitiv ist für mich was anderes.