Behalten Sie den vertikalen Rhythmus mit CSS und jQuery bei

Inhalt

• Layouttyp
• Vertikaler Rhythmus
• Den Rhythmus dirigieren
• Umgang mit Bildern
• JQuery verbessern
• Fazit

• Kenntnisse erforderlich: CSS, grundlegende jQuery
• Benötigt: jQuery, CSS, HTML
• Projektzeit: 30 Minuten
• Quelldateien herunterladen

Angenommen, Sie entwerfen aus dem Inhalt heraus, ist die erste Entscheidung, Ihr Design zu beeinflussen hast typbezogen sein. Sogar von nicht Wenn Sie eine Schriftart auswählen, haben Sie etwas getan, das sich auf Ihre Website auswirkt. Typ ist der Kern des Druck- und Webdesigns und komplex. Es gibt viele gesammelte Begriffe, Praktiken, Regeln und Techniken, die für eine gute Verwendung verwendet werden. Dieser Artikel befasst sich mit einer Technik zum Verwalten eines Aspekts des Typs, die online schwer zu realisieren war, aber im Druck Routine ist: Beibehalten eines konsistenten vertikalen Rhythmus, der es uns wiederum ermöglicht, ein professionelles Layout zu erzielen.

Layouttyp

Im Druck ist es wahrscheinlich, dass für jedes Element mit einer beträchtlichen Textmenge die Grundlage des Entwurfs ein Grundlinienraster ist. Es wird verwendet, um die Seite zu strukturieren und den vertikalen Inhaltsfluss zu steuern. Fast alles wird in Bezug auf dieses Grundlinienraster platziert. Machen Sie sich keine Sorgen, wenn Sie die Begriffe nicht erkennen. Niemand ist mit Baselines oder Baseline-Gittern nicht vertraut. Sie wissen bereits über sie. Denken Sie an die Schule zurück, als Sie zweifellos auf liniertes Papier geschrieben haben - während Sie geschrieben haben, haben Sie den unteren Rand Ihrer Briefe ordentlich auf jede der Zeilen auf dem Papier gelegt. Die Grundlinie und das Grundlinienraster in Aktion. Die Grundlinie ist eine imaginäre Linie, auf der sich die Unterseite der Buchstaben ausrichtet.Wenn Sie sich diesen Artikel jetzt ansehen, werden Sie eine Grundlinie "sehen", obwohl es nicht wirklich eine Linie gibt. Ihr Gehirn stellt einen für Sie bereit. Deshalb können Sie Sätze lesen. Die Linien auf liniertem Papier? Sie sind ein Basisraster. Gerade, damit Ihre Sätze gerade sind, und in regelmäßigen Abständen so eingestellt, dass Ihr Text einen regelmäßigen vertikalen Rhythmus hat.

Vertikaler Rhythmus

Der vertikale Rhythmus bestimmt, wo sich der Text auf der Seite befindet. Es ist eine Komponente, die sich auf unsere Fähigkeit auswirkt, Textblöcke zu scannen und zu lesen, und sie hilft dabei, unsere emotionalen Reaktionen zu informieren. Wenn Text einen starken vertikalen Rhythmus und einen guten Abstand hat, halten wir ihn für professionell, überlegt, maßgeblich und angenehm zu lesen. Wenn Text einen schlechten Rhythmus und Abstand hat, ist er unserer Meinung nach weniger überlegt, weniger professionell und oft schwerer zu lesen. Vertikaler Rhythmus ist ein Teil Benutzerfreundlichkeit und ein Teil Ästhetik.

Den Rhythmus dirigieren

Leider ist das Web immer noch der arme Cousin des Drucks in Bezug auf seine Fähigkeit, einige grundlegende Praktiken in Bezug auf den Typ anzuwenden. Im Web können wir ein Grundlinienraster nicht wie ein Druckdesigner (oder ein Kind in der Schule) verwenden. Wir können die Grundlinie des Textes nicht am Grundraster eines Dokuments ausrichten. CSS hat kein Konzept für ein Basisraster. Unser Text befindet sich also nicht genau auf den Linien eines Grundlinienrasters. Stattdessen wird es vertikal in der Lücke zwischen den Linien zentriert. Es ist das Beste, was das Web leisten kann.

Lassen Sie uns mit einem Beispieldokument praktisch werden. Zunächst legen wir den Takt fest, indem wir ein sichtbares Grundlinienraster erstellen. Dazu verwenden wir ein sich wiederholendes Hintergrundbild, um regelmäßige horizontale Linien mit einem Abstand von 22 Pixel zu zeichnen:

