Kategorien
E-Business Workflow

Cron Jobs für Einsteiger bildhaft erklärt via Sheldon Cooper

Immer wiederkehrende Aufgaben wie Sicherungen des Datenbestands oder das Archivieren von Logfiles selbst zu erledigen, wäre ebenso öde wie unzuverlässig. Zu schnell geraten langweilige Routineaufgaben in Vergessenheit – nicht nur bei Nerds und Geeks, denen gerne nachgesagt wird, sie meiden redundante Abläufe wie die Schweinepest oder Kloputzen. Glücklicherweise gibt es Cron Jobs, die Webworkern im Allgemeinen und Nerds im Besonderen wiederkehrende Aufgaben abnehmen.

Den Prototypen des vollkommenen Nerds haben die Macher der Fernsehserie The Big Bang Theory geschaffen. Sheldon Cooper argumentiert, er müsse nur einmal Spaß haben, um dann mit anderen Aufgaben fortfahren zu können. Das sei genauso wie mit Finnisch: Diese Sprache werde er schließlich auch nicht ein zweites Mal lernen – einmal genüge vollkommen.


Nerds wie Sheldon Cooper hassen Redundanz und planen sorgfältig – QUELLE: Screenshot

Darüberhinaus hat Sheldon jedoch auch einen strikten Zeitplan, wann und wo er die leider unvermeidbaren redundanten Aufgaben erledigt. Wäre Sheldon ein unixoider Server – und wer die Serie kennt, weiß, dass das kein allzu abwegiger Gedanke ist – würde er diesem Plan sicherlich mithilfe des cron-Dienstes folgen.

Was ist cron

Cron ist ein so genannter Daemon. Das ist bei Unix und bei unixartigen Betriebssystemen wie Linux und Mac OS X eine Jobsteuerung, die im Hintergrund möglichst ressourcenschonend wiederkehrende Aufgaben ausführt. Häufig führen Cron Jobs Programme aus, die entscheidend dazu beitragen, dass ein System funktionsfähig bleibt.

Neben cron sind zum Beispiel httpd (antwortet als Webserver auf http-Anfragen) und syslogd (legt Nachrichten von Programmen in Logdateien ab) bekannte Unix-Daemons, die wie cron ebenfalls im Serverbereich eine große Rolle spielen. Typische Aufgaben von cron sind beispielsweise das Erstellen von Backups und das Löschen oder Verschieben von Logdateien, aber auch automatisiert veröffentlichte Blogposts lassen sich damit im Handumdrehen realisieren.

Das Ganze läuft wie gesagt nicht nur unter Unix, sondern unter anderem auch unter Mac OS X oder Linux. Das kommt uns sehr gelegen, da sich dieser Artikel vor allem an Einsteiger wendet, wollen wir nicht gleich an einem Live-Webserver mit Root-Zugriff herumspielen, sondern bewegen uns lieber auf sicherem Terrain und probieren cron auf dem eigenen Rechner aus. Windows-Benutzer sind leider etwas benachteiligt, können sich aber natürlich eine Linux-Distribution in einer virtuellen Maschine installieren. Eine weitere Alternative ist die lokale Installation eines Webservers – etwa WampServer – auf Windows (Anmerkung der Redaktion).

Dann sind wir auch schon startbereit, denn cron ist sowohl auf dem Mac als auch unter Linux bereits vorinstalliert.

Der Name „cron“ ist abgeleitet von Chronos, dem griechischen Gott der Zeit. „cron-Daemon“ drückt also schon perfekt aus, was cron macht: Nach zeitlichen Mustern im Hintergrund Befehle aufrufen. Die entsprechenden Anweisungen erteilen wir indirekt über crontabs, das sind benutzereigene Tabellen, in denen die Cron-Befehle gespeichert sind.

Crontabs

Wir werden nun am Beispiel der fiktiven Serienfigur Sheldon Cooper einen Wochenplan als Cron Jobs anlegen. Dazu editieren wir eine bestimmte Textdatei, die crontab (cron-Tabelle). Der einfachste Weg, einen solchen crontab zu öffnen, ist der Befehl crontab -e, den wir einfach in die Konsole eintippen. Eventuell sehen wir in der sich öffnenden Datei schon eine Zeile, in der etwa folgendes steht:

# m h dom mon dow command

Es handelt sich hierbei um eine grobe und zugegebenermaßen sehr kryptische Bedienungsanleitung. Übersetzt würde die Zeile vielleicht so lauten:

# Minute Stunde Tag Monat Wochentag Kommando

Es wird schon durchschaubarer. Am besten wird die Syntax aber an einem Beispiel klar. Wir nehmen uns dazu wieder Dr. Sheldon Cooper und seinen Wochenplan vor: Jeden Samstag um exakt 20:15 Uhr ist Waschtag.

15 20 * * 6 laundrynight

In Prosaform würde dies lauten, dass Sheldon immer zur fünfzehnten Minute und zwanzigsten Stunde an jedem Wochentag mit der Nummer 6 den Befehl laundrynight ausführt. Die Woche beginnt für cron mit dem Sonntag, welcher die Nummer 0 hat. Jeder weitere Tag wird bis 6, dem Samstag, hochgezählt. Beim Monat und dem „Monatstag“ werden keine Einschränkungen vorgenommen, was durch das Sternchen ausgedrückt wird. Wie in anderen Sprachen handelt es sich hier um eine Wildcard, ein Platzhalter, der alle an dieser Stelle möglichen Werte repräsentiert.


Wöchentliche Halo-Session in der Nerds Community  QUELLE: Screenshot

Schauen wir uns einen weiteren Fall an. Sheldon und die drei anderen Nerds halten jeden Mittwoch um 20:00 Uhr eine gemeinsame Halo-Session ab. Da es für die Verdeutlichung einer bestimmten Eigenheit der cron-Syntax dienlich ist, nehmen wir ferner an, dass diese Halo-Session zusätzlich immer am Siebten jedes Monats stattfindet.

15 20 7 * 3 halonight

Würden wir im Gegensatz dazu annehmen, dass Halo-Night nicht am Dritten jedes Monats, sondern nur am dritten Oktober zusätzlich zu jedem Samstag stattfände, hätten wir ein Problem, denn das lässt sich nicht so einfach umsetzen. Vermuten würde man eine Kombination wie diese:

15 20 7 10 3 halonight

Doch das wird nicht funktionieren. Stattdessen wäre Halo-Night zwar am 3. Oktober, aber zusätzlich nicht jeden Mittwoch im Jahr, sondern nur die vier oder fünf Mittwoche im Oktober. Sheldon wäre darüber nicht sehr glücklich.

Aber woran liegt das? Nun, man könnte sagen, dass die Monats- und Wochentagangaben mit OR verknüpft sind. Das bedeutet, dass sich diese beiden Bedingungen insofern nicht ins Gehege kommen, als dass der obere Ausdruck sowohl für den siebten Tag im Monat als auch für den dritten in der Woche zutrifft. Und nicht, dass der Ausdruck nur für den siebten Tag im Monat, der gleichzeitig der dritte der Woche ist, gilt; was einer AND-Verknüpfung entspräche. Eine solche AND-Verknüpfung besteht aber zwischen dem Monat und dem Monatstag und zwischen dem Monat und dem Wochentag. So gilt folgender Ausdruck nur für die Freitage, welche im Juni liegen:

15 20 * 6 5 dosomething

Ganz schön kompliziert, denkt man sich. Doch eigentlich ist das System recht intuitiv und nur das Erklären lässt die grauen Zellen rauchen. Trotzdem hier zur Veranschaulichung noch eine Skizze, die nochmals die Verknüpfungen verdeutlicht.

# m h  dom mon dow  command
#       |   |   |
#       |   |   |
#       -AND-   |
#       |   |   |
#       |   |   |
#       |   -AND-
#       |       |
#       |       |
#       ----OR---

Bei dieser ASCII-Skizze handelt es sich um einen reinen Kommentar und sie kann deshalb auch als Gedankenstütze direkt ins crontab übernommen werden.

Weitere Feineinstellungen

Ein Cron Job besteht also aus sechs Argumenten, die jeweils mit Leerzeichen voneinander abgegrenzt sind. Ab dem fünften Leerzeichen wird alles Darauffolgende als Kommando interpretiert, das bedeutet, wir können in die Kommandos selbst so viele Leerzeichen packen wie wir wollen, ohne dass dadurch der Cron Job invalide wird.

# Jeden Freitag ist Vintage Video Game Night:
0 19 * * 5 videogamenight --flavour vintage

Interessant ist das vor allem auch dann, wenn wir mit einem Cron Job mehrere Aufgaben erledigen möchten. In dem Fall hängen wir die einzelnen Kommandos einfach mit einer &&-Verknüpfung aneinander.

Launen und Marotten?

In Sheldons Leben gibt es auch ein klein wenig Willkür, aber natürlich ist auch diese zeitlich streng geregelt. So trinkt er heiße Schokolade nur in Monaten, die im Namen ein „r“ enthalten. cron bietet für solche Bedingungen eine verkürzte Notationsmöglichkeit.

* * * 1,2,3,4,9,10,11,12 * hotchocolatetime

Zufälligerweise liegen diese Monate in einer Reihe, so dass wir uns auch einer weiteren Vereinfachung bedienen können:

* * * 1-4,9-12 * hotchocolatetime

Routinen für Zwangsneurotiker


Keimfreiheit à la Sheldon Cooper – QUELLE: Screenshot

Sheldon hätte wohl am liebsten alles absolut steril, so auch seine Hände, was der Grund dafür ist, dass er sich diese andauernd wäscht. Nehmen wir an, das Händewaschen passiert alle zehn Minuten. Wie drücken wir das in einem Cron Job aus? Ganz einfach:

*/10 * * * * washhands

In jeder Minute, die ein Vielfaches der Zehn ist, wird washhands ausgeführt. Das funktioniert natürlich auch mit Stunden, Tagen und Monaten.

Immer am dritten Donnerstag – Cron Jobs und Regeln

Für Sheldon und seine Kumpels gibt es genau einen Tag im Monat, an dem etwas Unvorhersehbares passieren kann. Dieser Tag nennt sich Anything-can-happen-thursday und findet immer am dritten Donnerstag im Monat statt. Im Gegensatz zu seinen Freunden findet Sheldon diese Gewohnheit eher überflüssig, was auf seine Furcht vor Überraschungen zurückzuführen ist.

Vielleicht ist seine Abneigung gegen die Regel aber auch schlicht darin begründet, dass man diese nicht in einem Cron Job ausdrücken kann. Man kann sich zwar im Kommando-Bereich einen Workaround schaffen, doch grundsätzlich gibt es eine solche Regeldeklaration in cron nicht. Man kann also mit cron nicht alle erdenklichen Aufgaben abdecken.

Asynchrone Aufträge übernimmt Daemon anacron

