Capítulo 181 de 411

Chapter 181: Split Arabic Text Respecting Letter Shape (Helper)

Core Idea

A helper that wraps SplitText so Arabic text (which is cursive — each letter can render differently depending on its position in a word) can still be split into words/lines for animation without characters visually breaking apart from their neighbors.

Key Concepts

  • Splits at the word (and optionally line) level via a normal SplitText call, but uses SplitText's onSplit callback to post-process word elements so individual character shaping/joining is preserved instead of being isolated.
  • Accepts the same type config as SplitText ("chars,words,lines" by default) plus an optional pass-through onSplit.
  • Necessary specifically because naive character-level splitting breaks Arabic's contextual letter shaping (isolated/initial/medial/final forms).

Key Takeaways

  1. Use this instead of plain SplitText whenever animating Arabic (or other cursive-script) text by character.

Connects To

  • SplitText: the plugin this helper wraps and post-processes.