Spaß mit Zeilenhöhe!

Die Zeilenhöhe-Eigenschaft in CSS steuert den Abstand zwischen Textzeilen. Sie wird oft als einheitenloser Wert gesetzt (z. B. line-height: 1.4;), sodass sie proportional zur Schriftgröße ist. Sie ist eine wichtige Eigenschaft für die typografische Steuerung. Zu niedrig und die Zeilen sind unbeholfen zusammengedrängt; zu hoch und die Zeilen sind unbeholfen weit auseinander. Beides beeinträchtigt die Lesbarkeit. Aber das wissen Sie wahrscheinlich schon.

In diesem Artikel konzentrieren wir uns auf einige Tricks. Wenn Sie den genauen Wert der line-height kennen (oder herausfinden können), können Sie einige coole Sachen machen!

Jede Textzeile in einer anderen Farbe gestalten

Es gibt leider kein ::nth-line(), leider. Wir können auch keine <span>s zuverlässig verwenden, da es unzählige verschiedene Dinge gibt, die Text an unterschiedlichen Stellen umbrechen können.

Es gibt einen Weg, wenn auch nicht standardisiert, den Hintergrund eines Elements als Hintergrund für Text zu verwenden.

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Es gibt einen weiteren Trick, bei dem Sie einen linear-gradient() mit Farbstopps verwenden können, sodass die Farbe nicht in eine andere übergeht, sondern einfach abrupt endet und eine andere beginnt. Nehmen wir an, wir wissen, dass die Zeilenhöhe 22 Pixel beträgt, können wir die Übergänge genau dort machen.

.text {
  background-image: linear-gradient(
    to bottom,
    #9588DD,
    #9588DD 22px,
    #DD88C8 22px,
    #DD88C8 44px,
    #D3DD88 44px,
    #D3DD88 66px,
    #88B0DD 66px,
    #88B0DD);
}

Kombination dieser beiden Tricks

In einem Browser, der den Text-Hintergrund-Clipping nicht unterstützt, wie z. B. Firefox, erhalten Sie massive Farbflächen hinter dem Text. Vielleicht ist das cool und gefällt Ihnen. Vielleicht möchten Sie stattdessen einfach auf eine solide Textfarbe zurückgreifen. In diesem Fall können Sie @supports verwenden, um es nur anzuwenden, wenn es ohnehin unterstützt wird.

Da Sie den Wert der Zeilenhöhe immer wieder verwenden, ist es vielleicht schön, ihn zu variabilisieren. Ich verwende hier SCSS, aber es wäre irgendwann ziemlich nett, dies mit echten CSS-Variablen zu tun, damit Sie es auch nach dem Rendern ändern und sehen können, wie alles weiterhin funktioniert.

$lh: 1.4em;

body {
  font-size: 1em;
  line-height: $lh;
}

@supports (-webkit-background-clip: text) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      to bottom,
      #9588DD,
      #9588DD $lh,
      #DD88C8 $lh,
      #DD88C8 $lh*2,
      #D3DD88 $lh*2,
      #D3DD88 $lh*3,
      #88B0DD $lh*3,
      #88B0DD);
  }
}

Die Verwendung dieses Verhaltens am *Anfang* des Elements ist am einfachsten. Hier ist ein Beispiel, bei dem die ersten paar Zeilen zur Hervorhebung geändert werden.

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) $lh,
    rgba(white, 0.6) $lh,
    rgba(white, 0.6) $lh*2,
    rgba(white, 0.4) $lh*2,
    rgba(white, 0.4) $lh*3,
    rgba(white, 0.2) $lh*3,
    rgba(white, 0.2));
}

Es wird schwieriger, wenn wir versuchen, die letzten paar Zeilen einer beliebigen Textmenge anzusprechen. In diesem Fall benötigen wir, dass das erste Farband von oben bis ganz nach unten minus ein paar Zeilen geht. Glücklicherweise können wir das mit calc() machen!

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) calc(100% - 66px),
    rgba(white, 0.6) calc(100% - 66px),
    rgba(white, 0.6) calc(100% - 44px),
    rgba(white, 0.4) calc(100% - 44px),
    rgba(white, 0.4) calc(100% - 22px),
    rgba(white, 0.2) calc(100% - 22px),
    rgba(white, 0.2));
  background-position: bottom center;
}

Es gibt auch andere Möglichkeiten, diese Art von Dingen zu tun, wie z. B. das Überlagern eines Pseudo-Elements mit einem Gradienten (mit pointer-events: none;, damit es nicht stört).

Linien zwischen Text

Mit einer ähnlichen Technik wie die oben verwendete Solid-Color-Stop-Technik können wir einen 1 Pixel breiten Linienverlauf erstellen, der genau bei der bekannten line-height wiederholt wird. Der einfachste Weg ist die Verwendung von repeating-linear-gradient() und die Sicherstellung, dass alle anderen Elemente gut zusammenspielen (wie Padding, das ebenfalls auf der Zeilenhöhe basiert).

.parent {
  padding: $lh*2;
  background: #082838;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(white, 0)   0,
    rgba(white, 0)   $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px
  );
}

Um die 1 Pixel breite Linie zu erhalten, müssen wir die line-height in Pixeln kennen und dann eins abziehen. Das Ziel ist, dass sich der Gradient genau bei der bekannten Zeilenhöhe wiederholt, sodass das letzte Pixel in diesem Raum die Linie sein kann. Da wir die Schriftgröße des Körpers bei 1em belassen haben, sind das 16 Pixel. Und da die line-height in ems eingestellt ist, können wir durch 1em die Einheit entfernen, dann mit 16 Pixeln multiplizieren und bei Bedarf eins abziehen.

Bilder pro Zeile positionieren

Eine weitere Sache, die Sie tun können, wenn Sie die genaue line-height kennen, ist, background-size entsprechend anzupassen, zumindest auf der vertikalen Achse. Dann können Sie es vertikal wiederholen lassen und es wird ein Bild pro Zeile ausgerichtet.

.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}

Demos

Siehe den Pen One line of Text Dif Color von Chris Coyier (@chriscoyier) auf CodePen.