Wenn Sheldon einmal verschlafen sollte und erst um neun Uhr aufsteht – somit seine geplante Frühstückszeit verpasst, müsste er bis zum Mittagessen hungern, denn der Cron Job wird nur zur definierten Zeit ausgeführt, wenn das System aktiv ist. Termine werden niemals nachgeholt. Solche asynchronen Aufträge lassen sich beispielsweise mit dem verwandten Daemon anacron lösen.

Im Server-Bereich ist dieser Daemon eher unrelevant, da Server sowieso nach Möglichkeit eine Uptime von 99,99% haben sollten. Der heimische Rechner wird aber nicht den ganzen Tag laufen. Für die Regelung des privaten Zeitplans ist anachron also in manchen Fällen vielleicht die bessere Wahl.

Beispiele mit Realweltbezug

Entfernen wir uns zum Schluss von nerdigen Serienhelden und schauen uns Beispiele an, die etwas mehr Bezug zur realen Welt haben. Die einfachste Möglichkeit, jeden Sonntagabend ein Backup zu machen, wäre so möglich:

0 22 * * 0 datum=`date -I` ; tar -zcf backup_$datum.tgz ./public_html

Dieser Cron Job erstellt automatisch ein gepacktes Archiv des Ordner public_html. Die Variable $datum ist dabei Teil des Dateinamens und ganz praktisch, wenn wir später ein Backup aus einem ganz bestimmten Zeitraum suchen.

Aber wir wollen nicht nur unsere Dateien auf dem Webspace sichern, sondern auch die MySQL-Datenbank:

0 4 * * * date=`date -I` ; mysqldump -u DBUSER -p DBPASS –all-databases | gzip >/irgendwo/mysqlbackup_$date.sql.gz

Es wird jeden Tag morgens um vier Uhr ein Backup aller Datenbanken des Users DBUSER mit dem Passwort DBPASS angelegt. Auch hier wird alles in ein Archiv gepackt, das wieder das Datum als Teil des Dateinamens enthält.

Scripte automatisch laufen lassen

Was man auch immer wieder hört, ist, dass viele nach einer Möglichkeit suchen, ein bestimmtes Skript automatisch zu einer bestimmten Zeit ausführen zu lassen. Mit Cron Jobs ist das die denkbar einfachste Übung:

0 0 * * 1 /pfad/zum/skript.php

Die skript.php kann nun beispielsweise eine wöchentliche Linkliste ins Blog stellen und veröffentlichen, ohne dass wir mittels seltsamer PHP-Workarounds selbst Hand anlegen müssen.

(mm),

Kategorien
Design HTML/CSS

Font-Size-Adjust und Text-Size-Adjust: Viel Verwirrung um zwei neue CSS3-Eigenschaften

Es ist Ihnen vielleicht schon aufgefallen: Einige CSS-Eigenschaften beinhalten das Schlüsselwort „text“, andere das Wort „font“. Was vom Sinn her ähnlich zu sein scheint, birgt im Zusammenhang mit CSS einen signifikanten Unterschied. Die CSS-Eigenschaften font-size-adjust und text-size-adjust haben bis auf den gleichen Namensteil „size-adjust“  keine Gemeinsamkeiten.

„Font“ steht für das eher Künstlerische

Eigenschaften mit dem Wörtchen „font“ beziehen sich auf die individuelle Gestaltung einer Schrift; auf alles, womit man auch als Schriftgestalter außerhalb des Webs zu tun bekommt. Die CSS-Eigenschaften font-weight und font-style bezeichnen die gewünschte Schriftstärke (mager, fett, halbfett) und die Schriftlage (kursiv, normal). Beide Merkmale gehören zum Schriftschnitt, ebenso wie die Schriftbreite (normal, breit, schmal). Eine Schriftamilie (font-family) verfügt in der Regel zumindest über vier verschiedene Schriftschnitte (der Begriff stammt aus Zeiten des Bleisatz als die Vorlagen für Buchstaben oder Lettern noch aus Stahl geschnitten wurden – Anmerkung der Redaktion), das heißt eine Normalschrift, eine echte Kursivschrift, eine Fettschrift sowie Fettkursiv. Weitere verbreitete Bezeichnungen für Schriftstärken sind zum Beispiel Light, Condensed oder Black. Leider nimmt die CSS-Eigenschaft font-weight diese Werte nicht an.

Neben font-weight und font-style gibt es noch die Eigenschaften:

  • font-variant und
  • font-family.

Mit font-variant können Sie sogenannte Kapitälchen (Schrift in Großbuchstaben) realisieren, während Sie über die CSS-Eigenschaft font-family Schriftfamilien wie zum Beispiel Arial, Helvetica, Verdana vorgeben. Man kann also sagen, dass sich alle Eigenschaften mit „font“ im Namen auf die Schrift an sich beziehen und das behandeln, was vom kreativen Kopf hinter der Schrift schon bedacht werden musste.

„Text“ betrifft das Setzen der Schrift

Mit den Eigenschaften des Keywords „text“ hingegen muss sich im Grunde kein Schriftgestalter abgeben. Diese Eigenschaften entstanden teilweise auch aus der Not heraus; damit sich Schrift richtig an das Medium Web anpassen ließ. Unterstreichungen (text-decoration) gab es zwar schon vor dem Web, fielen aber nicht wirklich in den Aufgabenbereich der Typografen.

Bei „text“-Eigenschaften tritt der Setzer zutage. Die Aufgabe des Setzers ist es, die Schrift richtig auszurichten (text-align), die Einzüge zu bestimmen (text-indent), oder zu entscheiden, ob eine Schrift ausschließlich in Kapital-Buchstaben gesetzt werden soll (text-transform). Eine neuere Eigenschaft wäre dann noch der Text-Schatten (text-shadow) oder nun eben text-size-adjust.

Font-Size-Adjust versus Text-Size-Adjust

Jetzt wissen wir schon, wie die beiden Eigenschaften einzuordnen sind. Doch was bewirkt überhaupt font-size-adjust, was text-size-adjust?


Abbildung 1: Unterschiedliche Laufweiten der Schriften

Font-size-adjust ist vor allem auch dann interessant, wenn wir per @font-face Schriften referenzieren, die der Browser herunterlädt und sich dann so verhält, als habe er die Schrift schon immer gehabt. Bei einem näheren Blick auf verschiedene Schriften bei gleicher Schriftgröße fällt auf, dass die Schriften mal größer, mal kleiner ausfallen (Abb. 1). Mit font-size geben wir nämlich nicht die subjektive Größe der Schrift, sondern die Höhe des „Stempelkissens“, die Größe des sog. virtuellen Kegels (hellblaue Linien in Abb. 1) an. Manche Schriften wie die Verdana nutzen diesen virtuellen Raum sehr weit aus, während die Vista-C-Fonts (Calibri, Constantia, Corbel …) sich bescheiden geben und recht großzügig Platz lassen. Setzt man so beispielsweise die Calibri und die Verdana nacheinander in seinen Schriften-Stapel, kann es passieren, dass für denjenigen, der die Calibri nicht hat, ein völlig anderes Schriftbild entsteht als für alle anderen (Abb. 2).

font: 11px Calibri, Verdana, sans-serif;

Mit font-size-adjust wirken wir nun diesem Problem etwas entgegen. Wir gehen davon aus, dass alle Schriften in unserem Stapel einen ähnlichen Apsektwert (aspect ratio) haben und dass dieser maßgeblich für die subjektive Größe einer Schrift verantwortlich ist. Dieser Wert beschreibt das Verhältnis von der Mittellänge (auch X-Höhe: die Höhe der Kleinbuchstaben) zur Großbuchstabenhöhe. Die Verdana hat ein Verhältnis von circa 0,55 und die Calibri von 0,46. Wir geben für font-size-adjust nun den Aspektwert der ersten Schrift in unserem Stapel an; also der der Calibri:

font: 11px Calibri, Verdana, sans-serif;
font-size-adjust: 0.46;

So arbeitet font-size-adjust

Aber was genau tut font-size-adjust eigentlich? Nun, sagen wir: Man kann damit eine bestimmte X-Höhe erzwingen. Alle Schriften werden so skaliert, dass ihre Mittellängen der X-Höhe der ersten notierten Schrift entsprechen. Da man in seinem Schriftstapel ohnehin darauf achten sollte, dass die Aspektwerte nicht allzu weit auseinanderlaufen, ist das eine sehr ordentliche Methode, um Schriftgrößen anzugleichen. Die Aspektwerte vieler Webfonts lassen sich hier ablesen oder auch mit den virtuellen Linealen diverser Bildbearbeitungsprogramme selbst bestimmen.

Wie genau der Browser dabei vorgeht, ist nicht sicher. Prinzipiell müssten der Rendering-Engine die Aspektwerte aller verbreiteten Schriften bekannt sein.

Was ist text-size-adjust?

Text-size-adjust hört sich wie gesagt sehr ähnlich an, macht aber etwas gänzlich anderes. Die Eigenschaft gibt es bisher nur mit dem Präfix webkit beim iPhone-Safari. Dort auf dem iPhone bewirkt -webkit-text-size-adjust eine Justierung der Schriftgröße. Man kann der Eigenschaft die Werte none (keine Schriftgrößenänderung), auto (automatische Schriftgrößenänderung) und Prozentangaben (relative Schriftgrößenänderung zu none) übergeben. Doch worin liegt der Unterschied zu normaler Schriftgrößenänderung per font-size?

Nun, ein nicht sehr unwichtiger Unterschied ist, dass sich die Vergrößerung der Schrift per text-size-adjust nicht auf die Einheit em niederschlägt. Notiert man beispielsweise die Breite eines Blocks relativ zur Schriftgröße mit em-Angaben, dann wird bei einer größeren Schrift auch dieser Block breiter. Vergrößern wir die Schrift mit text-size-adjust, gilt das nicht mehr.

Achtung iPhone

Was aber wahrscheinlich am wichtigsten ist: Auf dem iPhone ist die Standardbelegung von text-size-adjust nicht none (was gar keiner Schriftgrößenänderung entspräche), sondern auto. Das bedeutet, dass jede Website automatisch skaliert wird. Möchte man das zurücksetzen, muss man den Wert manuell auf none setzen.

/* Zurücksetzen der Auto-Schriftskalierung */
html { -webkit-text-size-adjust: none; }

Was ist der Sinn von text-size-adjust?

Vor allem mit dem aktuellen iPhone 4 haben wir ein Endgerät mit einem enorm hoch auflösendem Display, aber auch die iPhones davor oder das iPad haben eine sehr hohe Pixeldichte bei relativ kleinem Bildschirm. Setzt der Webdesigner nun alle seine Schriftgrößenwerte in Pixel – was ja durchaus legitim ist -, kann es passieren, dass man als iPhone-User Texte mit einem Rasterelektronenmikroskop lesen müsste. Damit das nicht passiert, hat sich Apple die nachträgliche Textskalierung per text-size-adjust einfallen lassen. Der vorbelegte Wert auto soll dabei schon eine sinnvolle Vorgabe sein, an der man eigentlich nichts mehr ändern müsste.

Schlusswort