1. html {Hintergrund: #fff url (basis_22.png); }}

Hurra, wir haben unser liniertes Papier!

Sie werden feststellen, dass nichts in einer Reihe steht. Damit alles in einer Linie liegt, soll die Unterkante aller Elemente auf eine dieser Linien treffen. Der einfachste Weg, dies zu tun, besteht darin, sicherzustellen, dass alle Elemente eine vertikale Höhe (einschließlich Ränder) einnehmen, die ein Vielfaches von 22 ist. Hier einige CSS, die genau das tun. Ich verwende die REM-Einheit, gebe aber einen EM-Fallback für Browser, die REM nicht verstehen. Ich beziehe auch das PX-Einheitenäquivalent in die Kommentare ein. Wenn Sie REM / EM noch nicht verstehen, können Sie stattdessen einfach die px-Werte verwenden - sie sind alle gleichwertig:

1. html {/ * Schriftgröße: 16px, Zeilenhöhe: 22px * /
2. Schriftart: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, serifenlos;
3. Hintergrund: #fff url (baseeline_22.png); }}
5. h1, h2, h3, h4, h5, h6 {/ * Rand oben und unten sind beide 22px * /
6. / * em Fallback * / margin: 1.375em 0;
7. Rand: 1,375rem 0; }}
8. h1 {/ * Schriftgröße ist 32px, Zeilenhöhe ist 44px * /
9. / * em Fallback * / Schriftgröße: 2em;
10. Schriftgröße: 2rem; Zeilenhöhe: 1,375; }}
11. h2 {/ * Schriftgröße ist 26px, Zeilenhöhe ist 44px * /
12. / * em Fallback * / Schriftgröße: 1.75em;
13. Schriftgröße: 1.75rem; Zeilenhöhe: 1,5714285714; }}
14. h3, h4, h5, h6 {/ * Schriftgröße beträgt 22px, Zeilenhöhe beträgt 22px * /
15. / * em Fallback * / Schriftgröße: 1.375em;
16. Schriftgröße: 1.375rem; Zeilenhöhe: 1; }}
17. p, ul, blockquote {/ * unterer Rand ist 22px, Zeilenhöhe wird von HTML (22px) * / geerbt
18. / * em fallback * / margin-top: 0; Rand-unten: 1,375em;
19. Rand oben: 0; Rand-unten: 1,375rem; }}

Werfen wir einen Blick darauf, was uns das gibt. Beachten Sie, wie der gesamte Text gut ausgerichtet ist? Es sitzt nicht auf der Grundlinie, hat aber einen vorhersehbaren vertikalen Rhythmus. Es ist schön und ordentlich.

Umgang mit Bildern

Bilder machen die Dinge komplizierter. Schauen Sie sich an, was mit unserem Rhythmus passiert, wenn wir einige einbeziehen. Sie stören es wie ein Sprung in einer Platte - das Tempo stimmt, aber das Timing ist falsch. Die Ausrichtung wird verschoben. Dies liegt daran, dass Bilder wahrscheinlich keine Höhe haben, die ein Vielfaches der Grundlinie beträgt, sodass die Unterkante nicht mit unserem Grundlinienraster übereinstimmt.

Um das Problem zu beheben, müssen wir jedem Bild einen Rand hinzufügen, sodass der untere Rand des Randes mit unserem Raster übereinstimmt. Das ist einfach genug, um mit ein wenig JavaScript zu automatisieren. Hier ist unser Grundplan:

1. Finden Sie die Höhe jedes Bildes heraus.
2. Sehen Sie, wie oft sich der Grundlinienwert in den vertikalen Raum teilt, den das Bild derzeit einnimmt, und erhalten Sie den Rest.
3. Subtrahieren Sie den Rest von der Grundlinie, um den Versatz zu erhalten, den wir auf das Bild anwenden müssen.
4. Wenden Sie den Versatz als Rand am unteren Rand des Bildes an.

Der untere Rand des vertikalen Bildbereichs wird jetzt korrekt am Grundlinienraster ausgerichtet. Hier ist eine Grundfunktion in jQuery, die dies tut:

1. $ (Fenster) .bind (’load’, function () {
2. $ ("img"). each (function () {
3. / * Variablen * /
4. var this_img = $ (this);
5. var Grundlinie = 22;
6. var img_height = this_img.height ();
7. / * rechne * /
8. var rest = parseFloat (img_height% Grundlinie);
9. / * Wie viel müssen wir hinzufügen? * /
10. var offset = parseFloat (Grundlinienrest);
11. / * wende den Rand auf das Bild an * /
12. this_img.css ("Rand-unten", Offset + "px");
13. });
14. });

Warum zum window.bind Linie? Weil wir warten müssen, bis die Bilder geladen sind, bevor wir ihre Größe zuverlässig ermitteln können. Hier ist ein Beispiel für die Ausführung dieses Basiscodes.

JQuery verbessern

Die Welt ist selten einfach, und so stellt sich hier heraus - wir müssen uns mit einigen Implementierungsdetails befassen. Was ist los mit unserer Funktion? Viele:

