OpenType-Features und Variable-Fonts, Übungen
Aufgabe 1: Text suchen und ersetzen
Todos
Ein HTML-Element, das den Text «m2» enthält, soll durch JavaScript so verändert werden, dass die Ziffer in span-Tags eingefasst wird. Mit CSS wird eine Regel definiert, die Ziffern, die durch diesen Tag eingefasst werden, hochstellt.
Blindtext: <p id="flaeche">Wohnzimmer: 32 m2, Schlafzimmer 22 m2, Küche 19 m2.</p>
Du kannst mit Codepen oder mit Visual Studio Code (lokal) arbeiten. Mit eigenen Fonts, oder mit Google Fonts. Bedenke dabei, dass nicht alle OpentType-Features enthalten (siehe mein Test in den Links). Du kannst alleine arbeiten oder dich mit anderen Teilnehmer*innen austauschen.
Optional: In der Praxis müssen meist mehrere DOM-Knoten (auf Deutsch: Tags im HTML-Dokument) geprüft werden. Dazu braucht es die Funktionen document.querySelectorAll() und forEach(). Wenn du das ausprobieren möchtest, kannst du dich direkt an Josef wenden.
<ul>
<li>Wohnzimmer: 32 m2</li>
<li>Schlafzimmer 22 m2</li>
<li>Küche 19 m2</li>
</ul>
Zubehör
- Ein Font mit den OpenType-Features, die du benötigst.
- HTML
- CSS
- JavaScript
Links
- Gustavo Ferreira, OpenType features in CSS
- MDN, OpenType font features guide
- Meine eher zufälligen Tests von OT-Features in Google Fonts auf Codepen
- Mein Video «Textersetzung mit OpenType-Features und JavaScript» (Beispiel mit Kapitälchen)
- MDN, String.prototype.replace()
- Regular Expressions Tutorial
- Mein Regular-Expressions-Intro
- Plain JS, eine Sammlung von Funktionen zur DOM-Manipulation Hat nichts mit dieser Aufgabe zu tun, aber gute Quelle.
Snippets
Einer Variablen ein HTML-Element zuweisen:
const myEl = document.querySelector(".foo");
Der Inhalt eines HTML-Elements (z.B. Text zwischen zwei Tags):
const textInMyEl = myEl.innerHTML;
console.log(textInMyEl)
Text ersetzen:
const text = "remote unterricht";
const toxt = text.replace(/[aeiu]/g, "o"); // was macht das g?
console.log(toxt)
Aufagbe 2: Variable-Font mit Animation
Todos
Teil 1: Schau dir die Animation auf Lab DJR an. Analysiere mit den Dev-Tools, wie sie gemacht ist. Baue sie in Codepen mit dem erstbesten Variable-Font nach.
Teil 2: Sobald es funktioniert, gehst du auf v-fonts.com und schaust dich nach Fonts um, die als Trial zur Verfügung stehen oder OpenSource veröffentlicht werden. Suche einen Font, der über andere Achsen verfügt, als jener, den du vorher benutzt hast. Beschaffe den Font und animiere ihn.
Teil 3: Wenn Du bei der Suche nach Fonts auf interessante Schriften stösst, teile sie in Slack mit folgenden Infos: Name Font, Name Designer/Foundry, dazu in einem Satz, warum es interessant ist. Wir stellen daraus eine Liste zusammen.
Zubehör
- Variable-Font
- HTML
- CSS Animation
Wenn du keinen geeigneten Variable-Font besitzt, kannst du einen von Google Fonts nehmen.
Links
- Lab DJR
- CSS Tricks: Getting the Most Out of Variable Fonts on Google Fonts von Stephen Nixon (ist der Designer der Recursive)
- MDN, Using CSS Animations
- MDN, Variable fonts guide
Snippets
Um einen Variable-Font von Google einzubinden, muss angegeben werden, in welchem Umfang die Achsen vorhanden sein sollen. Bsp. Recursive:
<link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..900&display=swap" rel="stylesheet">
Wenn du den Font selber mit der @font-face-Regel einbindest, musst du nichts weiter beachten.
.foo {
animation-name: hello;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes hello {
from { /* … */ }
to { /* … */ }
}
Das Gewicht von Variable-Fonts lässt sich mit font-weight einstellen. Andere Achsen wie folgt:
.foo { font-variation-settings: 'wdth' 115; }
Hier wird die Achse für die Zeichenbreite eingestellt. Es gibt auch Achsen, die nicht standardisierte Namen tragen. Du findest sie heraus, wenn du den Font auf wakamaifondue.com hochlädst.
Achtung: nicht registrierte Achsen-Kürzel müssen mit Grossbuchstaben geschrieben werden: BANG.