Text-size-adjust und font-size-adjust haben also nichts gemein, bis auf einen Teil des Namens. Text-size-adjust ist außerdem bisher noch „iPhone-only“ und wird zum Beispiel auf Android-Geräten nicht unterstützt.

Font-size-adjust hingegen können der Firefox, Safari, Chrome und Opera, also wieder einmal alle außer dem Internet Explorer. Zum Glück ist die Funktion nicht überlebenswichtig für ein Design, sondern macht es nur etwas ordentlicher und schöner, sodass Internet-Explorer-Nutzer gar nichts davon mitbekommen, wenn sie nicht in den Genuss angepasster Schriftgrößen per font-size-adjust kommen.

(mm),

Kategorien
Design HTML/CSS

CSS3-Spaltenlayouts: Das Template Layout-Modul

Spalten-Layouts sind in Zeitungen und Print-Magazinen ein Standard, der sich im Webdesign bisher leider nur mit Biegen und Brechen simulieren lässt. Neue CSS3-Module versprechen hier Abhilfe. Teil 5 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Template Layout-Modul.

Während wir in den bisherigen Teilen der Serie stets Spezifikationen behandelten, die hauptsächlich von einem Browserhersteller ausgearbeitet und vorangetrieben werden, machen wir jetzt einen Schritt in die andere Richtung und schauen uns den Entwurf eines altgedienten W3C-Haudegen an. Bert Bos arbeitet seit 1996 für das W3C und kann neben Ian Hickson (Google), Tantek Çelik (früher Microsoft) und Håkon Wium Lie (Opera) als einer der CSS-Spezifikatöre angesehen werden. Lesenswert sind unter anderem seine Essays über CSS-Variabeln oder die Grundsätze für eine gelungene Spezifikation.

Das Grundprinzip

Bei Flexbox hatten wir gesehen, wie das letztliche Gesamtlayout durch jedes einzelne beteiligte Element beeinflusst wird. Der Ansatz des Template Layout-Moduls ist dagegen grundverschieden. Wie der Name schon andeutet, wird im Voraus eine Art Schablone (engl.: template) angelegt und auf ein Elternelement angewendet. Die darunterliegenden Kind-Elemente können nun in dieses feste Raster eingegliedert werden. Das Modul verschmilzt auch ein wenig mit dem Grid Layout-Modul, denn das Template kann mit verschiedenen Syntaxen angelegt beziehungsweise erweitert werden. Für das Verständnis des Template-Moduls ist die umfassende Kenntnis des Grid-Moduls aber nicht zwingend notwendig.

Bevor es gleich ans Eingemachte geht, möchte ich an dieser Stelle wieder darauf hinweisen, dass es sich auch bei der Spezifikation zu diesem Modul um einen so genannten Working Draft handelt. Das heißt, dass es jederzeit sein kann, dass Änderungen vorgenommen werden oder Teile aus der Spezifikation verworfen werden. An einigen Stellen in der derzeitigen Version der Spezifikation sind solche Stellen sogar schon markiert. Das Grundprinzip wird sich mit nahezu hundertprozentiger Sicherheit jedoch nicht mehr ändern.

Zum Einstieg ein Beispiel

Wie auch schon Flexbox erweitert das Modul die Display-Eigenschaft um neue Zuweisungen. Darüber hinaus wird die Position-Eigenschaft ebenfalls ausgebaut, um Elemente im Template verankern zu können.

Damit wir mit dem System warm werden, hier ein einfaches Beispiel, anhand dessen die grobe Funktionsweise klar wird.

    <!-- HTML-Auszug -->
    <div class="wrapper">
        <div id="eins"></div>
        <div id="zwei"></div>
        <div id="drei"></div>
        <div id="vier"></div>
    </div>
    /* CSS */
    .wrapper {
        display: "ab"
                 "cd";
    }

    #eins {
        position: c;
    }

    #zwei {
        position: a;
    }

    #drei {
        position: d;
    }

    #vier {
        position: b;
    }

Dieser Code ergibt folgendes Schema:

Hier lassen sich schon einmal syntaktische Vorgaben und prinzipielle Verhaltensweisen ableiten. Der Eigenschaft display können von nun an eine oder mehrere Zeichenketten als Werte übergeben werden, womit man dann ein Template erschaffen hätte. Eine gültige Zeichenkette besteht dabei aus den Buchstaben a-z, dem @-Zeichen oder Punkten. Diese Zeichen können beliebig oft aufeinanderfolgen, aber nie nach einer Unterbrechung nochmals erscheinen. So ist „aaabbccc“ eine valide Zeichenkette, „aabbaacc“ jedoch nicht.

Wie gesagt kann man der Display-Eigenschaft nicht nur eine, sondern beliebig viele dieser Zeichenketten übergeben. Jede dieser Zeichenketten steht für eine Zeile. Im obigen Beispiel wurden diese schon so eingerückt, dass man sich allein von der Position der Zeichen im CSS schon ein Bild vom endgültigen Layout machen kann. Erlaubt wäre es aber auch so:

    .wrapper {
        display: "ab" "cd";
    }

Insgesamt ist nur wichtig, dass alle Bereiche, die durch gleiche Zeichen gebildet werden, stets ein eindeutiges Rechteck darstellen. Keine zwei Rechtecke und keine ausgefallenen Tetris-Formen.

Den Kindelementen weist man nun über die position-Eigenschaft eine Position in der soeben angelegten Schablone zu. Es ist egal, in welcher Reihenfolge die Elemente im HTML ursprünglich auftauchen, mit den Anweisungen lässt sich diese Ordnung komplett umkrempeln.

Eigentlich möchte ich keine bösen Assoziationen wecken, doch der Vergleich des Template Layout-Moduls mit Tabellen-Layouts liegt natürlich nahe und wird sogar in der offiziellen Spezifikation herangezogen. Die größte Parallele ist das Konzept der Unterteilung eines Blocks in Zeilen und Spalten. In Tabellen sind im Normalfall alle Zeilen so hoch wie der höchste Block und alle Spalten so breit wie der breiteste Block. Dieses Prinzip wird von Template-Layout übernommen, wenn auch in mächtigerer und dadurch komplizierterer Form.

[Hinweis (irgendwie unauffällig auffallend gestalten)]Solch ein Template erschafft ein Grid, das heißt, man kann darin mit der Grid-Einheit gr Elemente positionieren oder verschieben.

Die Display-Eigenschaft unter der Lupe

Wie wir eben gelernt haben, kann man der Display-Eigenschaft Zeichenketten, bestehend aus Buchstaben, Punkten oder @-Zeichen, übergeben. Die Buchstabenblöcke stehen für Platzhalter, in die später Inhalte gelegt werden können. Blöcke aus @-Zeichen sind der sog. Default-Slot für Inhalte, die keine gültige Positionierung erhalten haben. Blöcke aus Punkten sind Abstandshalter oder sog. Whitespace. Hierin fließt kein Inhalt. Ein Beispiel für eine komplexere Seitenstruktur könnte also wie folgt notiert werden:

    /* CSS */
    .wrapper {
        display: "aaaaa"
                 "....."
                 "b.@.c"
                 "....."
                 "ddddd"
    }

Wir haben hier einen Header (a), darunter einen Abstandshalter, gefolgt von dem Inhalt und zwei Sidebars (b und c). Es folgt wieder ein Abstandshalter und der Footer (d).

Zukunftsaussichten

Wahrscheinlich ist man erst einmal enttäuscht. Die Template-Notation erlaubt nur rechteckige und eindeutige Blöcke? Gerade hier würde doch die Stärke des Moduls liegen. So ist es austauschbar und sogar weniger flexibel als die „Konkurrenz“. Doch wahrscheinlich ist genau das Wort Konkurrenz der springende Punkt. Wären mehrere gleichnamige Blöcke erlaubt, könnte man mit dem Modul Multi-Column obsolet machen und mit nicht-rechteckige Sektoren käme man mit Float ins Gehege. Bei den vier neuen Layout-Modulen gibt es ohnehin schon zu viele Überschneidungen, muss man da noch mehr Verwirrung provozieren?

Trotzdem ist in der Spezifikation vermerkt, dass es vielleicht in zukünftigen Ausarbeitungen erlaubt sein könnte, mit unterbrochenen Bereichen oder nicht-rechteckigen Blöcken zu arbeiten.

Breiten und Höhen

Wie ich eingangs erwähnte, ist es ganz sinnvoll, die Syntax des Grid-Layouts zu kennen und verinnerlicht zu haben, wenn man mit Template umgehen möchte. Bei allen bisherigen Notationen haben sich die Breiten und Höhen der Zeilen und Spalten durch die Breiten und Höhen der beteiligten Blöcke ergeben. Vom Blick auf die Template-Notation alleine konnte man nicht erkennen, wie breit oder hoch die Spalten und Zeilen einmal werden. Folgendes Beispiel zeigt eine Situation, über die man mehr Kontrolle hat:

    .wrapper {
        display: "a   b   c" /200px
                 "d   e   f" /1*
                 "g   h   i" /100px
                  2*  50% 1*
    }

Ich gebe zu: das sieht verdammt unübersichtlich aus. Bei längerem Hinsehen erkennt man aber das System. Möchte man die Höhe einer Zeile explizit definieren, schreibt man hinter die entsprechende Zeichenkette einen beliebigen Wert. Erlaubt ist neben Pixelangaben und relativen Werten auch die schon bekannte *-Einheit. Wer die genaue Funktionsweise nochmals nachlesen möchte, kann den Artikel zum Grid Positioning-Modul herannehmen.

In der Horizontalen funktioniert das Ganze ähnlich. In der letzten notierten Zeile stehen eine Reihe Werte; jeder Wert gehört zu einer Spalte. Der erste Wert steht für die erste Spalte, der zweite für die zweite und so weiter.

Als Ergebnis aus dem Beispielcode bekommen wir also folgendes Bild zu sehen:

Browserunterstützung

Kein aktueller Browser unterstützt das Modul. Und kein Browserhersteller arbeitet ernsthaft an einer Implementation. Das ist schade; doch man sieht an diesem Beispiel sehr gut, welche Probleme das alte W3C hat. Die Spezifikation könnte noch so toll sein – wenn kein Browser sie unterstützt, ist alles vergebene Liebesmüh’.

Dabei erschwert es die aktuelle Spezifikation den Browser-Ingenieuren noch zusätzlich, denn es ist in dieser Form keine experimentelle Implementation möglich. Bei Flexbox oder Multi-Column – den beiden Modulen, die von nahezu jedem aktuellen Browser schon implementiert sind – werden die neuen Funktionen über Präfixe geregelt. Kein Browser unterstützt das wahre box-flex, doch der Firefox unterstützt -moz-box-flex, Chrome und Safari unterstützen -webkit-box-flex und Opera behilft sich mit -opera-box-flex. Die Möglichkeit dieser so genannten „vendor-specific prefixes“ erlaubt es den Browserentwicklern, sorgloser eine neue Technologie zu adaptieren. Bei dem Template Layout-Modul ist diese Möglichkeit syntaxbedingt nicht gegeben.

