Inline-Elemente sind für viele Frontend Entwickler mehr oder minder ”unbekannte” Elemente, welche ein Dasein im Schatten des nur allzu bekannten und dominanten Block-Elements führt. Dabei bringen Inline-Elemente eine Reihe von Eigenschaften mit, welche jeder Entwickler kennen sollte – denn ohne sind gewisse Effekte beim Erstellen eines Layouts nicht zu erklären. Das Inlin-Elemente keinen Umbruch erzeugen ist allgemein bekannt. Darüber hinaus, haben Inline-Elemente aber viele weitere Eigenarten. Alle Inline-Elemente folgen einander in einer Linie. Daher werden sie auch «in»line genannt. Genaugenommen sind auch einzelne Buchstaben nichts anderes als eine Aneinanderreihung von Inline-Elementen.

Eine solche “line” hat eine Höhe – diese wird immer durch die Schriftgrösse bestimmt, ist aber um etwa 15% grösser als die Schriftgrösse. Die Elemente liegen jedoch nicht wie im ersten Moment vielleicht anzunehmen ganz “unten” oder “oben” in dieser Linie, sondern ruhen auf einer imaginären Linie dazwischen – ich nenne diese unsichtbare Linie «Basis-Linie»¹. Diese Linie dient dazu, dass “überhängende” Buchstaben wie etwa ein «g» nicht aus der “line” fallen.

Der Abstand zur Oberkannte der nächsten Line entspricht der CSS Eigenschaft line-height – ebenso ist dies der Abstand zwischen zwei Basis-Linien. Inline-Elemente ruhen grundsätzlich auf dieser Basis-Linie und können den Abstand der Linen selber nicht verändern – selbst wenn das Element höher ist. Dies äussert sich darin, dass man einem solchen Element zwar einen vertikalen Innenabstand² geben kann – und dieser auch angenommen wird³ – dadurch jedoch der Abstand zur nächsten Linie nicht verändert wird. Ein Rahmen um ein Inline-Element umschliesst jedoch nicht die Linien-Höhe sondern die Höhe der “line” – also Schriftgrösse plus etwa 15%⁴.

Auch Bilder sind bekanntlich Inline-Elemente. Sonst könnten wir keine Icons in einer Textzeile platzieren, ohne dass dieses einen Umbruch erzeugt. Wie alle anderen Inline-Elemente folgen auch Bilder den Gesetzen der «Inline-Graviation» – das heisst, sie ruhen auf der imaginären «Basis Linie». In manchen Layouts werden jedoch Bilder verwendet, welche nicht direkt von Text umschlossen wird. Das führt dazu, dass besagte Inline-Eigenschaften schnell vergessen werden können. Ist das Bild von einem Block-Element umschlossen und gibt man diesem Element einen Rand, liegt diese erstaunlicherweise nicht bündig mit der Bild Unterkante. Dies ist natürlich nicht wirklich «erstaunlich» sondern kommt von der etwa 7.5% höherligenden Basis-Linie, auf welcher das Bild ruht.

Diesem Umstand sind wir jedoch nicht hilflos ausgeliefert. Mit der CSS Eigenschaft vertical-align können wir bestimmen, wo ein Element innerhalb der Linie zu liegen kommt. Ob es also auf der unsichtbaren Basis Linie liegt oder nicht, ist beeinflussbar. Der Standard dieser Eigenschaft ist «baseline». Wenn der Rahmen um das Bild also auf der Unterkante anliegend sein soll, darf das Bild nicht mehr auf der «baseline» liegen, sondern muss sich ganz unten in der Line befinden. Folgende Beispiele zeigen ein Bild mit dem Standard-Wert «baseline» und dem Wert «bottom» welcher das Problem löst:

Der König ist tot, es lebe Alfred. Heute ist für mich der Tag gekommen, das geliebte aber in letzter Zeit – dank Spotlight & wegen sich ansammelnder Bugs – immer mehr vereinsamte Quicksilver zu Grabe zu tragen:

Quicksilver war jahrelang das Killerfeature für den Mac. Es ist ein Launcher – aber nicht nur das. Mit Qucksilver kann man Shell-Commands ausführen, iTunes steuern, Systemweite Hotkeys definieren, Mails erstellen, Personen suchen, Telefonnummern in Fullscreen anzeigen, den Mac schlafen schicken, Zips packen, Dokumente selektieren, auf Google (und jeder beliebigen Webseite) suchen… Eigentlich alles.

Ein Wunder dass sich damit kein Kaffee brauen und fliegen lässt. Und, es ist kostenlos. Es gibt bis heute kein mir bekanntes Äquivalent für den PC – geschweige denn ein freies. (Dafür einige Alternativen für auf dem Mac – kein davon sagt mir persönlich zu). Leider hat der Entwickler von Quicksilver (ein google Mitarbeiter) das Projekt fallen gelassen und der Community ist es nicht gelungen, das Programm zu stabilisieren. Einer der Punkte die seit Monaten auf einen Fix warten war das Aufrufen von Quicksilver mittel Double-Command – meine bevorzugte Variante den Launcher zu starten.

Heute schlich sich über Sparkle die Beta 0.6.3 von Alfred auf mein System. Alfred ist noch recht jung und ich verfolge ihn schon seit ein paar Monaten. Bisher habe ich das Programm noch nicht gross verwendet doch mit dem heutigen Update (vielleicht auch schon vorher) hat Dopple-Command als Hotkey Einzug gehalten – und damit katapultiert es sich bei mir geradewegs vor Spotlight und Quicksilver.

Nicht nur hat es ein ansprechendes UI – abgesehen von den Prefrences – es wird auch (sehr) aktiv weiterentwickelt und wird permanent umFeatures erweitert. Und es hat einen “Don’t klick this Button” Button.

Leider ist es noch nicht so mächtig wie Quicksilver (es beschränkt sich auf Suchen Lokal und im Internet), aber ich habe Hoffnungen dass sich dies noch verbessert.