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:

Folgende Probleme sind bis jetzt im Internet nicht wirklich gelöst:

• Der Anbieter eines Fotos, einer OpenSource Software, eines Blogs etc. wäre nicht böse, wenn er einen Kleinen Beitrag für seine Arbeit erhält. Es ist aber zu kompliziert (oder was auch immer) gleich einen ganzen Shop einzurichten und PayPal Buttons funktionieren irgendwie nicht.
• Der Benutzer würde vielleicht gerne mal auf unkomplizierte Art und Weise jemandem seinen (finanziellen) Dank aussprechen, kann das aber oft nicht – oder es ist umständlich, erfordert das eingeben von Passwörtern oder Kreditkartendaten…

Hier kommt Flattr in’s Spiel. Flattr ist eine Plattform für Kleinstbezahlungen und löst genau diese Probleme. Dabei bezahlt der User einen geringen Monatlichen Betrag (2€, 5€, 10€, 20€) und verteilt diesen dann mittels Klick auf Flattr Buttons an diejenigen Personen / Beiträge die dem User gefallen. Vorteil dabei:

• Die Kosten bleiben überschaubar und immer gleich, egal ob man nur 1 Person flattrt oder 100
• Ausserdem muss man sich nur einmalig anmelden
• Flattr ist leich einzubinden
• Es ist einfach, jemanden zu Flattrn. Just 1 Click:
  

Flattr ist ein Produkt aus Schweden und seit rund zwei Wochen online. Im Moment ist es noch eine invite Beta. Ich habe noch 3 Invites offen…

Flattr arbeitet zur Zeit an einer Rest API. Im Moment kann man flattr so einbinden:

<script type=”text/javascript”>
var flattr_uid = ‘16246‘;
var flattr_tle = ‘the entry title‘;
var flattr_dsc = ‘the entry description, please be as thorough as possible‘;
var flattr_cat = ‘category‘;
var flattr_lng = ‘language‘;
var flattr_tag = ‘tag1, tag2, tag3′;
var flattr_url = ‘http://www.example.com’;
var flattr_btn = ‘compact’;
var flattr_hide = ‘true’;
</script>
<script src=”http://api.flattr.com/button/load.js” type=”text/javascript”></script>