Android text lineheight doesn't match Web or Windows

[vwmberry95]

Expected Behavior

Black text should cover up red images:

Current Behavior

Black text only covers up some of the red images when viewed in Android:

Steps to Reproduce

Create several text elements in createJS and set lineheight values and set color to red. Then use PIXI to render text. Take image of canvas and set as background. Then change all text to black. Black text should cover up red images.

Environments

Latest CreateJS PixiJS 5.3.4 Windows 10 Chrome 89 Android 9

When viewing in Chrome or Chromium it appears fine. When viewing in Android, the lineheight values are off for some fonts.

[dijitaletkinlikler]

Here's how I solve this problem with createjs. Someone shared this code before:

var cache = {} createjs.Text.prototype._drawTextLine = function (ctx, text, y) ( this.textBaseline = ctx.textBaseline = "alphabetic"; if (! (this.font in cache)) { var metrics = this.getMetrics (); cache [this.font] = metrics.vOffset; } var offset = cache [this.font]; if (this.outline) { ctx.strokeText (text, 0, y - offset, this.maxWidth || 0xFFFF); } else { ctx.fillText (text, 0, y - offset, this.maxWidth || 0xFFFF); } };

I am adding gold FontFace right away.

var isIE =false || !!document.documentMode; var tarayiciEdge = !isIE && !!window.StyleMedia;

if(!tarayiciEdge){

const dikTemelYazi = new FontFace('Dik_ABC_1_Normal', 'url(../../../genelScriptsCss/fontStyle/Dik__ABC_1_Normal.ttf)');
const dikTemelYaziCizgili = new FontFace('Dik_ABC_6_Noktali_Kılavuzlu', 'url(../../../genelScriptsCss/fontStyle/Dik_ABC_6_Noktali_Kılavuzlu.ttf)');

dikTemelYazi.load().then((font) => {
  document.fonts.add(font);

    console.log('Font loaded');

})

dikTemelYaziCizgili.load().then((font) => {
  document.fonts.add(font);

    console.log('Font loaded');

})

}

[vwmberry95]

Thanks for the reply, that got me pointed in a direction that yielded more testing results.

In the screenshots above, I'm using "ideographic" baseline. If I switch to "alphabetic" baseline, then they match. Unfortunately, my project requires that I use "ideographic" baseline.

The fact that "alphabetic" matches up but "ideographic" doesn't, does that help identify the cause of this issue?