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 these into style spans applied by the Kiln SDF renderer. Gradients apply via per-glyph vertex colours; the rest are computed in the KilnSDF shader (crisp at any size, resolution-independent, ~free, WebGL-safe). All tags nest and stack, and work on any script including Arabic/RTL.

Example: <outline=101018,0.1><bevel=1.6,0.2,120>STEEL</bevel></outline> or <glow=39E6FF,2.2,0.4>NEON</glow>. See the SDF Effects page in the showcase.

💥 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

✨ 3D & more

Further v4 capabilities — most have a live page in the bundled showcase to try.

🏗 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.

📋 Included vs Scope

A buyer-facing map of what ships in this package, what needs your own project assets, and what TypeFlow Pro does not try to be.

✅ 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.

📜 Licenses & Notices

Everything legal in one place. The same notices ship as plain text in Third-Party Notices.txt at the package root, with the font licence also at Demos/Fonts/Amiri/OFL.txt.

Copyright 2010-2022 The Amiri Project Authors (https://github.com/aliftype/amiri).



This Font Software is licensed under the SIL Open Font License, Version 1.1.

This license is copied below, and is also available with a FAQ at:

https://openfontlicense.org/





-----------------------------------------------------------

SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

-----------------------------------------------------------



PREAMBLE

The goals of the Open Font License (OFL) are to stimulate worldwide

development of collaborative font projects, to support the font creation

efforts of academic and linguistic communities, and to provide a free and

open framework in which fonts may be shared and improved in partnership

with others.



The OFL allows the licensed fonts to be used, studied, modified and

redistributed freely as long as they are not sold by themselves. The

fonts, including any derivative works, can be bundled, embedded, 

redistributed and/or sold with any software provided that any reserved

names are not used by derivative works. The fonts and derivatives,

however, cannot be released under any other type of license. The

requirement for fonts to remain under this license does not apply

to any document created using the fonts or their derivatives.



DEFINITIONS

"Font Software" refers to the set of files released by the Copyright

Holder(s) under this license and clearly marked as such. This may

include source files, build scripts and documentation.



"Reserved Font Name" refers to any names specified as such after the

copyright statement(s).



"Original Version" refers to the collection of Font Software components as

distributed by the Copyright Holder(s).



"Modified Version" refers to any derivative made by adding to, deleting,

or substituting -- in part or in whole -- any of the components of the

Original Version, by changing formats or by porting the Font Software to a

new environment.



"Author" refers to any designer, engineer, programmer, technical

writer or other person who contributed to the Font Software.



PERMISSION & CONDITIONS

Permission is hereby granted, free of charge, to any person obtaining

a copy of the Font Software, to use, study, copy, merge, embed, modify,

redistribute, and sell modified and unmodified copies of the Font

Software, subject to the following conditions:



1) Neither the Font Software nor any of its individual components,

in Original or Modified Versions, may be sold by itself.



2) Original or Modified Versions of the Font Software may be bundled,

redistributed and/or sold with any software, provided that each copy

contains the above copyright notice and this license. These can be

included either as stand-alone text files, human-readable headers or

in the appropriate machine-readable metadata fields within text or

binary files as long as those fields can be easily viewed by the user.



3) No Modified Version of the Font Software may use the Reserved Font

Name(s) unless explicit written permission is granted by the corresponding

Copyright Holder. This restriction only applies to the primary font name as

presented to the users.



4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font

Software shall not be used to promote, endorse or advertise any

Modified Version, except to acknowledge the contribution(s) of the

Copyright Holder(s) and the Author(s) or with their explicit written

permission.



5) The Font Software, modified or unmodified, in part or in whole,

must be distributed entirely under this license, and must not be

distributed under any other license. The requirement for fonts to

remain under this license does not apply to any document created

using the Font Software.



TERMINATION

This license becomes null and void if any of the above conditions are

not met.



DISCLAIMER

THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF

MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT

OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE

COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL

DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM

OTHER DEALINGS IN THE FONT SOFTWARE.