Für alle, die dennoch Gefallen an der Syntax gefunden haben, empfiehlt sich dieses jQuery-Plugin, welches das entsprechende Verhalten in JavaScript simuliert.

Fazit

Und am Ende fragt man sich: Wozu das Ganze? Das Modul kann nichts, was man nicht mit Flexbox oder Multi-Column zustande brächte. Es ist unter dem Strich nur ein Modul, das eine bestimmte Sache sehr gut kann: feste Layouts. Man erreicht gleiche Resultate mit Flexbox, aber manchmal kann es sein, dass man die Template-Notation vorzieht. Es ist also eine Geschmackssache. Und dadurch auch eine Glaubenssache, denn die Frage ist: Will man mehrere Spezifikationen haben, die das gleiche Aufgabengebiet aber verschiedene Herangehensweisen haben? Flexbox, Multi-Column, Grid-Layout, Template? Ich jedenfalls, kann diese Frage für mich noch nicht eindeutig beantworten. Während ich es bei Farbnotationen begrüße, die Freiheit zu haben, mit rgb(), hsl() oder Hexadezimalwerten zu arbeiten, bin ich mir bei komplexen Mehrspaltenlayouts nicht mehr so sicher. Verwirrung ist programmiert, sowohl bei Webdesignern als auch bei Browserentwicklern. Ich hoffe indes, ich konnte mit dieser Artikelreihe ein wenig Licht ins Dunkel des CSS3-Modul-Dickichts bringen.

(mm), ™

Kategorien
Design HTML/CSS

CSS-3-Spaltenlayouts: Das Grid Positioning-Modul

Im letzten Artikel der Serie verwies ich fast unbemerkt auf das Grid-Modul. Anders als die ersten beiden (Flexbox und Multi-Column) konzentriert sich dieses Modul verstärkt auf die Positionierung von Elementen innerhalb eines Spaltengefüges, anstatt sich „primär“ selbst darum zu kümmern, dass ein solches entsteht. Primär nur, wohlgemerkt, denn es ist mit Grid-Layout durchaus möglich, Raster zu definieren.

Die Spezifikation zum Grid-Modul entspringt den Köpfen vieler Denker, darunter wieder Hakon Wium Liu, der sich schon für Multi-Column verantwortlich zeichnet. Als Hauptautoren werden aber Markus Mielke und Alex Mogilevsky von Microsoft genannt. Beide geben sich dort selbstverständlich dem hauseigenen Browser hin. Markus Mielke beispielsweise werkelte im Jahr 2000 an der DOM-Implementation des uns mittlerweile verhassten IE6. Damals war der Internet Explorer jedoch bei weitem der fortschrittlichste Browser auf dem Markt; dass er heute noch stellenweise Verwendung findet, kann man nicht den damaligen Entwicklern anlasten.

Bei einem etwas genauerem Blick auf die Spec fallen die vielen roten Stellen auf. In roter Schrift werden Verbesserungsvorschläge, Hinweise auf Lücken oder sonstige Anmerkungen markiert. Obwohl sich auch diese Spezifikation schon als „Working Draft“ gibt, sind einige solcher Bemerkungen zu finden.

Should there be an option to align flow content to next available gridline? It opens really cool scenarios.

Obwohl derartige Randnotizen sehr interessant und inspirierend sind, hindern sie die Suche nach Fakten und verwässern die Spezifikation ein wenig. Die wage Beschreibung vieler Funktionsweisen ist wahrscheinlich auch der Grund für die dürftige Browserunterstützung. Kein aktueller Browser unterstützt das Modul soweit, dass man es sinnvoll einsetzen könnte.

Darüberhinaus ist das gesamte Dokument das letzte mal im September 2007 aktualisiert worden. Da schwindet die Hoffnung auf Innovation ein wenig. Dennoch bedeutet das nicht, dass man das Thema „Positionierung im Spaltensatz“ einfach missachten könnte. In diesem Artikel soll es neben der Beschreibung der Grundfunktionen des Moduls deshalb auch um grundlegende Lehrweisen des Spaltensatz im Druck und die Übertragbarkeit auf das Web gehen.

Elemente im Raster

Um den Spaltensatz zu verstehen, muss man einen kleinen Ausflug ins Print-Design machen. Dort existiert der Spaltensatz schließlich schon seit Jahrhunderten und die Vor- und Nachteile haben sich seit damals kaum geändert.

Zunächst wird allgemein unterschieden zwischen dem Spaltensatz und dem Kolumnensatz. Das Resultat ist optisch ähnlich, aber auf der inhaltlichen Ebene findet man einen großen Unterschied. Kolumnen sind eigenständige Texte, die meist am rechten Rand als Zusatz zu einem größeren Hauptartikel erscheinen. Daher kommt auch der Name der Textsorte Kolumne. Die andere Gattung kennen wir schon von Multi-Column. Wenn ein zusammenhängender Text sich auf mehrere Spalten verteilt und von der einen in die jeweils benachbarte Zeile fließt, bezeichnet man das als den klassischen Spaltensatz. Erstere Form lässt sich am besten mit Flexbox (oder in der Übergangsphase noch mit floats) umsetzen, während bei der zweiten wie gesagt Multi-Column zum Einsatz kommt.

Der offensichtlichste Vorteil des Spaltensatzes ist die begrenzte Laufweite. Bekanntlich sollte die Laufweite – also die Breite eines Textblocks unter Beachtung der Schriftgröße – nicht zu groß sein. Bisher gab es für Webdesigner aber auch eine Minimalgrenze, denn ein zu schmaler Textblock geht gerne einmal im komplexen Seitengefüge unter und der Leser ist permanent damit beschäftigt, das Scrollrad rotieren zu lassen. Im Spaltensatz fallen diese Probleme weg. Man kann die Laufweite perfekt regeln ohne dass allzu großzügig mit vertikalem Raum umgegangen werden muss.

„Je schmaler, desto besser“ kann man dennoch nicht als Merksatz nehmen, denn insbesondere im Webdesign entstehen bei zu schmalen Spalten neue Probleme. Die fehlende Silbentrennung im Browser macht dabei am meisten zu schaffen. Ohne diese brechen Zeilen nur nach ganzen Wörtern oder hinter Satzzeichen um. Insbesondere im Deutschen hat das fatale Auswirkungen, denn kaum eine Sprache kennt längere Wörter als unsere. Ohne Silbentrennung klaffen riesige Lücken, was zum einen nicht gut aussieht und zum anderen das gewonnene Plus an Lesbarkeit wieder zunichte macht. Folgt man dann noch dem Vorbild der Zeitungen und Print-Magazine, gießt also den Text in Blocksatz, ist er aus, der Traum vom Spaltensatz.

Positionierung von Elementen im Spaltensatz: Der Grundgedanke

Ein Vorteil des Spaltensatzes, der gerne einmal übersehen wird, ist der der freien Positionierung von Elementen. Der normale Text hat seine vorgegebenen Bahnen, in denen er fließt, das ist klar. Aber alle Bilder, Zitatblöcke oder Zwischenüberschriften kann man frei auf der Seite positionieren. Um das zu veranschaulichen, hier zwei Beispielsituationenen:

Um den Text inhaltlich zu begleiten, wurden zwei kleine Grafiken gewählt. Die Grafiken beziehen sich auf den gesamten Text und sind nicht einem bestimmten Absatz zugewiesen. Wie man sieht, gibt es genau zwei Möglichkeiten, die Bildchen zu positionieren: Mit float: left am linken und mit float: right am rechten Rand.

Hier haben wir deutlich mehr Möglichkeiten, um die Bilder zu positionieren. Unabhängig von den Ausmaßen begleitender Bilder oder Zitate, findet man im Spaltensatz immer die richtige Positionierung. Wenn die Grafik beispielsweise ähnlich breit ist, wie eine Spalte, wählt man oft exakt die Position zwischen zwei Spalten. Derartige Freiheiten möchte im Webdesign nun auch das Grid-Positioning-Modul ermöglichen.

Eine neue Einheit: gr

Dazu werden drei grundlegende Neuigkeiten eingeführt: float-offset, float: column und die Einheit gr. Weist man der schon bekannten float-Eigenschaft den Wert column zu, richtet sich das entsprechende Element an dem Raster des Elternelements aus.

Für die genauere Positionierung in diesem Raster wird nun mit der Einheit gr und der Eigenschaft float-offset hantiert. Die neue Einheit steht dabei immer für den Abstand zwischen zwei Grid-Linien. Dieser hängt von vielerlei Umständen ab. So kann es sein, dass 1gr als 30px berechnet wird, aber an der gleichen Stelle 2gr zu 90px werden; ganz einfach deshalb, weil die erste Grid-Linie zur zweiten einen Abstand von nur 30px hat, während die zweite Grid-Linie zur dritten einen 60px-großen Abstand hat.

Man sieht her sehr schön, dass auch der Einsatz von beispielsweise column-gap eine weitere Grid-Linie erzeugt. Wie sich die Angaben auswirken, wenn man die tatsächlich zur Verfügung stehenden Grid-Abstände übersteigt (im obiger Situation zum Beispiel: width: 6gr), wird in der Spezifikation nirgends beschrieben.

Um das Beispiel in Abb. 2 mit dem Grid-Modul umzusetzen, könnte man folgendes CSS verwenden:

div {
    column-count: 3;
}

img.eins {
    float: column;
    width: 1gr;
    float-offset: 0.5gr;
}

Wir erzeugen ein implizites Grid mit drei Spalten. Das Bild richten wir an diesen Spalten aus, weisen ihm die Breite einer Spalte zu und verschieben es eine halbe Grid-Breite nach rechts.

Explizites Erzeugen eines Grids

Bisher haben wir uns immer in einem sog. impliziten Grid bewegt, also eines, das zum Beispiel durch Multi-Column oder auch Tabellen entsteht. Mit dem Grid-Modul ist es aber auch möglich, explizit ein Grid zu bestimmen.

Dazu gibt es zwei Eigenschaften: grid-columns und grid-rows. Mit beiden verfährt man exakt gleich, der einzige Unterschied besteht darin, dass grid-columns für die vertikalen Grid-Linien (und damit für die eigentlichen Spalten) verantwortlich ist und grid-rows für die horizontalen. Beiden weist man Werte mit kompliziert erscheinender Syntax zu. Mit etwas Übersicht, wird das System aber schnell begriffen.

Der Grundgedanke ist, dass man die Breiten der Spalten bzw. die Höhen der Zeilen nacheinander abarbeitet. Je nachdem wie viele Spalten oder Zeilen man haben möchte, kann man entsprechend beliebig viele Werte auflisten. Das einfachste Beispiel wäre folgendes:

grid-columns: 200px 400px 100px;

Es werden hierbei drei Spalten mit den Breiten 200px, 400px und 100px angelegt. Das Ganze unabhägig von der zur Verfügung stehenden Breite. Möchte man etwas flexibler sein, kann man das Asterisk-Zeichen (*) verwenden. Im Grunde handelt es sich auch hierbei um eine neue Maßeinheit. Dies wird am besten wieder in einem Beispiel sichtbar:

