TypeFlow Pro

This guide covers both tiers. Tier-1 (TextMeshPro) topics come first; the pure-C# Kiln engine follows; shared concepts and reference are at the end.

⤓ Installation

Import once, run the Setup wizard, add a component.

Requirements

• Unity 2021.3 or newer (developed on Unity 6000.0).
• TextMeshPro (com.unity.textmeshpro) for the Tier-1 path.
• An Arabic-capable font with presentation forms for Tier-1 (e.g. Noto Naskh Arabic, Amiri, Cairo, Dubai). A bundled SIL OFL font (Amiri) is included for the demo.

What gets installed

Assets/TypeFlowPro/
  Runtime/        // Unicode (BiDi, segmentation, layout), Fonts (shaping/render),
                  //   Core (pipeline + TypeFlowText), Kiln (Tier-2), TypeFlow (animation)
  Editor/         // Setup Wizard, Font Diagnostics, Conformance Runner, inspectors
  Demos/          // bundled Amiri font + a guided, interactive showcase scene
                  //   (every feature, page by page) you can open and play
  Documentation/  // You are here
  Tests/          // EditMode + PlayMode (run headless via Unity -runTests)Project

⚡ Quick Start: Arabic on TextMeshPro

Correct, joined, right-to-left Arabic on your existing TMP objects — in about ten seconds.

🔥 Quick Start: Kiln Engine (Tier 2)

Render any font with its own OpenType tables — no TextMeshPro, no native code.

⚙ How It Works (Tier 1)

A string becomes correct, animated RTL text in one preprocessing pass.

1. TfpTagParser strips TypeFlow Pro's own animation tags (keeping TextMeshPro markup).
2. ArabicShaper applies logical-order contextual joining + lam-alef ligatures.
3. Bidi.Resolve computes UAX #9 embedding levels and the visual order.
4. Mirroring (rule L4) produces the visual string and a VisualToSource cluster map.
5. TextMeshPro renders the visual string with its own atlas and shaders.
6. TypeFlowAnimator reveals/animates the TMP mesh, using the cluster map so the typewriter follows logical reading order (correct for RTL).

📝 TypeFlow Text

TypeFlowPro.TypeFlowText — the Tier-1 component. Add it to any object with a TMP_Text.

Auto-flip alignment (so RTL text right-aligns automatically) is a serialized option on the component.

🎬 TypeFlow Animator

TypeFlowPro.TypeFlow.TypeFlowAnimator — the animation driver. Add it alongside TypeFlow Text.

Typewriter

Enable the typewriter to reveal text character-by-character. Because reveal follows the cluster map, Arabic appears right-to-left in the correct order, not backwards. Configure characters-per-second, play-on-enable, and a punctuation pause.

Control & events

var anim = GetComponent<TypeFlowAnimator>();
anim.WordRevealed   += w => { /* sync a voice clip per word */ };
anim.EventTriggered += name => { /* react to <event=name> */ };
anim.WaitingForInput += () => ShowContinuePrompt();   // parked at <waitinput>
anim.TypewriterCompleted += () => AdvanceDialogue();

anim.SetTextAndPlay("Hello <wave>world</wave>!<waitinput> Ready?");
if (Input.GetMouseButtonDown(0)) anim.Continue();      // release the wait
progressBar.fillAmount = anim.Progress;                // 0..1
anim.Skip();   // reveal everything nowC#

Common recipes

Dialogue box that waits for input. Use <waitinput> between sentences and call Continue() on a click; WaitingForInput tells you when to show a prompt.

anim.WaitingForInput += () => prompt.SetActive(true);
anim.SetTextAndPlay("Hello, traveler!<waitinput> The road is dangerous.<waitinput> Continue?");

void Update() {
    if (anim.IsWaitingForInput && Input.GetMouseButtonDown(0)) {
        prompt.SetActive(false);
        anim.Continue();
    }
}C#

Word-by-word voice / SFX sync. Reveal whole words and react per word.

anim.Reveal = TypeFlowAnimator.RevealUnit.Word;
anim.WordRevealed += wordIndex => PlayBlip(wordIndex);
anim.Restart();C#

Animate shaped Arabic. Behaviors work on the RTL-shaped glyphs — just tag the text; the typewriter still reveals in correct logical order.

arabicLabel.text = "<wave>مرحبا</wave> <rainbow>بالعالم</rainbow>";
// (TypeFlow Text handles shaping/BiDi; TypeFlow Animator animates the result)C#

Different entrance per word. Override the global entrance per span, optionally with its own timing.

label.text = "<appear=pop ease=back>Bounce</appear> <appear=scale dur=0.8>grow</appear> in!";Text

