Using a Mixin to Take the Math out of Responsive Font Sizes

Responsive Font Size (RFS) ist eine Engine, die die font-size-Eigenschaft von Elementen basierend auf den Dimensionen des Browser-Viewports automatisch berechnet und aktualisiert.

If you’re thinking that sounds familiar, that’s because there is a slew of tools out there that offer various approaches for fluid typography. In fact, Chris compiled a bunch of those a little while back. Check that out because it’s always good to know what’s out there and what fits best for a particular task.

RFS ist anders, da es das Schreiben von Code für flüssige Typografie sehr ähnlich macht, als würde man nativen CSS-Code (oder genauer gesagt, als würde man mit einem Präprozessor) direkt in den Stylesheets schreiben, an denen man bereits arbeitet — nur ohne eine Reihe von Media Queries verwalten und organisieren zu müssen. Es ist sogar mit Sass, Less, Stylus und PostCSS kompatibel, sodass es sich in fast jeden Stack integrieren lässt.

Wie integriert ist es? Nun, vergleichen wir einen Snippet für flüssige Typografie, der die calc() Funktion verwendet...

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 22px;
  }
}

...mit einem ähnlichen Beispiel, wie es mit RFS in Sass gemacht werden kann

.title {
  @include font-size(4rem);
}

Was kompiliert zu

.title {
  font-size: 4rem;
}

@media (max-width: 1200px) {
  .title {
    font-size: calc(1.525rem + 3.3vw);
  }
}

Neugierig, wie das funktioniert? Schauen wir es uns an und gehen dann darauf ein, wie man es für ein Projekt einrichtet.

Die Magie hinter automatischer Neuskalierung

Hier ist eine Grafik, um ein besseres Verständnis dafür zu bekommen, wie RFS Schriftgrößen neu skaliert

Jede Farbe repräsentiert eine Schriftgröße, die an das von RFS bereitgestellte Mixin font-size() übergeben wird. Die Y-Achse der Grafik stellt die Schriftgröße (in px) dar und die X-Achse die Breite des Viewports (wiederum in px).

Konzentrieren wir uns auf die grüne Linie, die durch das Anwenden eines Mixins auf ein Element erzeugt wird

.title {
  @include font-size(40);
}

In diesem Fall wird eine Schriftgröße von 40px in das Mixin übergeben. Dieser Wert dient als *maximale* Schriftgröße des Elements und wird erreicht, wenn der Viewport 1200px oder breiter ist, ab diesem Zeitpunkt bleibt er bei dieser Größe.

Umgekehrt wird die Schriftgröße bei 20px stoppen und nie darunter fallen.

Alles andere? Nun, hier wird der Wert der Schriftgröße automatisch berechnet, wobei im Hintergrund eine Funktion verwendet wird, um die Zahl entsprechend der aktuellen Breite des Viewports zu ermitteln.

RFS ist auch ein wenig eigenwillig, da es sich auf Schriftgrößen von 20px und aufwärts beschränkt. Die Begründung ist, dass kleinere Texte (z.B. normale Fließtexttexte) normalerweise nicht so stark flexen müssen und viel einfacher zu handhaben sind als größere Inhaltsstücke wie Titel usw. Das passt sehr gut zu FitText, das ebenfalls bevorzugt auf große Texte angewendet wird (auch wenn es einen nicht daran hindert).

Wenn Sie zu den Leuten gehören, die gerne unter die Haube schauen, ist das Mixin für jeden Präprozessor im RFS GitHub Repo einsehbar. Zum Beispiel hier ist ein direkter Link zur SCSS-Version. Das ist eine Menge Mathematik!

Beachten Sie, dass jede Schriftgröße in einer Kombination von rem und vw Einheiten generiert wird, aber sie sind im Diagramm auf px abgebildet, um das Verständnis zu erleichtern. Mit anderen Worten, es nimmt tatsächlich die gesamte Mathearbeit aus der Mischung.

Alles ist konfigurierbar

Ernsthaft. Jedes. Einzelne. Ding.

Zum Beispiel haben Sie sich vielleicht gefragt, warum die Schriftgröße in den vorherigen Beispielen bei Viewports von 1200px und breiter begrenzt war. Das kann geändert werden, ebenso wie eine Menge anderer Dinge, darunter

• Basisschriftgröße: Der niedrigste Schriftgrößenwert.
• Schriftgrößeneinheit: Die Art der Einheit für den Ausgabewert (px oder em).
• Breakpoint: Die maximale Breite des Viewports, bei der die Schriftgröße des Elements seinen Maximalwert erreicht.
• Breakpoint-Einheit: Die Einheit, die für die Media Query verwendet wird, die das Mixin generiert (px, em oder rem).
• Faktor: Dies dient als eine Art Lautstärkeregler, der dem Mixin mitteilt, wie aggressiv es Schriftgrößen vom maximalen Viewport-Breite bis ganz nach unten berechnen soll.
• Rem-Wert: Dies definiert den Wert von 1rem in Pixel (px) Einheiten.
• Zweidimensional: Eine Funktion, die die kleinste Seite eines Viewports erkennt und diese zur Berechnung des Schriftgrößenwerts verwendet. Dies ist nützlich, wenn Sie beispielsweise verhindern möchten, dass die Schrift kleiner wird, wenn ein Gerät von einer Porträt- in eine Landschaftsorientierung gedreht wird.
• Klasse: Stellt Klassennamen bereit, die einem Element im HTML hinzugefügt werden können, um die flüssige Skalierung zu aktivieren oder zu deaktivieren.

Also ja. Viele Optionen und Flexibilität hier. Wichtig ist zu wissen, dass all diese Optionen Variablen sind, die in Ihren Stylesheets definiert werden können.