#outer {
    width: 700px;
}

#inner {
    grid-columns: 200px 1* 2* 200px;
}

Es stehen 700px an Breite zur Verfügung. Die statisch definierten Spalten 1 und 4 nehmen jeweils 200px ein. Die restlichen 300px verteilen sich nun anteilhaft auf die Spalten 2 und 3, und zwar bekommt die zweite Spalte ein Drittel (100px) und die dritte Spalte zwei Drittel (200px) ab. Wer diese Themenserie aufmerksam verfolgt hat, dürfte sich an das Prinzip von Flexbox erinnert fühlen.

Eine weitere Notation bietet ebenfalls Flexibilität. Klammert man einen oder mehrere Wertenotationen, so werden diese wiederholt, bis kein Platz mehr ist. So erzeugt man beispielsweise mit grid-columns: (100px) so viele 100px-breite Spalten, wie nebeneinander Raum finden. In geregelte Bahnen lenken kann man das nun wieder, indem man in eckigen Klammern dahinter schreibt, wie oft sich das Gefüge wiederholen soll.

grid-columns: 100px (42px 23px)[3] 100px;

Fazit

Man kann nur hoffen. Darauf, dass wenigstens der Kern dieser Spezifikation, das heißt die Positionierung von Elementen, irgendwann einmal in den Browsern implementiert sein wird. Es sieht düster aus, zumal die Spec eine der abenteuerlichsten ist, die ich jemals gesehen habe. Bei einer derartigen Grundlage kann man es den Browser-Ingenieuren nicht verübeln, dass sie sich nicht an die Aufgabe trauen.

Ob sich die Einheit gr auch auf Flexbox-Gebilde beziehen lässt, wird leider nirgends verraten. Sollte dies der Fall sein, ist die Erzeugung expliziter Grids mit diesem Modul ohnehin weitestgehend obsolet. Mit Flexbox, Multi-Column und dem Template-Modul, das im nächsten Artikel erklärt wird, hat man dann genug Handwerkszeug und ist gewappnet für die Zukunft.

Kategorien
Design HTML/CSS

CSS3-Spaltenlayouts: Flexibler Textumbruch mit dem Multi-Column-Layout-Modul

Spalten-Layouts sind in Zeitungen und Print-Magazinen ein Standard, der sich im Webdesign bisher leider nur mit Biegen und Brechen simulieren ließ. Neue CSS3-Module versprechen Abhilfe. Teil 2 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Multi-Column-Layout-Modul.

Die Menschen hinter der Technik

Das im letzen Teil behandelte Flexbox-Modul wurde von Mozilla spezifiziert und vorangetrieben. Das Zweite gilt auch für Multi-Column, denn die Mozilla-Entwickler waren die ersten, die das Modul in Firefox implementierten. Hauptsächlich entwickelt wird es jedoch von Håkon Wium Lie, einem Norweger, der seit 1999 bei Opera arbeitet. Schon seit 1995 ist er für das W3C tätig und wirkt dort als einer der wenigen Autoren, die an allen wichtigen CSS-Spezifikationen mitarbeiten.


Håkon Wium Lie in einem You-Tube-Interview

Multi-Columns – mehrere Spalten

Die komplette Themenserie behandelt Mehrspalten-Layouts und dennoch heißt einzig und allein dieses Modul „Multi-Columns“, also übersetzt „mehrere Spalten“. Mit allen Modulen dieser Artikelserie kann man zwar mehrere Spalten erschaffen, doch nur Multi-Column konzentriert sich ausschließlich auf dieses Ziel und wirft alles, was was damit nicht in unmittelbarer Verbindung steht, über Bord. So kann man mit Flexbox bekanntlich nicht nur in der Horizontalen strukturieren, sondern gleichfalls in der Vertikalen, womit der Begriff der Mehrspaltenlayouts hier schon nicht mehr ganz richtig wäre. Multi-Column hingegen lässt ausschließlich Spalten zu.

Das Grundprinzip

Beim ersten Hinsehen könnte man meinen, dass Flexbox und Multi-Column ähnliche Resultate hervorbringen. Multi-Column liegt jedoch ein komplett anderes Prinzip zugrunde, wodurch sich dessen Einsatzgebiet auch klar verankern lässt. Das Modul beschränkt sich auf die Formatierung von Inhalten und nicht von ganzen Seitenstrukturen. Wer einen zusammenhängenden Text in ein zeitungsartiges Layout gießen möchte, ist bei Multi-Column an der richtigen Stelle. Die grobe äußere Struktur mit Sidebar und Co. lässt sich mit den anderen Modulen realisieren.

Automatischer Textfluss

Das Hauptmerkmal von Multi-Column besteht nämlich darin, dass der Inhalt von einer in die nächste Spalte fließen kann. Das Ganze automatisch und ohne semantische Einbuße, denn die entsprechenden Regeln werden ohne den Bedarf weiterer Elemente auf das Elternelement angewendet. Wer bisher seinen Text wie bei Zeitungen in drei Spalten unterteilen wollte, hatte nur die Möglichkeit, drei div-Blöcke anzulegen und den Inhalt darauf manuell und mit Augenmaß zu verteilen. Je nach Schrifteinstellungen konnte es sein, dass beim Betrachter dieser Text dann eben nicht ausgeglichen verteilt war, sondern im schlimmsten Fall die letzte Spalte länger als die zweite und diese länger als die erste war. Mit schöner Typografie und perfektem Zeitungslayout hatte das dann nicht mehr viel zu tun.

Zwei Herangehensweisen

  1. Mit Mutli-Column lassen sich Inhalte auf zwei unterschiedliche Arten in Spalten ausrichten. Geht man den ersten Weg und bestimmt eine feste Anzahl von Spalten, berechnet der Browser anhand aller Umgebungsvariablen die resultierende Breite der entstehenenden Spalten.
  2. Die zweite Möglichkeit besteht darin, die Breite im Vorhinein festzulegen und sich von der Browser-Engine die Anzahl der Spalten berechnen zu lassen. In beiden Fällen wird der Inhalt auf alle Spalten gleichmäßig verteilt.

Doch das alles lässt sich am besten anhand zweier Beispiele verdeutlichen. Folgendes HTML wird dabei jedes Mal vorausgesetzt:

<!-- HTML -->
<div id="content">
    <p>Sehr viel Lorem Ipsum</p>
    <p>Gegliedert durch einige Paragraphen</p>
</div>

Für die Bestimmung der Spaltenanzahl wird nun column-count verwendet.

/* CSS */
#content {
    width: 600px;
    column-count: 2;
    column-gap: 40px;
}

Für die Bestimmung der Spaltenbreite wird column-width verwendet.

/* CSS */
#content {
    width: 600px;
    column-width: 280px;
    column-gap: 40px;
}

Beide Notationen führen in diesem Fall zum selben Ergebnis.


Zwei Methoden – ein Ergebnis

Bei column-count wird der Inhalt auf die dahinter notierte Anzahl an Spalten aufgeteilt – immer! Im Gegensatz dazu gibt column-width etwas missverständlich nur die Mindestbreite der Spalten an. Wie breit sie am Ende wirklich sind, hängt auch von der Breite des gesamten Blockes ab. Der Grund für dieses Verhalten ist die Bruchrechnung, bei der man bekanntlich selten auf schöne ganzzahlige Ergebnisse kommt. Hat man einen 600px breiten Block und gibt als Spaltenbreite column-width: 250px an, ergäben sich daraus 2,4 Spalten. Das lässt sich natürlich nicht umsetzen, deshalb vernachlässigt der Browser einfach die Nachkommastellen und legt nur zwei Spalten à 300px an.

Wie man sieht, gibt es neben column-count und column-width noch die Möglichkeit, den Abstand zwischen den Spalten zu bestimmen. Des weiteren lässt sich mit column-rule auch eine Art Linie setzen. Vergleichbar sind diese beiden Eigenschaften mit padding und border im normalen Boxenmodell.

Column-rule teilt sich ebenso wie border in Breite, Linienart und Farbe auf.

#content {
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
/* entspricht: */
column-rule: 1px solid black;
}

Text umbrechen

Mit dem Spaltensatz haben wir eine weitere Ebene auf der man sich um Umbrüche kümmern muss, denn wie gesagt fließt der Inhalt von der einen Spalte in die jeweils benachbarte.

Umbrüche haben wir auch bei Print-Stylesheets, nämlich immer dann, wenn der Inhalt über eine Seite hinausgeht. Um die Umbrüche dort in die gewünschten Bahnen zu lenken, verwendet man page-break-before, page-break-inside und page-break-after. Bei Spaltenumbrüchen verfährt man ganz ähnlich.

h3 {
break-before: column;
break-after: avoid;
}

Diese Anweisung bewirkt, dass h3-Elemente immer in eine neue Spalten gesetzt werden und die vorherige umgebrochen wird. Nach der h3-Überschrift darf kein Spalten- und Zeilenumbruch erfolgen.

Vier neue Begriffe fürs Spalten-Handling

Zu den schon bekannten Schlüsselwörtern auto, always, avoid, left und right, kommen in CSS3 noch folgende vier Werte hinzu, um mit Spalten besser umgehen zu können.

  • page: Hat die gleichen Auswirkungen wie always: Vor/hinter dem Element gibt es immer einen Seitenumbruch.
  • column: Vor/hinter dem Element gibt es immer einen Spaltenumbruch.
  • avoid-page: Vor/hinter dem Element wird ein Seitenumbruch vermieden.
  • avoid-column: Vor/hinter dem Element wird ein Spaltenumbruch vermieden.

Wo hier schon der Bogen zu seitenbasierten Medien, das heißt Druck-Stylesheets geschlagen ist, sei an dieser Stelle darauf hingewiesen, dass sich der Multi-Column-Spaltensatz in CSS exakt so verhält, wie Sie das womöglich aus dem Desktop-Publishing kennen: Erstreckt sich ein Mutli-Column-Block über mehrere Seiten, so wird der Block auf jeder Seite automatisch umbrochen und läuft auf der nächsten Seite im Spaltenlayout weiter.

Was in Worten schwer zu erklären ist, lässt sich anhand der folgenden Abbildung sehr leicht verdeutlichen.

Überschriften über mehrere Spalten laufen lassen

Mit der Eigenschaft column-span und dem Schlüsselwort „all“ verhält sich ein Element so, dass es aus dem normalen Spaltensatz herausgenommen wird und sich quer über alle Spalten erstreckt. Nützlich ist das vor allem für stark gewichtete Überschriften oder Bilder.

h2 {
column-span: all;
}

Die Eigenschaft column-span gibt schon einen kleinen Einblick in die Möglichkeiten des Grid-Moduls, das im nächsten Teil dieser Artikelserie erklärt wird.

Tipps zum praktischen Einsatz