• Es erzeugt unangenehme Ergebnisse mit Bildern, die eher inline als schwebend oder blockierend sind.
• Bei einigen Bildern scheint es fehlerhaft zu sein, insbesondere bei Bildern in Containern.
• Es geht nicht um flüssige Layouts.
• Es ist nicht sehr wiederverwendbar.

Wir möchten dieses Verhalten nicht auf Inline-Bilder anwenden, wie z. B. das Smiley-Gesicht im Beispiel. Inline-Bilder werden so ausgerichtet, dass der untere Rand auf derselben Grundlinie wie der Text liegt (nicht das Grundlinienraster). Das heißt, das Bild ist vertikal versetzt. Weder CSS noch JS geben uns die Möglichkeit, herauszufinden, wo sich die Grundlinie für ein Textelement befindet, sodass wir den Versatz nicht kennen. Wir müssen Inline-Bilder ignorieren und unseren Fix nur auf Bilder anwenden, die auf eingestellt sind Bildschirmsperre (Glücklicherweise wird jedes schwebende Bild automatisch auf den Anzeigeblock eingestellt).

Befindet sich ein Bild in einem Container, wird der auf das Bild angewendete Rand möglicherweise aufgrund von Überlaufeinstellungen im Container ausgeblendet. Möglicherweise möchten wir auch nicht den Rand auf dem Bild, sondern auf dem Containerelement. In diesem Beispiel haben wir lieber Ränder auf dem weißen Feld als auf dem Bild im Feld, damit keine seltsamen Lücken im Feld entstehen.

Die Funktion wird nur einmal ausgeführt, aber bei einem flüssigen Design ändern die Bilder ihre Höhe, wenn die Größe des Browsers geändert wird (versuchen Sie, die Größe des Beispiels auf einen ziemlich engen Wert zu ändern, um dies zu sehen). Das Ändern der Größe bricht den Rhythmus erneut. Die Funktion muss sowohl nach der Größenänderung des Browsers als auch nach dem Laden der Seite ausgeführt werden. Flüssige Layouts führen auch zu anderen Problemen. Bilder können Bruchpixel hoch sein, z. B. 132,34 Pixel. Dies kann wiederum zu unerwarteten Ergebnissen führen, selbst wenn wir einen Bruchteil der Marge anwenden (wenn Sie interessiert sind, finden Sie hier den Grund: trac.webkit.org/wiki/LayoutUnit). Wir müssen das Bild also auf eine ganze Pixelhöhe einmassieren, um Layoutfehler zu vermeiden, die durch gebrochene Pixel verursacht werden.

Zuletzt sollten wir dies zu einer wiederverwendbareren Funktion machen. Angesichts der Komplexität, die eine praktische Lösung gegenüber der theoretischen Lösung benötigt, sollten wir ein Plug-In erstellen, das in anderen Projekten wiederverwendet werden kann.

Im letzten Beispiel finden Sie den Code, mit dem all dies erreicht wird. Das Plug-in JavaScript ist stark kommentiert, so dass Sie mitmachen können. Sie können das Plug-In verwenden, indem Sie es wie folgt aufrufen:

1. $ (Fenster) .bind (’load’, function () {
2. $ ("img"). baseelineAlign ();
3. });

Sie können das Plug-In auch anweisen, den Rand auf einen benannten Container anzuwenden, sofern einer als übergeordnetes Element des Bildes vorhanden ist:

1. $ (Fenster) .bind (’load’, function () {
2. $ ("img"). baseelineAlign ({container: ’. popup’});
3. });

Fazit

Das Beibehalten eines guten vertikalen Rhythmus ist eine subtile, aber effektive Entwurfspraxis, die regelmäßig im Druck angewendet wird. Sie kennen jetzt die Grundprinzipien, verfügen über fundierte Kenntnisse der Baselines und des Baseline-Rasters und kennen einige der Einschränkungen des CSS-Textlayouts im Vergleich zum Drucken. Sie wissen auch, wie Sie diese Einschränkungen umgehen, Ihre Dokumente in einem beliebigen vertikalen Rhythmus zusammenstellen und verfügen über ein Tool, mit dem Sie mit störenden Bildinhalten umgehen können.

Mit zunehmender Reife von CSS erhalten wir immer mehr Funktionen, die unseren Print-Cousins ​​entsprechen. Daher wird ein gutes Verständnis des Typs für die Erstellung hochwertiger Websites immer wichtiger. Wenn Sie mehr über Typ im Allgemeinen erfahren möchten, empfehle ich www.thinkingwithtype.com (und den Kauf des dazugehörigen Buches). Wenn Sie nach CSS-Artikeln zur Typbehandlung suchen, finden Sie hier und anderswo im Internet zahlreiche Artikel. Ich würde auch empfehlen, sich über die neuesten Entwicklungen von Mark Boulton und Elliot Jay Stocks zu informieren, die beide häufig über Typ in Bezug auf Webdesign sprechen.

Habe Spaß!