Auto-hide toast (show → hold → vanish). Reveal, then play the disappearance after a delay.

anim.Disappearance = EntranceStyle.FadeIn;   // reversed for exit
anim.TypewriterCompleted += () => StartCoroutine(HideAfter(2f));
anim.HiddenOut += () => gameObject.SetActive(false);
anim.SetTextAndPlay("Saved!");
// IEnumerator HideAfter(float s){ yield return new WaitForSeconds(s); anim.PlayOut(); }C#

✨ Animation Tags

Inline tags drive per-character motion. They are parsed before TMP sees the text; any other <...> markup passes through to TextMeshPro.

Hello <wave>world</wave>! <shake a=6 f=20>Danger</shake>
مرحبا <wave>بالعالم</wave>Text

Behavior tags — 20 built-in

Close any behavior with its matching tag, e.g. <wave>…</wave>. Attributes: a = amplitude, f = frequency — e.g. <wave a=12 f=3>. Register your own tag in C# with TfpEffects.Register("name", …), or with no code via a Custom Effect ScriptableObject (Create ▸ TypeFlow Pro ▸ Custom Effect) on a TfpEffectRegistrar.

Appearance & disappearance tags

Pacing & dialogue tags

// A dialogue box that waits for the player between sentences
text.text = "Hello, traveler!<waitinput> The road ahead is dangerous.<waitinput> Continue?";
anim.WaitingForInput += () => { /* show a 'press to continue' prompt */ };
// on player input: anim.Continue();C#

🔄 RTL, Alignment & Digits

The details that make mixed-direction text look right.

Bidirectional layout

The full UAX #9 algorithm (including directional isolates) orders mixed Arabic/Hebrew/Latin/number runs correctly. Numbers and Latin words embedded in an RTL line stay left-to-right within the right-to-left flow.

Alignment auto-flip

With auto-flip enabled, a paragraph that resolves to RTL right-aligns automatically, matching reader expectation without you toggling alignment per string.

Digit shaping

Optional contextual digit shaping maps ASCII digits to Arabic-Indic or Eastern Arabic-Indic (Persian) forms based on context, so "2026" can render with native digits where appropriate. Kashida justification and Persian/Urdu presentation forms are also supported.

🔥 Kiln Text (Tier 2)

TypeFlowPro.Kiln.KilnText — a world-space text renderer that shapes and draws a font entirely in C#.

Kiln parses a font's own tables (TrueType glyf and CFF/Type2), applies GSUB and GPOS, rasterizes glyphs to an SDF atlas, and draws them with a MeshRenderer + the KilnSDF shader — no TextMeshPro and no native code.

Complex scripts, color emoji & variable fonts

Feed Kiln the right font and it just works — the component detects the script and picks the shaper, composites COLR/CPAL color emoji as tinted SDF layers, and can interpolate a variable font's axes at runtime:

var kiln = GetComponent<KilnText>();

// Complex script: auto-detected, conjuncts/marks shaped from the font's GSUB/GPOS
kiln.SetFont(devanagariFont.bytes);
kiln.Text = "नमस्ते";          // the स्त conjunct forms (Script = "auto")

// Color emoji: load a COLR/CPAL v0 font and type emoji — rendered in full colour
kiln.SetFont(emojiFont.bytes);
kiln.Text = "🚀❤🎉";

// Variable font: drive a weight (or any) axis live
kiln.SetFont(interVariable.bytes);
if (kiln.HasVariableAxes) kiln.SetVariation("wght", 700f);  // re-interpolates & re-rasterizesC#

Inline effects

Kiln understands the same inline effect tags as the Tier-1 style parser, applied to the glyphs it shapes:

Tags are stripped before shaping, so they never render as literal text. Example: <gradient=FF4040,FFD23E>سلام</gradient> renders joined Arabic with a red→gold vertical gradient on each letter.

🌐 Scripts & Fonts

What the engine shapes today, and the OpenType features behind it.

OpenType features supported

• GSUB: single, multiple, ligature, chaining-context, and extension lookups.
• GPOS: pair, mark-to-base, mark-to-mark, cursive, and extension lookups.
• Variable fonts: fvar axes + gvar deltas.
• Color: COLR/CPAL color glyphs (e.g. emoji) composited as tinted SDF layers.
• Outlines: TrueType glyf (incl. composites) and CFF/Type2; SDF + MSDF rasterization; multi-page atlas.
• Fallback: automatic per-codepoint font fallback across a chain.
• Collections: .ttc TrueType collections (by font index).

🎨 Families, Links & Effects

Rich-text building blocks that work across both tiers.

Font families