Damit alle Spalten einen wirklich ausgeglichenen Eindruck machen, reicht die rein technische Balance mit column-fill nicht aus. Viel wichtiger ist hierfür die Einhaltung einer wichtigen typografischen Regel: der vertikale Rhythmus. Da man für eine Abhandlung zu diesem Thema allein einen ganzen Artikel füllen könnte, sei hier nur das Grundprinzip erklärt.

Den vertikalen Rhythmus kann man sich als die imaginären Linien, auf denen die Schrift läuft, vorstellen. Die Zeilenhöhe bestimmt den Abstand zwischen den Linien, der immer und überall gleich groß sein sollte. Lässt man unter einem Absatz einen Abstand, sollte dieser genau der Zeilenhöhe entsprechen, damit der nachfolgende Absatz wieder im vertikalen Raster verläuft. Dadurch ist es auch wichtig, dass Überschriften oder Bilder stets ein Vielfaches der Standard-Zeilenhöhe einnehmen.

Im Web war die Regel des vertikalen Rhythmus bisher eher nice to know als unbedingt notwendig. Wirklich wichtig ist die Regel erst im Spaltensatz, denn durch die nebeneinander verlaufenden Zeilen erkennt der Betrachter viel schneller, wenn etwas aus dem Ruder läuft.

Ein weiterer Punkt, an dem man beim Einsatz von Multi-Column Vorsicht walten lassen sollte, ist zugleich eines der umstrittensten Themen in Sachen User Experience. Das Stichwort „Page Fold“ lässt bei einigen Webdesignern die Nackenhaare zu Berge stehen. Das Prinzip des Page Fold besagt, dass es einen Bereich der Website gibt, den jeder Besucher ohne scrollen zu müssen überblicken kann. Viele folgern daraus, dass alles wichtige oberhalb dieser imaginären Grenze platziert sein muss. Wieder andere nehmen eine Antihaltung ein und meinen, dass es einen derartigen Bereich überhaupt nicht gibt oder dass er zumindest keinerlei Relevanz hätte. Meiner Meinung nach – und vor allem in Verbindung mit dem Spaltensatz – sind beide Standpunkte falsch. Beim Spaltensatz mit Multi-Column sollte man darauf achten, dass alle Spalten nur so lang sind, dass sie für jeden Besucher ohne langes Scrollen konsumierbar sind. Natürlich kann man nicht genau sagen, wie hoch die Spalten maximal sein dürfen, doch ein Gefühl dafür sollte man haben.

Browserunterstützung

Wie auch schon Flexbox im letzten Artikel, ist dieses Modul sehr populär und dementsprechend breit ist das Feld der Implementierungen. So haben Gecko und Webkit die Grundfunktionen schon eingebaut und man kann die meisten Eigenschaften mit den jeweiligen Präfixen (-moz- und -webkit-) verwenden. Tatsächlich kann man das Modul also schon heute einsetzen; es sprechen keine Argumente dagegen, denn die Fallback-Methode für mehrspaltige Blöcke sind normale Textblöcke. Die Situation verhält sich also wie mit der Eigenschaft border-radius: alle, die mit älteren Browsern unterwegs sind, merken nicht einmal, dass ihnen etwas fehlt.

Wenn man also seinen Cutting-Edge-Besuchern einen Mehrwert bieten möchte, kann man Multi-Column einsetzen, ohne irgend jemandem weh zu tun. Hält man sich an ein paar typografische Verhaltensregeln und bleibt auf dem Laufenden, was die zukünftige Entwicklung des Moduls angeht, kann man damit sehr ansprechende Designs gestalten und nebenbei sehr viel Spaß haben.

Im nächsten Teil dieser Serie lesen Sie:

Die Möglichkeiten des Grid-Modul

(mm),

Kategorien
Design HTML/CSS

CSS-Spalten-Layouts: Das Flexible Box Layout-Modul

Wirkliche Spalten-Layouts mit automatischem Textumbruch, wie bei Print-Magazinen oder gedruckten Tageszeitungen, sind trotz float mit den bisherigen CSS-Standards nicht möglich. Mit CSS 3 soll das anders werden. Teils 1 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Flexible Box Layout.

Flexible Box Layout – oder einfach Flexbox – ist ein Modul, das vorwiegend von Mozilla spezifiziert wird. Das lässt sich allein daran erkennen, dass der Ansatz stark dem Prinzip von XML User Interface Language (XUL) ähnelt. XUL wurde von Mozilla entwickelt, um grafische UI-Elemente, wie kleine Widgets oder ganze Fenster in Form bringen zu können, ohne ein konkretes Design festlegen zu müssen. Das hört sich im ersten Moment seltsam an, doch tatsächlich steht bei der Benutzung von XUL die Trennung von Layout und Design im Fokus. Mit dieser Trennung kann der Entwickler dem Benutzer ermöglichen, seine Software ganz einfach mit eigenen Themes zu versehen. Für das Rendering der XUL-Oberflächen wird die Mozilla Gecko-Engine verwendet. Bekanntlich ist Gecko auch die Rendering-Engine des Firefox für HTML/CSS und JavaScript. Da liegt die Portierung des XUL-Prinzips auf CSS natürlich auf der Hand.

XUL stand Pate für die Flexbox.

Die Vorgeschichte

Das tiefgehende Verständnis der Herkunft von Flexbox ist insofern wichtig, als das es hilft, zu verstehen, wofür das Modul gedacht ist und vor allem wofür es nicht gedacht ist. In der Spezifikation zur Flexbox selbst wird das Modul als Ergänzung zu den bisherigen Boxmodellen beschrieben. Es soll das herkömmliche Boxmodell nicht ablösen, sondern ein neues Einsatzgebiet abdecken. Die Herkunft aus der Widget-Programmierung deutet darüberhinaus an, wo dieses Einsatzgebiet genau liegt. Obwohl man mit dem Flexbox-Modul auch sehr bequem ganze Seiten-Layouts verwirklichen könnte, kommen dessen Stärken eher bei den kleineren UI-Elementen, insbesondere bei Formularen zum Tragen.

Bevor wir gleich zum interessanten Teil kommen, sei hier noch ausdrücklich darauf hingewiesen, dass es sich bei der bisherigen Spezifikation um eine frühe Version, einen so genannten Working Draft, handelt. Das Grundprinzip wird sich höchstwahrscheinlich nicht mehr ändern, jedoch könnte es passieren, dass einige Eigenschaften einen anderen, präziseren Namen bekommen oder manche Details ausgebessert werden.

Das Grundprinzip von Flexbox

Damit wir uns auf das Wesentliche, also das CSS konzentrieren können, werden alle folgenden Regeln auf diese HTML-Struktur bezogen.

<div id="wrapper">
	<div id="eins"></div>
	<div id="zwei"></div>
	<div id="drei"></div>
</div>

Und damit man überhaupt etwas sieht, wird folgendes CSS als Grund-Styling vorausgesetzt. Im Laufe des Artikels werden diverse Auszeichnungen, die man hier sieht, überschrieben werden.

#wrapper {
	width: 600px;
	outline: 1px solid silver;
}

#eins,
#zwei,
#drei {
	width: 140px;
	height: 300px;
}

#eins {
	background: red;
}

#zwei {
	background: green;
}

#drei {
	background: blue;
}

Das bisherige Boxmodell kennt – wir unterschlagen hier der Einfachheit halber alle komplexeren Formen – drei Arten von Elementen: blocks, inlines und inline-blocks. Blocks ordnen sich untereinander an und sind mit margin und padding stylebar. Inlines verlaufen nebeneinander und brechen nur bei zu wenig horizontalem Raum um. Inline-Blocks sind eine Mischung aus beidem. Flexbox fügt dem bisherigen Arsenal an Layout-Typen einen weiteren hinzu. Mit display: box; macht man ein Element zu einer Box. Diese Box verhält sich nach außen wie ein Block-Element. Spannender ist aber, was mit den Kind-Elementen der Box geschieht.

#wrapper { display: box; }

Dieses CSS führt zu folgendem Erscheinungsbild:

Wie man sieht, werden die drei Blöcke in der Horizontalen nebeneinander platziert. Bis jetzt ist hier noch nichts flexibel, doch von flexibel steht ja auch noch nichts in unserem Stylesheet. Erst mit dem Attribut box-flex, das wir auf eines, mehrere oder alle Kind-Elemente anwenden, kommt Elastizität ins Spiel. Anhand zweier Beispiele wird die Funktionsweise klar:

Ein Element ist flexibel, die anderen beiden sind fest

#wrapper { display: box; }
#eins { box-flex: 1; }

Zwei Elemente sind flexibel, das andere ist fest
#wrapper { display: box; }
#eins { box-flex: 1; }
#zwei { box-flex: 1; }

Box-flex wirkt wie eine Spannfeder, welche das Element über die gesamte Fläche ausdehnt (dazu später mehr). Hat nur einer der drei Blöcke eine solche „Feder“, nimmt dieser den gesamten übrigen Platz ein. Gibt es mehrere dieser Blöcke mit Federn, müssen diese sich den Platz teilen. Die Aufteilung berechnet sich anteilhaft nach dem jeweiligen Box-Flex-Index. Je höher der Wert ist, den man der box-flex-Eigenschaft eines Elements zuweist, desto mehr Raum nimmt das Element in Anspruch – desto stärker ist die Spannfeder, um bei diesem Bild zu bleiben.

#wrapper { display: box; }
#eins { box-flex: 1; }
#zwei { box-flex: 7; }

Hier nimmt das zweite Element genau sieben Achtel des restlichen Raums zusätzlich ein, Block Eins nur ein Achtel. Die genaue Verteilung berechnet sich nämlich verhältnismäßig zwischen den box-flex-Werten aller Kind-Elemente einer Box. Hierin liegt der große Unterschied zu einer Bestimmung von width mit Prozentwerten. Die Prozentwerte sind zwar auch relativ, beziehen sich jedoch nur auf die Breite des Elternelements. Andere Blöcke, die neben diesem Element platziert sind, werden nicht beachtet. Box-Flex hingegen bezieht sich auf den verfügbaren Platz und alle anderen Blöcke, die sich mit um den Kuchen ranken.

Und wieder zurück zu dem Bild mit den Spannfedern: Eine starke Feder führt nicht unmittelbar zu einer stärkeren Ausdehnung, es müssen immer auch die Spannfedern aller anderen Elemente betrachtet werden.

Das ganze Spiel ist sowohl in vertikaler als auch horizontaler Ausrichtung möglich. Der Eigenschaft box-orient kann man die vier Werte horizontal, vertical, inline-axis und block-axis zuweisen.

  • horizontal: Die Elemente werden nebeneinander von links nach rechts angezeigt.
  • vertical: Die Elemente werden untereinander von oben nach unten angezeigt.
  • inline-axis: Hängt von dem Attribut writing-mode ab. Normalerweise provoziert inline-axis genau das gleiche Verhalten wie horizontal
  • block-axis: Hängt von dem Attribut writing-mode ab. Normalerweise provoziert block-axis genau das gleiche Verhalten wie vertical

