Text (rtl) are not show on ios (safary and chrome) -

[liorGameDev]

Version

• Phaser Version: 3.24.1

• Operating system: ios

• Browser: chrome / safari

Description

When runing my game on ios devices, the text (rtl) is not shown. On desktop and on Android it works fine. On ios it doesn't work on chrome nor safari.

Example Test Code

import { GameObjectExtender, TextObjectExtender, TextUtil } from ".";
import { textStyles } from '../GameConfig';

export default class ExtraText extends Phaser.GameObjects.Text {
  constructor(scene, x, y, text, config, noTranslateText) {
    config = config || textStyles.getStyle();
    if (!config.metrics) {
      config.metrics = TextUtil.getMetricsFromFont(config.fontFamily, parseInt(config.fontSize));
    }

    super(scene, x, y, text, config);

    if (!config.metrics) {
      TextUtil.addFontMatrix(config.fontFamily, parseInt(config.fontSize), this.getTextMetrics());
    }

    this.initRTL();
    
    if (noTranslateText) {
        this.setText(this.text, noTranslateText);
    }
    scene.add.existing(this);

    GameObjectExtender(this);
    TextObjectExtender(this, config.align);
  }

  setText(text, noTranslateText) {
    if (!isNaN(text)) {
      super.setText(text);
      return;
    }
    let translated = TextUtil.translate(text);
    if (noTranslateText) {
        translated += noTranslateText;
        text += noTranslateText;
    }
    super.setText((translated || text));
  }

  destroy() {
    super.destroy();
  }
}

Additional Information

[javurtez]

Had the same problem. Don't use the text style to initiate the RTL, instead use its function, which is text.initRTL().

[liorGameDev]

@javurtez Thank you very much for the response. I added the code to the issue + using the text.initRTL() as you suggested. It seems not to work. Do you have any idea why? did it work for you?

[javurtez]

@javurtez Thank you very much for the response. I added the code to the issue + using the text.initRTL() as you suggested. It seems not to work. Do you have any idea why? did it work for you?

Did you also use the text style to initiate the font family and font size? If that's the case, then you should also 'setFontFamily' and 'setFontSize'.

[javurtez]

Okay, after rechecking the problem again in iOS15, I think the workaround for this is after setting the textObject.text/textObject.setText to a new text string, or even adjust the fontSize, you need to call 'initRTL' and then 'setWordWrapWidth'.

Also, font size should also be not large.

let textObj = scene.add.text(0, 0, 'این یک آزمایش است.', { 
   fontFamily: font, 
   fontSize: size, 
   color: color, 
   rtl: true
});

// without calling the functions below, rtl doesn't show
textObj.initRTL();
textObj.setWordWrapWidth(600);

or

let textObj = scene.add.text(0, 0, '', { 
   fontFamily: font, 
   fontSize: size, 
   color: color, 
   rtl: true
});

textObj.setText('این یک آزمایش است.');
// textObj.text = 'این یک آزمایش است.';

// without calling the functions below, rtl doesn't show
textObj.initRTL();
textObj.setWordWrapWidth(600);

or

let textObj = scene.add.text(0, 0, 'این یک آزمایش است.', { 
   fontFamily: font, 
   color: color, 
   rtl: true
});

textObj.initRTL();
textObj.setWordWrapWidth(600);


// any adjustments of the text will make the text get hidden again unless call the initRTL and setWordWrapWidth
textObj.setFontSize(size);

// without calling the functions below, rtl doesn't show
textObj.initRTL();
textObj.setWordWrapWidth(600);

@photonstorm @liorGameDev

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.