# How to justify text that appears character-by-character

I'm currently using the latest version of phaser framework and I have a problem to which I haven't been able to figure out how to approach.

I need to have a block of text appear letter by letter and also be justified as a block. (I'm working on a text-based game project).

Text typed letter by letter is functional, but my issue is with justification: it has issues like some words first appearing on a line and then being removed and placed in the next line.

This is my code so far:

    addTextParagraph(text) {
//  We check the current GAME STATE.
//  During exploration (SCOUTING_STATE), text is in typewriter mode.
if (gameState === SCOUTING_STATE) {
this.typewriteText(text);
}
}

typewriteText(text) {
let delayedCallback;
let length = text.length;
let i = 0;

callback: () => {
this.textParagraph.text += text[i]
++i
// Callback after typewriter text is complete.
// Delay before the choices appear in the screen (in ms)
if (i >= length) {
i = 0;
delayedCallback = this.time.delayedCall(200, this.addChoiceArray, [], this);
}
},
repeat: length - 1,
delay: 40,
})
}


Thanks.

• @JamesAlex I don't quite understand. Your original description sounded like you are using layout provided by the engine but had problems with it jumping around; my answer addresses that. Your comment sounds like you're trying to lay out the text yourself, which is a different problem. (I see that Phaser is browser-based; for full justification you can use CSS text-align: justify; and this will be more reliable than inserting your own spaces, though it won't stick to a monospace grid.) – Kevin Reid Mar 26 at 16:36
• @JamesAlex However styled text works in the engine you're using. You make two styled spans, one of which contains the substring of text from 0 to i and the other of which contains the substring of text from i to text.length. Update both of them when you want to add a character. – Kevin Reid Mar 26 at 17:52