Dennoch sind die Standardeinstellungen ziemlich sicher zu verwenden und verhindern, dass viele längere Wörter aus dem Viewport abgeschnitten werden. Dies gilt insbesondere für einige Sprachen – wie Deutsch oder Niederländisch –, die viele zusammengesetzte Wörter enthalten.

RFS in einem Projekt verwenden

Tauchen wir direkt in den Code ein. Es wäre erschöpfend, den Code für jeden Präprozessor zu betrachten, daher werde ich alles in der .scss Syntax erklären. Aber wenn Sie etwas anderes bevorzugen, können Sie die Beispiele in anderen Sprachen im GitHub-Repo im Abschnitt Usage nachlesen.

Zuallererst muss RFS im Projekt installiert werden. Es ist in npm und Yarn verfügbar

## npm
npm install rfs

## Yarn
yarn add rfs

## Bower is available, but has been deprecated
bower install rfs --save

Dann müssen Sie sicherstellen, dass das Mixin zusammen mit den anderen Stilen importiert wird, wo immer Sie Ihre Importe für andere Partials vornehmen

@import "~rfs/scss";

Jetzt können wir mit dem Mixin loslegen!

.title {
  color: #333;
  @include font-size(64px);
}

.subtitle {
  color: #666;
  @include font-size(48px);
}

.paragraph {
  @include font-size(16px);
}

Ich habe Werte in px übergeben, aber rem Einheiten werden ebenfalls unterstützt. Wenn ein Wert ohne Einheit übergeben wird, wird standardmäßig px verwendet. Die Schriftgrößen werden immer in rem (in Kombination mit vw) gerendert, um sicherzustellen, dass die Schriftgrößen auch dann zunehmen, wenn die Standard-Schriftgröße im Browser erhöht wird (dies ist eine Funktion, die oft von sehbehinderten Menschen genutzt wird).

Die Ausgabe ist

.title {
  color: #333;
  font-size: 4rem;
}

@media (max-width: 1200px) {
  .title {
    font-size: calc(1.525rem + 3.3vw);
  }
}

.subtitle {
  color: #666;
  font-size: 3rem;
}

@media (max-width: 1200px) {
  .subtitle {
    font-size: calc(1.425rem + 2.1vw);
  }
}

.paragraph {
  font-size: 1rem;
}

Beachten Sie, dass das Mixin font-size() ist, aber RFS erlaubt Ihnen auch, es auf zwei andere Arten zu verwenden

.title {
  @include font-size(4rem);
  // or
  @include responsive-font-size(64px);
  // or
  @include rfs(64);
}

RFS ist fest in Bootstrap integriert

Hier ist eine kleine Geschichte für Sie.

Eines Tages hatte ich die unglaublich impulsive Idee, RFS in Bootstrap einzubauen. Ich habe Bootstrap zu dieser Zeit eigentlich nicht benutzt, glaubte aber, dass es ein Feature sei, das Bootstrap definitiv gebrauchen könnte. Ich habe einen Pull Request erstellt und ein paar Monate gewartet, um zu sehen, was passieren würde.

In der Zwischenzeit wurde ich immer mehr von Bootstrap fasziniert und Version 4 wurde gerade veröffentlicht. Langsam aber sicher wurde ich immer stärker in das Projekt involviert und eine ganz neue Welt eröffnete sich mir, als ich die Community dahinter entdeckte. Während des Hacktoberfest (oh ja, ich habe mein T-Shirt bekommen) im Oktober 2018 wurde ich von mdo gebeten, dem Bootstrap-Team beizutreten.

Ich glaube, dass der Beitrag zu Open-Source-Projekten eine so unterhaltsame und lohnende Sache ist. Andrés Galante hat einen großartigen Beitrag zu diesem Thema, falls Sie daran interessiert sind, ein Mitwirkender zu werden.

Seitdem ist RFS ein Projekt des Bootstrap-Teams, und am 11. Februar dieses Jahres haben wir Bootstrap 4.3 veröffentlicht, das RFS direkt integriert hat. Es ist derzeit standardmäßig deaktiviert, kann aber einfach aktiviert werden, indem die Sass-Variable $enable-responsive-font-sizes: true gesetzt wird.

Aber täuschen Sie sich nicht: RFS kann immer noch eigenständig verwendet werden. Es ist einfach cool, dass es direkt in ein weit verbreitetes Framework integriert ist.

Oh ja, sprechen wir über Browser-Unterstützung

Die Unterstützung ist ziemlich gut! Tatsächlich funktioniert RFS überall dort, wo Media Queries und Viewport-Einheiten unterstützt werden. RFS setzt eine Schriftgröße für ältere Browser wie den Internet Explorer 8, aber die Fluidität ist nicht vorhanden. Mit anderen Worten, es sollte für die Produktion sicher sein!

Was kommt als Nächstes für RFS

Die nächste Hauptversion von Bootstrap ist Version 5 und wir planen, RFS standardmäßig zu aktivieren. Wir haben vorerst keine Pläne, die Funktionsweise zu ändern. Höchstwahrscheinlich wird die Variable $enable-responsive-font-sizes einfach auf true gesetzt und das war's.

In Zukunft hoffe ich, die min() Funktion nutzen zu können, da sie weniger CSS erzeugen und die Dinge viel weniger komplex machen würde. Browser scheinen diese Funktion noch nicht allzu gut zu unterstützen, aber wenn Sie an dieser Funktion interessiert sind, können Sie den Fortschritt in diesem GitHub-Issue verfolgen.

Sonst noch etwas? Nein, aber ich kann Ihnen ein kleines Lied und einen Tanz hinterlassen: Na na na na, na na na na, hey hey hey goodbye!