Die Optionen inline-axis und block-axis finden in der Realität wahrscheinlich eher selten ein Anwendungsgebiet, auf dem sie ihre Stärke voll ausspielen können.

Trotzdem sollte man wissen, was diese Schlüsselwörter bewirken: Das Attribut writing-mode, beziehungsweise dessen horizontale Komponente direction und dessen vertikale Komponente block-progression, bestimmt die Leserichtung. So kann man etwa für den arabischen Raum einfach ein writing-mode: tb-rl notieren, und schon richten sich die Zeichen in der Horizontalen von rechts nach links aus.

Per writing-mode lassen sich Zeichen von rechts nach links anordnen.

Inline-Axis und Block-Axis folgen nun auch dieser Notation. Zwar werden die Stärken wie gesagt nur in den seltensten Fällen zum Tragen kommen, dennoch kann man die beiden Optionen stets den anderen beiden vorziehen. Man macht sich dadurch nichts kaputt, ist aber später deutlich flexibler, wenn sich der Chef entscheidet, nun doch nach Nahost oder Asien zu expandieren.

Richtung umkehren

Doch damit nicht genug. Will man jetzt noch zusätzlich die Richtung, in der die Elemente ausgerichtet sind, umkehren, hilft box-direction: reverse;. Die Eigenschaft könnte dann interessant werden, wenn man aufgrund der Semantik im Markup etwas anders gewichtet, als man es in der grafischen Ausgabe darstellen möchte. Wer die Ausrichtung nicht gleich komplett umkehren, sondern etwas präziser vorgehen möchte, kann sich box-ordinal-group zuhilfe nehmen. Weist man es mehreren Kind-Elementen der Box mit einer beliebigen Ganzzahl zu, wird das Element mit der niedrigsten Zahl zuvorderst angezeigt, das mit der höchsten als Letztes. Nach aufsteigenden Zahlen also der Ausrichtung entlang.

#wrapper { display: box; }
#eins { box-flex: 1; box-ordinal-group: 2; }
#zwei { box-flex: 1; box-ordinal-group: 3; }
#drei { box-flex: 1; box-ordinal-group: 1; }

Weist man einem Element diese Eigenschaft nicht zu, ist die box-ordinal-group automatisch auf 1 gesetzt. Das ist meiner Meinung nach ein kritischer Punkt in der Spezifikation, denn wenn man ein Element an den Anfang der Reihe setzen möchte, sollte das möglich sein, indem man nur dieses eine Element verändert. Da aber „1“ die Standardeinstellung und zugleich der höchstmögliche Index ist, gestaltet sich das unmöglich. Es wäre noch möglich, einen Index von „0“ zuzuweisen, doch das führt derzeit zu katastrophalen Ergebnissen bei den verschiedenen Browsern und in keinem Fall zu dem gewünschten Ergebnis. Ich denke, an diesem Punkt kann man noch einige Änderungen in der Spezifikation erwarten.

Hilfe, ich habe zu wenig oder zu viel Platz übrig!

Dass man entweder zu wenig oder zu viel Platz in seiner Flexbox hat, kann nur dann passieren, wenn keinem der Elemente box-flex zugewiesen wurde. Trotzdem ist es ganz hilfreich zu wissen, was mit dem Platz passiert und wie man ihn handhaben kann.

Mit zu viel Platz geht man genau gleich um, wie sonst auch. Mit overflow kann man bestimmen, ob man die Elemente einfach über die Box hinauslaufen lässt, ob man sie versteckt oder ihnen eine Scrollbar gewährt.

Anders sieht das bei zu wenig Platz aus. Hierzu gibt es zwei eigene Eigenschaften. Box-pack regelt den Raum in der Horizontalen, box-align in der Vertikalen.

box-pack für die Horizontale
start
Alle Elemente richten sich am Anfang der Eltern-Box aus. Der verbleibende Platz wird am Ende platziert.
end
Genau das gegenteilige Verhalten zu start.
justify
Zwischen jedes Element wird gleich viel Platz geschoben.
center
Die Elemente rücken zusammen und der restliche Platz wird links und rechts der Gruppe verteilt.
box-align für die Vertikale
start
Alle Elemente richten sich am Anfang der Eltern-Box aus. Der verbleibende Platz wird am Ende platziert.
end
Genau das gegenteilige Verhalten zu start.
center
Die Elemente rücken zusammen und der restliche Platz wird oberhalb und unterhalb der Gruppe verteilt.
baseline
Die Elemente richten sich nach ihrer typografischen Grundlinie aus.
stretch
Der restliche Raum wird den Höhen der Elemente gleichmäßig hinzugerechnet.

Browser-Support: Es sieht gut aus

Da die Spezifikation von Mozilla angetrieben wird und die Gecko-Engine derartige Layouts im Grunde schon seit Anfang ihres Bestehens interpretieren kann, ist es nicht verwunderlich, dass der Firefox ab Version 3.0.x das Modul größtenteils unterstützt. Auch die neueren Webkit-Browser lassen einen praktischen Einsatz des Moduls zu. Mit Firefox, Safari und Chrome hat man also schon einen Großteil des Browser-Spektrums abgedeckt. Und wenn wir einmal ehrlich sind, hätte auch niemand erwartet, dass der Internet Explorer in seiner jetzigen Form jemals eine derart fortschrittliche Technologie implementiert hätte.

Zwar sind die Implementationen in Gecko und Webkit noch experimentell, das heißt es werden vor jeder Eigenschaft die Präfixe -moz- und -webkit- gefordert, dennoch kann man es durchaus schon wagen, mit dem Modul das ein oder andere private Projekt zu gestalten.

(mm),

Kategorien
Design HTML/CSS

CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten

Nachdem die schreckliche Phase der Tabellenlayouts überwunden war, setzten sich glücklicherweise CSS-Layouts durch. Das war zweifelsohne ein Fortschritt, doch rückblickend darf man mit den neuen Techniken auch nicht hundertprozentig zufrieden sein. Spalten realisiert man auch heute noch gezwungenermaßen mit „float“, wobei dessen eigentlicher Zweck ein ganz anderer ist. Deshalb sind mit float formatierte Blöcke, die man wie Spalten behandelt, auch schlechter handhabbar. Spaltenlayouts sind in den bisherigen CSS-Standards schlicht nicht vorgesehen. Mit CSS3 soll sich das ändern. Es liegen einige vielversprechende Konzepte vor, die sogar teilweise schon implementiert sind.

Ein Rückblick: Float

Wie gesagt, sind Floats derzeit das weitgehend einzige Mittel, Spaltenlayouts zu erstellen. Weist man einem Block beispielsweise float: left zu, richtet sich dieser am linken Rand aus und lässt die restlichen Elemente rechts an ihm vorbeifließen. Möchte man ein Layout mit drei Spalten realisieren, weist man allen drei Blöcken diese Formatierung zu. Wenn alles glatt geht, sollten diese dann als Spalten nebeneinander stehen. Ein schwerwiegendes Problem taucht zum Beispiel dann auf, wenn man die Spalten in ihrer Höhe begrenzen und darunter weitere Spalten in anderen Proportionen anlegen möchte. Hier hilft nur ein kleiner Hack. Bei der so genannten Clearfix-Technik wird zwischen die entsprechenden Blöcke ein Element, dem die Eigenschaft clear zugewiesen wird, gelegt. Dies führt dazu, dass die oberen Spalten abgebrochen werden und wieder klare Verhältnisse geschaffen sind. Damit man dabei nicht in die Semantik des HTML-Dokuments eingreifen muss, empfiehlt sich die Verwendung des Pseudo-Elements :after.

Eine Technik für den Übergang: Inline-Blocks

Mit display: inline-block verwandelt man ein Element in einen Inline-Block. Dieser vereint nun Eigenschaften von Inline- und Block-Elementen. So lassen sich alle CSS-Eigenschaften, die normalerweise nur Blocks vorbehalten wären, auf dieses Element anwenden, während es sich im Gesamtkontext trotzdem wie ein Inline-Element verhält. Ein grober Merksatz wäre: außen Inline, innen Block. So kann man Inline-Blocks Innen- und Außenabstände, sowie Höhe und Breite zuweisen. Gleichzeitig richten sich mehrere Inline-Blocks in einer Reihe aus – sofern genügend Platz ist. Da sollte man meinen, das mache sie zum Idealen Werkzeug für Mehrspaltenlayouts. Doch es gibt einen Haken. Inline-Blocks verhalten sich im Zusammenspiel mit anderen Elementen wie Inlines. Das wird vor allem dann zu einem Problem, wenn man seinen Quelltext ordentlich formatiert. Denn bekanntlich beeinflusst White-Space – das heißt Leerzeichen und Zeilenumbrüche – die letztliche Textausgabe. Zeilenumbrüche im Quelltext werden zu Leerzeichen in der Ausgabe und mehrere Leerzeichen im Code werden im endgültigen Dokument doch nur zu einem einzigen zusammengefasst. Schreibt man seine HTML-Tags also fein untereinander, das heißt getrennt durch einen Zeilenumbruch, rutscht in der gerenderten Webseite zwischen jeden Block ein kleiner Abstand – ein Leerzeichen. Das macht die Technik ähnlich unhandlich wie Floats. Zwar gäbe es diverse recht einfache Hacks, um dem Problem aus dem Weg zu gehen, doch letztlich bleibt die Aussage: Inline-Blocks sind nicht für Mehrspaltenlayouts gedacht.

Das Template Layout-Modul

ASCII-Art, das sind „Gemälde“ aus Buchstaben, Zahlen und Sonderzeichen. Mit dem CSS3 Template Layout-Modul kann man sich in diesem Bereich jetzt auch als Pixelschubser profilieren. Das Modul erweitert die beiden schon vorhandenen Eigenschaften display und position. Anstatt die Display-Eigenschaft beispielsweise mit den Werten block, inline-block oder inline zu belegen, kommen hier die eingangs erwähnten ASCII-Künste zum Einsatz. An einem Beispiel soll die Funktionsweise klar werden.

#outer {
display: "ab"
         "cd";
}

#inner1 {
position: a;
}

#inner2 {
position: b;
}

#inner3 {
position: c;
}

#inner4 {
position: d;
}

Der Display-Eigenschaft weist man eine Art Skizze des Templates zu. Mit der Position (position) der inneren Elemente richtet man diese nun an dem vordefinierten Raster aus. Das Einsatzgebiet des Moduls liegt bei herkömmlichen Grids, wie man sie bisher noch von Frameworks wie YAML oder 960.gs erstellen lassen kann. Sollte sich dieses Modul in Zukunft einmal durchgesetzt haben und in allen Browsern implementiert sein, wird man hoffentlich nicht mehr auf Grid-Frameworks zurückgreifen müssen.

Das Multi-Column Layout-Modul

