- Home /
Text Alignment for Typing Effect
The Problem - Horizontal Word Bump
When creating a 'typing effect', where each text character appears one at a time, a word which reaches the horizontal max of a text field will exhibit a jump effect. Such that it begins to appear on Row1, but as soon as the next character of the word hits the horizontal max, it'll jump the entire word to Row2.
The correct typing effect should have the word begin on Row2 if the length of the word exceeds the horizontal max. Dynamically fitting any given changes to the size of the horizontal max.
The Current Solution - Context Size Fitter
Knowing the length of any given text isn't as trivial as it sounds. It isn't just the number of the characters in a given word, but also the font type, size, kerning, or any other text spacing can all affect how much space it actually takes up.
Digging around the Unity documentation, I couldn't really find anything besides the Content Size Fitter to determine whether or not a given word is fitting inside the text field.
https://docs.unity3d.com/Manual/script-ContentSizeFitter.html
That is the Content Size Fitter will help return the size of the text window regardless of Font Type Settings.
So to start, I have a Sentence with no newline formatting (line breaks) to it. A long sentence with no vertical blocks of whitespace.
I parse the Sentence into words, and then pass each word into the text field to determine the width. Such that, when each word is added it will increase the width of the Text Window (Content Size Fitter is set to Preferred Size with no min or max width).
Since the Text Window is growing in size when a word is added, all I have to do then is tell it where the Max Width is. And if the next word added hits or exceeds the Max Width, I then append a newline to the Sentence at that point.
What is returned (after the code is done running) is a formatted Sentence with newlines added such that it'll fit inside the given window parameters. So now with his New Sentence, the typing effect won't have the jarring effect of bumping a word to the next row.
The Flaw with this Solution
It isn't eloquent, the code requires to go through each and every single word in the Sentence. It needs to format the Sentence(s) before returning it back, which is then fed to the Typing Effect to display each character over time. You could imagine how costly this operation grows when it's formatting long paragraphs of sentences.
Content Size Fitter also requires a wait for the next frame to return the correct size of the Text Window. Such that, if you change the Text and call to get the Text Window width, it'll return the previous width oppose to the updated one.
Help - Suggestions
While it's possible to just hardcode every Sentence in, this comes at the cost of flexibility over overhead efficiency. Meaning, a person has to go over each and every single Sentence to see if it fits correctly in a given window size. Hardcoding also means you can't scale this to different Text Window Sizes. Meaning if the resolution changes, the hardcoded Sentence(s) wouldn't adjust to fit the new dimensions.
If you have any other ideas or approach to clean this up, I'll much appreciate the help. Thank you.