# Show and hide letters dynamically

You can use `Typewriters` to show and hide letters dynamically, choosing different pauses for any kind of characters (punctuation, letters, \[…]), trigger events and more.

{% hint style="info" %}
A typewriter uses its linked Text Animator **Time Scale** to progress time, you can read more here: [time-scale](https://docs.febucci.com/text-animator-godot/effects/edit-effects/time-scale "mention")
{% endhint %}

***

## Showing Text

There are different types of typewriters, for example “`By Character`” which shows one letter after the other, or “`By Word`” which progresses text word after word.

### Implementing Typerwriters

You just need to add the `TypewriterByCharacter`  (or `TypewriterByWord`) as a child of the `RichTextLabel` controlled by a TextAnimator. Then link the target TextAnimator to the Typewriter.

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FOBU0r53zLQe4TvNqTqWX%2Fimage.png?alt=media&#x26;token=c9c29787-9919-4690-a1f4-64fd3cd07bdd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FKv4IGbPGKzog2o4YcRTd%2Fimage.png?alt=media&#x26;token=81f2f585-5673-46fd-9714-99815bf63821" alt="" width="395"><figcaption></figcaption></figure>

{% hint style="success" %}
:thumbsup: Now you're ready to start showing text dynamically.
{% endhint %}

***

After adding your typewriter, you can start it as shown below:

### Via Code (Recommended)

Replacing “`tmproText.text = textValue;`” with `typewriter.ShowText(textValue);` in your code.

{% hint style="danger" %}
Please don't miss this step if you're setting the text via code! If you're having issues, take a look at the [best-practices](https://docs.febucci.com/text-animator-godot/other/best-practices "mention")
{% endhint %}

***

## Controlling Letters

### Start and Stop Typing

Inside the component’s Inspector you’ll find some options to control how the typewriter start should be triggered:

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2F7NKFH1E4pwNdrGOnGjT3%2Fimage.png?alt=media&#x26;token=b27ec39f-962b-46dc-9850-255e75844662" alt=""><figcaption></figcaption></figure>

* `Start Typewriter Mode`: tells the typewriter when to start showing letters.

<table><thead><tr><th width="287.6363525390625">Value</th><th>Explanation</th></tr></thead><tbody><tr><td><strong>From Script Only</strong></td><td>The typerwiter can only be started by invoking <code>Typewriter.StartShowingText()​</code></td></tr><tr><td><strong>OnEnable</strong></td><td>The typewriter starts every time the RichTextLabel is set active</td></tr><tr><td><strong>OnShowText</strong></td><td>The typewriter starts as soon as a new text is set (<a href="#showing-text">as explained in the “Showing Text” section</a>)</td></tr><tr><td><strong>Automatically From All Events</strong></td><td>All of the above</td></tr></tbody></table>

{% hint style="success" %}
You can pause the typewriter at any time by invoking typewriter.StopShowingText(), and you can start/resume it by invoking typewriter.StartShowingText().
{% endhint %}

***

{% hint style="info" %}
You can create your own typewriter (read [here](https://docs.febucci.com/text-animator-godot/extra-customization-via-c/writing-custom-typewriters-c) how to create a custom typewriter via C#) or you can use the built-in one.
{% endhint %}

## Callbacks (Godot Signals)

You can connect Godot Signals that will be triggered based on the typewriter activity (example: when it just ended showing text).

<table><thead><tr><th width="237.6363525390625">Signal</th><th>Explanation</th></tr></thead><tbody><tr><td><code>OnTextShowed</code></td><td>Signal called after the entire text has been shown (<em>if you’ve set “Use Typewriter” to true, it will wait until all letters are shown</em>)</td></tr></tbody></table>

The following below only work if the “**use typewriter**” is set to **true**:

<table><thead><tr><th width="239.45452880859375">Signal</th><th>Explanation</th></tr></thead><tbody><tr><td><code>OnTypewriterStart</code></td><td>Called right before the typewriter starts showing its first letter. It doesn’t work if the typewriter is off, since it would coincide with the “OnTextShowed” event <em>(in this case you can use that one instead)</em></td></tr><tr><td><code>OnCharacterVisible(Char)</code></td><td>Called each time a character became visible</td></tr></tbody></table>

{% hint style="info" %}
You can hover the mouse above the typewriter options (e.g. delays) to show some tooltips and extra information!
{% endhint %}