TechPrufer
Get started
Meta
Meta logoMeta · Feature trail

Text Styling and Animation Framework

1 post · Jul 2022

What this trail covers

Instagram's text tools for Stories and Reels have evolved to include a comprehensive suite of dynamic text styles and animations. This includes ensuring consistent styling across all text types, introducing a user-friendly text style picker, and developing a robust system for managing and delivering fonts and other assets. The framework now supports complex text rendering features like ligatures, RTL text, emojis, and custom spans for emphasis and selective coloring, enabling richer user expression.

All Meta trails
  1. Building text animations for Instagram StoriesThis post details the engineering challenges and solutions for building new text styles and animations for Instagram Stories and Reels. Key contributions include: 1. Developing a custom solution using Everstore (based on Haystack) for downloading, caching, and registering fonts on Android, overcoming APK size limitations and the shortcomings of Google's Downloadable Fonts framework. 2. Designing and implementing complex text animations, including a 'Directional' style with a filled background and a 'Classic' style using linguistic tokenization for word-by-word reveals. 3. Addressing Android-specific rendering challenges such as ligatures, RTL text, emojis, and custom spans for text color and emphasis, by leveraging TextPaint, Canvas#drawText(), and BreakIterator. 4. Debugging native Android crashes related to file cleanup in the asset fetching infrastructure.