Der Trick, den Punkt auf dem Buchstaben „i“ zu animieren

Hier ist der Trick: Indem wir den türkischen Buchstaben „ı“ und den Punkt „.“ kombinieren, können wir etwas erstellen, das wie der Buchstabe „i“ aussieht, aber aus zwei separaten Elementen besteht. Dies eröffnet uns einige interessante Möglichkeiten, den Punkt des Buchstabens unabhängig vom Stiel zu gestalten oder zu animieren. Sorgen um Barrierefreiheit? Keine Sorge, wir werden das bestmöglich abdecken.

Schauen wir uns an, wie diese separaten „Buchstaben“ erstellt und gestaltet werden, und erfahren wir, wann sie verwendet werden können und wann sie vermieden werden sollten.

Schauen Sie sich einige Beispiele an

Hier sind einige verschiedene Stile und Animationen, die wir mit dieser Idee machen können

Siehe den Pen
Stile und Animationen von Ali C (@alichur)
auf CodePen.

Da beide Teile des Buchstabens normale Unicode-Zeichen sind, werden sie Schriftartenänderungen und Seitenzoom genauso berücksichtigen wie jeder andere Text. Hier sind einige Beispiele für verschiedene Schriftarten, Stile und Zoomstufen

Siehe den Pen
Verschiedene Schriftarten und Zoom von Ali C (@alichur)
auf CodePen.

Schritt-für-Schritt durch die Technik

Lassen Sie uns aufschlüsseln, wie diese Technik funktioniert.

Wählen Sie die zu kombinierenden Unicode-Zeichen

Wir verwenden den Punkt-losen „i“-Buchstaben (ı) und einen Punkt. Und ja, wir könnten auch andere Zeichen verwenden, wie den Punkt-losen „j“-Buchstaben (ȷ) oder sogar die Akzente auf Zeichen wie „ñ“ (~) oder „è“ (`).

Stapeln Sie die Zeichen übereinander, indem Sie sie in ein Span einpacken und die Eigenschaft display auf block setzen.

<span class="character">.</span>
<span class="character">ı</span>

.character {
  display: block;
}

Richten Sie die Zeichen aus

Sie müssen nah beieinander liegen. Das können wir erreichen, indem wir die Zeilenhöhen anpassen und die Abstände zwischen ihnen entfernen.

.character {
  display: block;
  line-height: 0.5;
  margin-top: 0;
  margin-bottom: 0;
}

Fügen Sie dem Punkt-Element eine CSS-Animation hinzu

So etwas wie diese hüpfende Animation

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -10px, 0);
  }
}

.bounce {
  animation: bounce 0.4s infinite alternate;
}

Es gibt mehr über CSS-Animationen im CSS-Tricks Almanac.

Zur Überprüfung, hier sind wir bisher

Siehe den Pen
Erstellen des Buchstabens von Ali C (@alichur)
auf CodePen.

Fügen Sie alle verbleibenden Buchstaben des Wortes hinzu

Es ist in Ordnung, das „i“ für sich allein zu animieren, aber vielleicht ist es nur ein Buchstabe in einem Wort, wie „Ping“. Wir packen die animierten Zeichen in ein Span, um sicherzustellen, dass alles auf einer Zeile bleibt.

<p>
  P
  <span>
    <span class="character">.</span>
    <span class="character>ı</span> 
  </span>
  ng
</p>

Es gibt einen automatischen Abstand zwischen Inline-Block-Elementen, also stellen Sie sicher, dass Sie diesen entfernen, wenn der Abstand nicht stimmt.

Die letzten Schritte

Siehe den Pen
Hinzufügen des Buchstabens in ein Wort von Ali C (@alichur)
auf CodePen.

Was ist mit SVG?

Der gleiche Effekt kann erzielt werden, indem ein Buchstabe aus zwei oder mehr SVG-Elementen erstellt wird. Hier ist ein Beispiel, bei dem das Kreiselement unabhängig vom Rechtecke-Element animiert wird.

Siehe den Pen
SVG animiertes i von Ali C (@alichur)
auf CodePen.

Obwohl ein SVG-Buchstabe nicht auf Schriftartänderungen reagiert, eröffnet er mehr Möglichkeiten für die Animation von Buchstabenteilen, die nicht durch Unicode-Zeichen dargestellt werden, und für Buchstabenstile, die in keiner Schriftart existieren.

Wo würden Sie das verwenden?

Wo würden Sie so etwas verwenden wollen? Ich meine, es ist keine großartige Anwendungsfall für den Körperinhalt oder für jegliche Art von Langform-Inhalten. Nicht nur würde das die Lesbarkeit beeinträchtigen (können Sie sich vorstellen, wenn jedes „i“ in diesem Beitrag animiert wäre?), sondern es hätte auch negative Auswirkungen auf assistierende Technologien wie Screenreader, worauf wir als nächstes eingehen werden.

Stattdessen ist es wahrscheinlich am besten, diese Technik dort einzusetzen, wo der Inhalt zur Dekoration gedacht ist. Ein Logo ist ein gutes Beispiel dafür. Oder vielleicht in einem Icon, das beschrieben, aber nicht als Text von assistierender Technologie interpretiert werden soll.

Sprechen wir über Barrierefreiheit

Wenn wir zu unserem „Ping“-Beispiel zurückkehren, wird ein Screenreader das als P . ı ng vorlesen. Nicht gerade die Aussprache, die wir suchen, und definitiv verwirrend für jeden, der es hört.

Abhängig von der Verwendung können verschiedene ARIA-Attribute hinzugefügt werden, damit Text anders vorgelesen wird. Zum Beispiel können wir das gesamte Element als Bild beschreiben und den Text als dessen Label hinzufügen

<div role=img aria-label="Ping">
  <p>P<span>.</span><span>ı</span>ng</p>
</div>

Auf diese Weise beschreibt das äußere div-Element die Bedeutung des Textes, der von Screenreadern vorgelesen wird. Wir möchten jedoch auch, dass assistierende Technologien die inneren Elemente überspringen. Wir können ihnen aria-hidden="true" oder role="presentation" hinzufügen, damit sie ebenfalls nicht als Text interpretiert werden

<div role=img aria-label="Ping">
  <p role="presentation">P
    <span>.</span>
    <span>ı</span>
  ng</p>
</div>

Dies wurde nur auf einem Mac mit VoiceOver in Safari getestet. Wenn es Probleme mit anderer assistierender Technologie gibt, lassen Sie es uns bitte in den Kommentaren wissen.

Mehr Unicode!

Es gibt viele weitere „Buchstaben“, die wir durch die Kombination von Unicode-Zeichen erstellen können. Hier ist eine vollständige Übersicht über gängige Glyphen, oder Sie können mit den unten stehenden Spaß haben und Ihre Kreationen in den Kommentaren teilen. Aber denken Sie daran: Kein cooler Effekt ist es wert, die Barrierefreiheit auf einer Live-Website zu beeinträchtigen!

Erste Glyphe	Zweite Glyphe	Kombiniert
ı	.	i
ȷ	.	j
n	~	ñ
a	e	æ
a	`	à