Das Multi-Column Layout-Modul ist das einzige der hier vorgestellten CSS3-Module, dessen Spezifikation bereits als so genannte Candidate Recommendation vorliegt. Das Modul wird am engagiertesten entwickelt, was vor allem daran liegen mag, dass es den Wünschen und Bedürfnissen heutiger Webdesigner am ehesten entspricht. Das System ist intuitiv und entsprechend einfach zu erklären. Im Grunde lässt sich die Funktionsweise mithilfe der Erklärung folgender vier CSS-Eigenschaften zusammenfassen:

column-count
Die Anzahl der Spalten, in die ein Element unterteilt wird.
column-width
Die Breite der Spalten, in die ein Element unterteilt wird.
column-gap
Der Abstand zwischen den jeweiligen Spalten eines Elements.
column-rule
Die Äquivalenz zu border im normalen Box-Modell.

Um das Prinzip zu verstehen, genügt es aber, sich auf column-count und column-width zu beschränken. Weist man einem Element nur die Eigenschaft column-count zu, wird der Block, der normalerweise das Element darstellt, in die entsprechende Anzahl an Spalten unterteilt. Die Breite der Spalten hängt von der Breite des Blocks ab. Weist man einem Element nur die Eigenschaft column-width zu, wird der Block in so viele Spalten mit dieser zugewiesenen Spaltenbreite unterteilt, wie auf der Breite des Blocks nebeneinander Platz finden. Dabei besteht der große Unterschied zu Float-Spalten darin, dass der Inhalt sich gleichmäßig auf alle Spalten verteilt. Man kann sich auch vorstellen, dass der Block zunächst auf die Breite, welche man mit column-width angegeben hat, zusammengepresst wird. Dadurch wächst der Block in der Höhe. Um nun den freigewordenen horizontalen Raum wieder aufzufüllen, wird der Block in der Höhe entsprechend oft geschnitten und die Teile dann neu ausgerichtet.

Das Modul hat deshalb ein sehr eingeschränktes, aber auch klar abgrenzbares Einsatzgebiet, und zwar die Unterteilung von Textblöcken. Mit Multi-Columns können endlich zeitungs- und magazinartige Spaltenlayouts ohne semantische Einbuße oder JavaScript-Hacks umgesetzt werden.

Das Flexible Box Layout-Modul

Dieses Modul erfährt in der Blogosphäre noch am meisten Aufmerksamkeit. Wie das Template-Modul klinkt sich Flexbox in die Display-Eigenschaft eines Elements ein. Mit display: box; wird der Flexible Box-Modus initialisiert. Das Grundprinzip von Flexbox ist recht schnell erklärt. In der Spezifikation selbst wird das Modul als ein optimiertes Box-Modell, das zu den bestehenden Modellen hinzukommt, beschrieben. Wie der Name schon verrät, geht es um flexible Boxen, die sich entweder vertikal oder horizontal ausdehnen oder sich den Platz mit anderen flexiblen Elementen teilen. Nachdem man einem Element den display-Wert box zugewiesen hat, kann man mit box-orient festlegen, ob man die Kind-Elemente vertikal oder horizontal ausrichten möchte und mit box-align wird spezifiziert, wie die Kind-Elemente mit übrig gebliebenem Platz umgehen. Den Kind-Elementen selbst weist man dann noch die Eigenschaft box-flex und einen Zahlenwert zu. Je höher der angegebene Wert, desto mehr Platz bekommt das Element später ab; vorausgesetzt, box-align steht auf stretch.

.outer {
    display: box;
    box-orient: horizontal;
    box-align: stretch;
}

.inner-strong {
    box-flex: 3;
}

.inner-weak {
    box-flex: 1;
}

Das Grid-Modul

Wie auch die Templates, ist das Grid-Modul für – der Name sagt es – Grids gedacht. Das Grid-Modul steht nicht alleine, sondern bezieht sich auch auf andere Layout-Module, wie Tabellen oder Multi-Column-Elemente, denn diese erzeugen implizit schon ein Grid. Ist dies noch nicht gegeben, kann man mit columns ein Grid mit einer festgelegten Anzahl an Spalten definieren. Der Dreh- und Angelpunkt des Moduls sind die Eigenschaften grid-columns und grid-rows, die in einer kompliziert erscheinenden Syntax belegt werden können. Am besten erklärt sich das System anhand eines Beispiels.

.outer {
    grid-columns: 50% * * 200px;
}

Hierbei wird ein horizontales Grid mit vier Spalten erzeugt. Die erste Spalte nimmt die Hälfte des verfügbaren Platzes, die letzte genau 200px ein. Die anderen beiden Spalten teilen sich den restlichen Platz. Die Elemente, die innerhalb dieses Grids laufen, können nun entweder ganz normal behandelt werden, oder aber man weist ihnen eine spezielle Position im Grid und eine spezielle Breite oder Höhe, bezogen auf das Grid, zu.

.inner {
    width: 1gr;
    float: top left column;
}

Die neue Einheit gr steht dabei immer für eine Spalten- oder Zeilenbreite/-höhe.

Nachwort

Alle diese CSS-Techniken hören sich vielversprechend an. Da sich die Einsatzgebiete und vor allem -möglichkeiten von Templates, Multi-Column, Flexbox und Grids teilweise zu überschneiden scheinen, bleibt zu hoffen, dass das W3C in den Spezifikationen noch klarere Grenzen zieht, in welchem Fall sich welche Methode am besten eignet. Dieser Artikel soll einen ersten Überblick über die neuen Möglichkeiten geben. Am meisten Hoffnung machen auf jeden Fall das Multi-Column-Layout-Modul und das Flexible-Box-Layout-Modul, zumal diese schon in einigen modernen Browsern implementiert sind. Hoffen wir, dass die Zeiten der alten Float-Spalten bald vorbei sein werden!

(mm), ™

Kategorien
Icons & Fonts

Typographische Verrohung

Früher war der Textsatz den Profis vorbehalten. Gelernte Setzer kannten jeden Handgriff um Texte korrekt zu Papier zu bringen. Korrekt im Sinne von „der Lehrmeinung entsprechend“. In den Anfangszeiten des Print waren die Setzer obendrein noch die Verfasser dieser Lehren selbst, ähnlich wie heute viele Webdesigner an HTML-Spezifikationen mitarbeiten. Erkenntnisse aus der Ästhetik gingen zwar auch bedingt in die Typografie mit ein, hauptsächlich passten sich die alten Lehren aber den äußeren Umständen wie der Beschaffenheit des Papiers, die Eigenschaften der Bleilettern oder der Qualität der Tinte an. Über die Jahre der Erkenntnisgewinnung hinweg wandelten sich diese typografischen Regeln, da sich auch die Umstände änderten. Die Eigenschaften des Mediums hatten direkten Einfluss auf die Lehrweisen des Setzens.

Heute leben wir in einer Welt, in der sich das Medium für Textübertragung innerhalb einer sehr kurzen Zeitspanne enorm verändert hat. Anstatt auf Papier lesen wir Texte vermehrt am Bildschirm – eine drastische Veränderung der Umstände. Sind die Typografie-Regeln, die wir als Webdesigner heute noch im Web einsetzen, allein deshalb veraltet? Wir übertragen Satztechniken aus der Zeit eines völlig anderen Mediums in die Zeit des Web, müsste da nicht einiges an Qualität auf der Strecke bleiben?

Muss sich der Inhalt anpassen, wenn sich das Medium ändert?

Noch viel schwerer als die technischen Veränderungen wiegen die gesellschaftlichen. Mit der Erfindung der Schreibmaschine, und vor allem mit dem Beginn der billigen Produktion dieser, konnten plötzliche alle Menschen Texte verfassen. Die von den professionellen Setzern mühsam erarbeiteten Regeln und Konventionen wurden mit einem Schlag überrollt von der Unbefangenheit des Laien, der sich an seine Schreibmaschine setzt und nach Gutdünken auf irgendwelche Tasten drückt. Dass dabei schon bei der Konzeption der Maschinen von vornherein auf wichtige typografische Zeichen verzichtet wurde, war zum einen zwar technisch bedingt, zum anderen aber der notwendigen Einfachheit bei der Bedienung geschuldet. Anstatt zwei verschiedener Anführungszeichen gab es auf einmal nur noch eines. Eine sinnvolle Vereinfachung.

Die Etablierung des Mitmachweb war ein weiterer Schritt hin zur „typografischen Verrohung“. Mit den Texten aus seiner Schreibmaschine erreichte der Schreiber, wenn er nicht gerade Gefängnisinsasse in Stuttgart Stammheim war, einen Kreis von maximal 100 Lesern. Mit seiner Computertastatur dagegen erreicht man womöglich mehrere tausende Leser. Anstatt wie bisher nur typografisch „falsche“ Texte zu schreiben, kann man sie heute auch überall lesen.

Prägen nicht die User das Medium?

Die einfachen Hochkommata, die fehlende Differenzierung zwischen Divis und Halbgeviertstrich oder das falsche Bild eines Apostrophs haben sich in unserer heutigen Medienwelt etabliert. Das bemerkt jeder, der für zwei Stunden im Internet surft. Denn nicht nur einfache (Micro-)Blogger oder Forenuser missachten die alten Regeln, auch große Nachrichtenportale setzen selten korrekt. Ist diese Entwicklung tatsächlich so schlimm? Oder sind es nicht die Nutzer, die ein Medium entwerfen?

Das wohlbekannte @-Zeichen kann man als bisher größte typografische Errungenschaft des Computerzeitalters ansehen. Ursprünglich nur als Trenner zwischen Usernamen und Host bei diversen Adressen gedacht, waren es die Nutzer, die dem Zeichen dessen heutige Bedeutung verliehen und damit zeigten, dass sie geschickt genug sind, sich ihre eigenen Konventionen zu schaffen.

Und fällt das Argument der besseren Lesbarkeit nicht sowieso raus?

Mittlerweile wissen wir, dass der Unterschied in der Lesbarkeit zwischen Serifen- und serifenlosen Schriften nicht daher rührt, dass die kleinen Füßchen Leitlinien für das Auge zeichnen, sondern dass es schlicht auf die Gewohnheit der Zeichen ankommt. Ebenso weiß man, dass konstruierte Schriftarten, die z.B. auf Biegen & Brechen irgendwelche Schnitte und Verhältnisse einhalten, nicht lesbarer erscheinen als freiere. Wenn also die Lesbarkeit allein keinen Ausschlag gibt, sondern es lediglich um die Gewohnheit beim Lesen geht, können allerhöchstens noch ästhetische Aspekte ein Argument pro „alte“ typografische Regeln sein. Aber selbst viele einflussreiche Grafikdesigner behaupten, Ästhetik müsse sich stets nach den Umständen und dem Zweck richten. So habe Typografie laut Stanley Morison „nur durch Zufall einen ästhetischen Charakter“.

Müssen Webdesigner also umdenken? Sollte man bewusst auf korrekte – d.h. alte – Typografie verzichten? Ich selbst weiß auf diese Fragen keine eindeutige Antwort, ich weiß jedoch, dass man sich diese Fragen stellen sollte und nicht einfach auf die alte Art und Weise weitermachen kann.

(sl)