Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android text lineheight doesn't match Web or Windows #1062

Open
vwmberry95 opened this issue Mar 31, 2021 · 2 comments
Open

Android text lineheight doesn't match Web or Windows #1062

vwmberry95 opened this issue Mar 31, 2021 · 2 comments

Comments

@vwmberry95
Copy link

Expected Behavior

Black text should cover up red images:

Web_Windows

Current Behavior

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

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
Copy link

dijitaletkinlikler commented Apr 1, 2021

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
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants