Lesbarer Quelltext

Sonderzeichensalat

Von Kindesalter her sind wir gewohnt, Buchstaben und Satzzeichen flüssig zu lesen. Unser Gehirn ist darauf trainiert und optimiert. Chinesische, ägyptische oder georgische Schriftzeichen sind für Menschen, die diese Schriftzeichen nicht seit frühester Kindheit vor Augen haben erst mal unleserlich:

Teilweise lesbar

Das Selbe gilt natürlich umgekehrt ebenfalls, ein Japaner tut sich mit lateinischen Lettern schwer.

Irgendwann reichten diese paarunddreissig Buchstaben (a-z und Satzzeichen) aber nicht mehr aus, und der Mensch erfand die Sonderzeichen. Die Mathematiker, die Chemiker und in den letzten Jahrzehnten eben auch die Informatiker stürzten sich auf diese Menge an wunderbaren neuen Zeichen. Und so schreiben wir heute nicht:

Wenn A größer oder gleich B ist, dann ...

sondern je nach Programmiersprache

if [[ "$a" -gte "$b" ]]

oder

if ( $a >= $b ) {

Das ist jetzt deutlich kürzer, aber für einen Grundschüler ist das genauso Zeichensalat wie obiges Plakat. Es sind Zeichen enthalten, die er kennt, aber auch welche, deren Bedeutung er nicht kennt.

Als Entwickler ist man natürlich trainiert, das lesen zu können, und wir haben damit keine Probleme. Oder etwa doch?

Wer kann das hier auf Anhieb lesen und verstehen?

"^\(*\d{3}\)*( |-)*\d{3}( |-)*\d{4}$"

Codehervorhebung to the rescue

Um uns das Lesen von Code zu erleichtern, wird Code inzwischen selbst in einfachen Editoren wie Notepad++ oder vi farblich hervorgehoben:

vi
PhpStorm

Damit ist das schon deutlich lesbarer, das Auge wird gelenkt und erfasst schneller die wesentlichen Elemente des Codes.

Womit das Auge aber immer noch Schwierigkeiten hat, sind Kombinationen aus Sonderzeichen, die eigentlich zusammen gehören, aber durch mehrere Zeichen geschrieben werden: 

==, ===, =>, ->, ??

Ligaturen

Hier helfen Ligaturen. Ligaturen sind Verbindungen von Buchstaben, die aus zwei oder mehreren Buchstaben ein Verbundwerk machen. Oft entstehen so neue, eigenständige Zeichen: Das ß ist ein sz, das & ein et und das @ ein at. Word macht z.B. aus => einen verbundenen Pfeil aus dem Symbol-Zeichensatz, der schöner und lesbarer ist.

PhpStorm kann das ebenfalls, und so wird aus obigem Beispiel mit Ligaturen dieser Quelltext:

PhpStorm mit Fira Code und Ligaturen

Offensichtlich ist hier das doppelte und dreifache Gleichzeichen, aber auch weniger auffällige Änderungen helfen beim Lesen des Codes, etwa die Stringverknüpfung mit .= oder das kombinierte ??. 

Obwohl das jetzt erst mal nach einer Verschlimmbesserung klingt – schließlich kommen dadurch noch mehr Sonderzeichen hinzu – erhöht die Verwendung von Ligaturen die Lesbarkeit. Das Hirn erkennt durch die Verbindung der Buchstaben schneller, welche Kombinationen zusammen gehören.

Der Mechanismus ist ähnlich wie bei Leerzeichen. Natürlich kann man alleWörterhintereinanderohneLeerzeichenschreiben. Indem man aber die zusammen gehörigen Buchstaben zusammen schreibt, und nicht zusammen gehörige Buchstaben durch einen Abstand trennt, erhöht man die Lesegeschwindigkeit.

Und so liest sich das == oder das ?? ohne den Abstand zwischen den Zeichen eben schneller, und die Bedeutung wird klarer.

Was braucht man dazu?

Natürlich benötigt man als Allererstes einen Zeichensatz, der diese Zeichen auch darstellen kann. Schön lesbar ist z.B. der Font “Fira Code“, den man bei GitHub erhält. PhpStorm scheint den Font aber mitzuliefern, somit beschränkt sich die Konfiguration auf wenige Klicks:

Font auswählen, Ligaturen einschalten, fertig

Und keine Angst: Man muss jetzt nicht irgendwelche Tastenkombinationen drücken, um diese Ligaturen zu erzeugen, das dreigestrichene Istgleich tippt sich nach wie vor mit drei Mal “=”.

Nochmal zum Vergleich beide Screenshots nebeneinander:

About the author

People Enabler at CHECK24