Bert
Bos, Style Activity LeiterCopyright © 1994–2021 W3C® Privacy policy
Erstellt am 27 März 2011;
Zuletzt geupdatet Mi 06 Jan 2021 05:40:49 UTC
Dies ist eine Übersetzung. Es ist möglich, daß sie Fehler enthält oder veraltet ist im Vergleich zur englischen Version. Übersetzer: Axel Friedrich (Deutscher Medien Verlag GmbH - IndustryStock.com)
Besuchen Sie auch den Index für eine Übersicht aller Tips.
Typographen nennen “dot leaders” die Zeilen mit Punkten, welche die einzelnen Reihen einer Tabelle miteinander verbinden - wie zum Beispiel hier:
Üblicherweise werden dafür Punkte verwendet. Aber Sie können auch andere Symbole, wie z.B. Striche oder Linien mit Pfeilen verwenden. Diese Zeichen helfen dabei, Items über Flächen beliebiger Größe miteinander zu verbinden.
CSS sollte schon bald echte Verbindungselemente zur Verfügung stellen, welche vor - oder nach einem Element gesetzt werden können um Freiflächen zum nächsten Element zu überbrücken. Bis dahin schauen Sie sich bitte jedoch den folgenden Trick an, welcher das gewünschte Ergebnis mit CSS Level 2 realisiert.
Die folgende Methode ist nicht der einzige und erste Trick um Zwischenelemente mit CSS zu erzeugen. Den folgenden Trick verdanken wir Tantek Çelik. Sein Bella Mia Menu wurde erstellt während, wie Sie sich vielleicht schon denken können, eines Dinners in einem Restaurant namens Bella Mia, damals im Jahre 2000. Andere Beispiele sind z.B. von Micah Sittig und Brett Merkey.
Das Menu des Restaurants wird als eine Liste erstellt:
<ul class=leaders> <li><span>Salmon Ravioli</span> <span>7.95</span> <li><span>Frittierte Calamari</span> <span>8.95</span> <li><span>Almond Garnelen Cocktail</span> <span>7.95</span> <li><span>Bruschetta</span> <span>5.25</span> <li><span>Margherita Pizza</span> <span>10.95</span> </ul>
Beim mark-up selbst gibt es keine Besonderheiten. Ich habe eine Liste gewählt weil das Menu eines Restaurants semantisch gesehen eine Liste darstellt.. Die zwei Spalten des Menus müssen in verschiedenen Elementen eingebettet sein. In unserem Fall wurde beidemale ein SPAN Element gewählt.
Wir erstellen die Verbindungselemente mit einem dem LI Element hinzugefügtem ‘::before’ Pseudo-Element. Das Pseudo-Element füllt die gesamte Breite eines Listen-Items mit Punkten und die SPAN's werden am Anfang hinzugefügt. Ein weißer Hintergrund bei den SPAN's verbirgt die Punkte dahinter und ein ‘overflow: hidden’ beim UL sorgt dafür daß die Punkte nicht über die Liste hinaus reichen:
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white}
Ich nutzte hier willkürlich 80 Punkte, was genug ist um eine Länge von 38em zu überbrücken, was auch die Breite der Liste darstellt. Dem ‘::before’ wurde eine Breite von null gegeben, somit nutzt es effektiv keinen Platz und der Inhalt wird genau vor den Punkten enden.
padding: 0’ und ‘list-style: none’ sind nur dazu da um den Standard-Style der Liste zu unterdrücken: ich habe für das Menu Markup eine Liste gewählt, aber ich möchte keine Punkte vor den Elementen.
Ein Vorteil davon die Punkte den Listen Elementen hinzuzufügen und nicht den SPAN's ist daß dadurch alle Punkte fein säuberlich vertikal dargestellt werden. Das ist in der Regel der gewünschte Effekt wenn wir mehrere, aneinander angrenzende Linien mit Punkten haben.
Hier sind mehrere Variationen mit verschiedenen Symbolen für die Linien. Das erste Beispiel verwendet einen kleinen, mittleren Punkt anstatt des normalen Punktes. Die Style Regeln sind exakt die Gleichen, nur daß wir hier für den generierten Text “·” anstatt von “.” verwenden:
Das folgende Symbol ist etwas fetter als das im letzten Beispiel:
Hier mit einem Doppelpunkt:
Diese Zeilen nutzen ein farbiges Plus Symbol ohne Freizeichen dazwischen:
Die folgenden Variationen sind ein wenig anders. Das Zeilensymbol ist ein Pfeil, aber das Ziel ist den Pfeil nicht vertikal zu wiederholen sondern nur am Ende einmal anzuzeigen. Aus diesem Grunde sind die Zeilensymbole nicht dem Listenelement zugehörig, sondern dem Element mit dem Preis. Werfen Sie einen Blick in den Quelltext dieser Seite wenn Sie wissen möchten wie es gemacht wurde.
Aber was ist, wenn der Text vor den Leaders so lang ist dass er mehrere Zeilen beansprucht? Die Zeilen mit den Leaders muss dann etwas niedriger gesetzt sein, nicht hinter der ersten - sondern hinter der letzten Zeile. Mit den angekündigten neuen Funktionen von CSS Level 3 können wir dieses Problem nicht direkt lösen, wir können aber in einfachen Fällen dennoch den gewünschten Effekt erzielen.
Wir gehen davon aus dass der Text nach dem Leader kurz genug ist damit er nicht umbricht. Und dann fügen wir die Punkte nicht an den Anfang des Textes (':before'), sondern an sein Ende (':after'), so dass sie hinter der letzten Zeile vom Text auftauchen, anstatt der Ersten. Und so sieht das Ganze aus:
Die CSS Regeln sind die Selben wie zuvor, nur dass wir nun den Selektor 'ul.leaders li:after' anstatt 'ul.leaders li:before' verwenden.
Aber es gibt da noch eine Feinheit: weil die Punkte nun logisch über dem letzten Text positioniert sind anstatt darunter. Also müssen wir den Text dazu bringen über den Punkten zu erscheinen, sodass diese an Stellen mit Text nicht sichtbar sind. CSS besitzt dafür die Eigenschaft 'z-index'. Das funktioniert nur für positionierte Elemente, also müssen zwei Deklarationen hinzugefügt werden. Die Regeln lauten wie folgt:
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:after {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white;
position: relative;
z-index: 1}
Das 'leaders' Feature von CSS Level 3 befindet sich noch in der Entwicklung (Stand März 2011), aber wird dazu dienen die obigen Beispiele viel einfacher zu erstellen.
Das erste Beispiel vereinfacht dargestellt:
ul.leaders {
padding: 0;
list-style: none}
ul.leaders span:first-child:after {
content: leader(dotted)}
Und dies wird das SPAN automatisch ans Ende der Zeile anfügen, somit gibt es keinen Grund mehr float dafür zu verwenden.
‘Dotted’ ist ein vordefiniertes Schlüsselwort. Aber alle Symbole können in Anführungszeichen gesetzt werden, wie z.B. ‘leader("· ")’ für den mittleren Punkt und das Leerzeichen. Hier sind nocheinmal die Beispiele aufgelistet, diesmal aber unter Nutzung der angekündigten Level 3 Features. Es ist unwarscheinlich daß sie in Ihrem Browser jetzt schon funktionieren. (Mit Stand November 2014, bieten nur Prince und PDFReactor eine experimentelle Unterstützung)
Das Pfeil Symbol wurde mit dem “horizontal line extension” Zeichen (\23AF) und einem Pfeil (\2192) erzeugt. Sie sehen nicht in allen Fonts ordentlich aus, tun dies aber im verwendeten Symbol Font. Wie auch immer, es gibt einen kleinen freien Platz for dem Pfeilkopf da der aktuelle Entwurf noch nicht erklärt wie das leader Zeichen rechts ausgerichtet werden soll.
Bert
Bos, Style Activity LeiterErstellt am 27 März 2011;
Zuletzt geupdatet Mi 06 Jan 2021 05:40:49 UTC