Cannot update right-aligned text without expanding width of parent container

[RobertAKARobin]

Yes, I looked at prior related issues: #4341, #4002, #3476

I'd like to create a piece of text, align it to the right of the screen, then update the text, while keeping it aligned to the right of the screen.

Here's my first approach, using anchor.x = 1:
https://jsfiddle.net/r63ud8yL/1/

const app = new PIXI.Application({resizeTo: document.body, backgroundColor: 0xFFFFFF})
document.body.append(app.view)

// Forcing app.stage to occupy width of screen
// Is there a better way to do this?
const neCorner = new PIXI.Sprite()
neCorner.x = 0
neCorner.y = 0
const swCorner = new PIXI.Sprite()
swCorner.x = document.body.clientWidth
swCorner.y = document.body.clientHeight
app.stage.addChild(neCorner, swCorner)

const text = new PIXI.Text('first')
app.stage.addChild(text)
text.anchor.x = 1

// Align text to right edge
text.x = app.stage.width

// Replacing text with a longer string
text.text = 'second'
// It extends past the edge of the window; only 'sec' is visible

Here's my second approach, using (stage.width - text.width), which has the exact same result:
https://jsfiddle.net/r63ud8yL/2/

const app = new PIXI.Application({resizeTo: document.body, backgroundColor: 0xFFFFFF})
document.body.append(app.view)

// Forcing app.stage to occupy width of screen
// Is there a better way to do this?
const neCorner = new PIXI.Sprite()
neCorner.x = 0
neCorner.y = 0
const swCorner = new PIXI.Sprite()
swCorner.x = document.body.clientWidth
swCorner.y = document.body.clientHeight
app.stage.addChild(neCorner, swCorner)

const text = new PIXI.Text('first')
app.stage.addChild(text)

// Align text to right edge
text.x = (app.stage.width - text.width)

// Replacing text with a longer string
// It extends past the edge of the window; only 'sec' is visible
text.text = 'second'

// Attempting to align text to right edge again...
text.x = (app.stage.width - text.width)
// ...but the longer text expanded the width of app.stage
// so still only 'sec' is visible

I suppose I could store the original width of app.stage and align my text to that, but I would prefer to not need to store that value. It seems to me that there should be a way to get single-line text to "flow" from right to left from a permanent anchor. Am I missing a step?

Environment

• pixi.js version: 5.1.0
• Browser & Version: 75.0.3770.142
• OS & Version: Macbook Pro, OS 10.13.6
• Running Example: https://jsfiddle.net/r63ud8yL/1/, https://jsfiddle.net/r63ud8yL/2/

[mofnire]

How about this? (If the parent bounds is static.)

https://jsfiddle.net/5o0yjusv/

If the bounds of the parent change unpredictably, need to calculate its bounds excluding the text, I think.

https://jsfiddle.net/2xwb9yk8/

[themoonrat]

Here's my take: https://jsfiddle.net/b9zp5kuh/

Just go straight to using the width of the renderer itself.

[RobertAKARobin]

Thanks, @themoonrat . This got me on the right track. I'm going to go with app.screen instead of app.renderer. My window.devicePixelRatio is 2, so the width of the renderer is 2x the "actual" width of my window. app.screen is 1x, though.

[themoonrat]

Yeps that makes sense! When doing anything 'pinning', you have to work in exact known pixels, and container widths / heights don't work well for that because they're dynamic to the area of their children.