Create a Font Family asset (Assets → Create → TypeFlow Pro → Font Family) holding Regular / Bold / Italic / Bold-Italic faces plus optional fallbacks. <b>/<i> then pick the correct face, with CSS-style graceful degradation (faux-bold / faux-italic when a face is missing).

// Whole-text: set the right face + faux style for a bold/italic state
family.ApplyTo(myTmpText, bold: true, italic: false);

// Mixed text: rewrite <b>/<i> into per-run <font> spans
string markup = family.ToTmpMarkup("plain <b>bold</b> text");C#

Clickable links

The easiest path is the TypeFlow Clickable Text component (Add Component → TypeFlow Pro → TypeFlow Clickable Text) on any TextMeshPro label: set its Source to text with <link=id>…</link> markup and wire OnLinkClicked in the inspector. It strips the link tags (other markup like <color> passes through), pushes the clean text to the label, and hit-tests clicks and hover for you.

var clickable = label.gameObject.AddComponent<TfpClickableText>();
clickable.Source = "Visit the <link=home>home page</link>.";
clickable.OnLinkClicked.AddListener(id => { /* the user clicked link 'id' */ });
clickable.LinkHovered += id => { /* hovered link id, or null */ };C#

Under the hood it uses the pure-geometry primitives, which you can also call directly (e.g. for a Kiln layout):

string clean = LinkParser.Parse(source, out var links);
// boxes from TextMeshPro (or your Kiln layout):
var boxes = LinkHitTester.BoxesFromTextMeshPro(tmpText);
string id = LinkHitTester.GetLinkIdAt(localPoint, boxes, links);
if (id != null) { /* the user clicked link 'id' */ }C#

Inline effect tags

StyleTagParser parses <gradient=RRGGBB,RRGGBB>, <outline=RRGGBB,width> and <shadow=RRGGBB,dx,dy> into style spans. The KilnSDF shader supports outline + shadow; gradients apply via vertex colors.

💥 Damage Numbers

Pooled, animated floating combat text — built on the same per-character engine as the rest of TypeFlow Pro, so it does things a generic popup system can't: per-digit entrances, live behaviors, and RTL Arabic-Indic / Persian numbers.

Spawn a number with one call. The first call lazily creates a persistent world-space manager; for full control, drop a TfpDamageNumberManager in your scene or assign your own to TfpDamageNumbers.Default.

using TypeFlowPro.CombatText;

// One-liner — a pooled popup floats up at a world point and fades out:
TfpDamageNumbers.Spawn(150, hitPoint);

// With a no-code style asset (Assets ▸ Create ▸ TypeFlow Pro ▸ Combat Text Style):
TfpDamageNumbers.Spawn(critDamage, hitPoint, critStyle);

// Your own manager — world or canvas, follow a moving enemy, combine rapid hits:
manager.Spawn(heal, enemy.position, healStyle, follow: enemy.transform);C#

The popup style asset

A TfpPopupStyle is a ScriptableObject that defines the whole look — no code. Hand it to Spawn. (Leave it out and the manager uses a sensible default.)

Components & API

🏗 Two-Tier Architecture

One package, two ways to put correct text on screen.

The two tiers share the same Unicode foundation (BiDi, segmentation, shaping) — a clip of Arabic text shapes identically whether TMP or Kiln renders it.

✅ Unicode Conformance

Measured against the official Unicode test suites and enforced by regression-floored tests.

Reproduce them yourself: run the UnicodeConformanceTests and BidiCharacterConformanceTests headlessly. Each test prints its pass rate and asserts a regression floor, so conformance can't silently slip.

🔧 Editor Tools

Under Tools → TypeFlow Pro.

📙 Scripting API

The stable public surface. Namespaces: TypeFlowPro, TypeFlowPro.Unicode.BiDi, TypeFlowPro.Fonts.Shaping, TypeFlowPro.TypeFlow.

Common usage

using TypeFlowPro;
using TypeFlowPro.Unicode.BiDi;

var tfp = GetComponent<TypeFlowText>();
tfp.BaseDirection = BaseDirection.Auto;
tfp.EnableArabicShaping = true;
tfp.Refresh();C#

Pipeline & BiDi (engine-level)

// One-shot processing without a component:
ProcessedText p = TypeFlowProcessor.Process(logical, ShapeSettings.Default);
// p.Visual, p.ParagraphLevel, p.VisualToSource, p.IsRightToLeft

// Raw bidirectional resolution:
BidiResult b = Bidi.Resolve(text, BaseDirection.Auto);
// b.ParagraphLevel, b.Levels, b.VisualToLogicalC#

Key types

💡 Troubleshooting

The issues that come up most, and how to fix them.

❓ FAQ

Quick answers to the questions that come up most.

📬 Support

Need help? We're here for you.