Bug: BitmapFont of 'Courier New' cannot display '_'

[2kking]

Current Behavior

BitmapFont of 'Courier New' cannot display '_'

Expected Behavior

BitmapFont of 'Courier New' can display '_'

Steps to Reproduce

document.fonts.ready.then(() => {
  PIXI.BitmapFont.from("Courier New", {
    fontFamily: "Courier New",
    fontSize: 50,
    fill: "purple",
  },{
    chars: "Test_001"
  });

  const title = new PIXI.BitmapText("Test_001", {
    fontName: "Courier New"
  });

  const app = new PIXI.Application({
    backgroundColor: 0xEEEEEE,
    width: 600,
    height: 200,
  });
  document.body.appendChild(app.view);
  app.stage.addChild(title);
});

Environment

• pixi.js version: 7.4.2
• Browser & Version: all
• OS & Version: all
• Running Example: https://jsfiddle.net/shadowxs/fnwt17L9/27/

Possible Solution

No response

Additional Information

No response

[bigtimebuddy]

I did a little more digging:

Before: https://jsfiddle.net/bigtimebuddy/8ft3c5rh/14/
After: https://jsfiddle.net/bigtimebuddy/8ft3c5rh/17/

The reason underscore is drawn outside the text bounds for the Courier New character is because of how we measure the text (i.e., TextMetrics.METRICS_STRING). In general, we are giving TextMetrics some standard characters which have large ascenders and descenders. But, this doesn't work for all typefaces (but does work for Arial, Times and other typefaces I tried).

https://github.com/pixijs/pixijs/blob/9104ebd911ac97cd58928d476b588061fa2ad680/packages/text/src/TextMetrics.ts#L107C19-L107C33

The solutions here is to add TextMetrics.METRICS_STRING += '_' to consider underscores when calculating the text bounds.

I don't think we should add underscore to this setting. It'll always be the case that some typefaces have larger ascenders or descenders on certain characters. We do not have the ability to read the font vectors itself. My suggestion is to adjust the TextMetrics for your use cases.