Beispiele für vertikale Raster und progressiven Zeilenabstand

Neue Fragen

Kommen und gehen Sie in Eile. Seit der letzten Veröffentlichung von „Vertical Grid“ und „Progressive Line Spacing“ (Teil 1) sind mehr als zwei Monate vergangen. Schauen Sie sich andererseits die Ergebnisse vom letzten Mal an. Hä? Warum fühlen sich Nebenwetten etwas seltsam an?

(demo-6.html)

Oder lesen Sie meinen Artikel über Typografie: Wir wissen

• Der am häufigsten verwendete Zeilenabstand im chinesischen Internet beträgt etwa 1,5
• Je länger die Zeilenlänge, desto größer muss der Zeilenabstand sein. (Ist der Zeilenabstand zu klein, liest der Leser den Text leicht in einer Zeile. Ist der Zeilenabstand zu groß, hat der Leser beim Lesen der Zeile den Eindruck, dass der Text nicht kontinuierlich ist.)

Es scheint, dass für die 12px Schriftgröße der Randnotiz die Zeilenhöhe von 24px offensichtlich zu groß ist. Gemäß der Methode des vorherigen Artikels erfordert der vertikale Rhythmus jedoch, dass der Zeilenabstand der Randnotizen und der Zeilenabstand des Haupttextes übereinstimmen. Um den vertikalen Rhythmus beizubehalten, können wir also nur den Zeilenabstand auf beiden Seiten gleichzeitig verringern – Fazit: unzuverlässig. Wie passen wir also den Abstand der Präparationsgrenzen an, damit der von uns festgelegte vertikale Rhythmus wirksam ist? Dies erfordert die Einführung eines progressiven Zeilenabstands .

Progressiver Zeilenabstand

Im Allgemeinen ist ein progressiver Zeilenabstand eine Ergänzung zum starren vertikalen Rhythmus. Vertikaler Rhythmus erfordert, dass Randnotizen mit jeder Zeile des Haupttextes übereinstimmen. Im Gegensatz dazu ermöglicht ein progressiver Zeilenabstand, dass Randnotizen ebenfalls am Haupttext ausgerichtet sind – allerdings nicht in jeder Zeile, sondern alle paar Zeilen. Im Allgemeinen wird die Ausrichtung alle 4 oder 5 Zeilen durchgeführt. Lassen Sie uns den vorherigen Artikel noch einmal durchgehen. Das Beispiel am Anfang dieses Artikels hat die folgende „Konfiguration“:

• Fließtext: Schriftgröße 14px, Zeilenabstand 24px, Absatzabstand 24px
• h1: Schriftgröße 24px, Zeilenabstand 24px, Absatzabstand 24px, Absatzabstand 24px
• h2: Schriftgröße: 18px, Zeilenabstand 24px, Absatzabstand 12px, Absatzabstand 12px
• Notiztext: Schriftgröße 12px, Zeilenabstand 24px, Absatzabstand 24px
• Beachten Sie den Rand: Randstärke 1px, Polsterung 11px - vergessen Sie nicht, ihn 12px nach oben zu verschieben

Wir ändern den Zeilenabstand und Absatzabstand der Randnotizen auf 18px. Dann sieht die Situation folgendermaßen aus:

(demo-9.html)

Ich frage mich, ob Ihnen aufgefallen ist, warum die Grundlinie der ersten Zeile nicht ausgerichtet ist? Dies liegt daran, dass das Fließlayout den Textblock entsprechend der Zeilenhöhe oben ausrichtet. Wie unten dargestellt:

Um hier die Grundlinie der ersten Zeile auszurichten, müssen wir auch den Rand um eine bestimmte Anzahl von Pixeln nach unten ziehen. Leider stellt sich die Frage, wie viele Pixel reduziert werden sollen. Das ist eine sehr komplizierte Frage. Nach mehreren Versuchen kann ich immer noch kein Muster erkennen. Ich kann nur die folgenden drei Schlussfolgerungen ziehen:

• Angenommen, die Textzeilenhöhe beträgt h px, die Zeilenhöhe der Randnotizen beträgt h' px und der zu verringernde Wert beträgt d px. Dann liegt dieser Wert zwischen 1/2(hh') < d < (hh'). ①
• Wenn die Linie westliche Zeichen enthält (Zahlen oder Buchstaben in halber Breite), kann sich die Grundlinie der Linie im Vergleich zu einer Linie ohne westliche Zeichen manchmal um ein Pixel verschieben.
• Das Verhalten verschiedener Schriftart-Rendering-Engines kann inkonsistent sein.