Numbers and symbols mixed with CJK text are misaligned

[cs09g]

mapbox-gl-js version:
master branch

Question

I upgraded mapbox-gl-js version to master from 0.50.0. Texts including unicode, number were displaying alright but with master.

with v0.50.0 (also okay with v0.53.1)

with master

Texts' font looks a bit different and the vertical positions are different between special characters/numbers and unicode string.

I have checked its style from layer info, it sets the same properties.
Any changes made on the text-fields since v0.53.1? so I can modify the part of causing this issue.

p.s. the reason why I tried to upgrade was #7614

Thanks.

[mourner]

Weird! Can you provide us with a minimal reproducible live test case for this? We'll bisect to the offending commit.

[cs09g]

Maybe it can be tested from adding symbol with the similiar pattern of text(Korean, special character, number) and the same font on the map. The font is NanumGothicBold.

[mourner]

@cs09g please set up a JSFiddle — that would help us a lot.

[cs09g]

I would like to share my screen but it's on developing and private for the company yet.
I have to check whether the reason's on the font or some part of the library.
Changing text from mapbox base sample doesn't make the problem.
https://jsfiddle.net/cs09g/xbL0m4og/13/

---

I could modify its position by fontforge but I can't handle the blurring effect. Surely something wrong with the library.

[cs09g]

@mourner This is not happening on tags/v0.53.1 but master. Could you verify this issue?

[mourner]

@cs09g did I understand correctly that the JSFiddle above does not reproduce the problem? I still can't verify it unless there's a minimal public test case.

[mourner]

I suspect this is caused by #8008. Can you confirm that the issue is solved by passing localIdeographFontFamily: false as a map option?

[cs09g]

@mourner Thanks, I confirm it solves the issue!

[exotfboy]

I have met this same issue before, and it is not caused by the engine but the font used in the style.

Different font result in different appearance. Seems like caused by the different baseline in the font, maybe this can be adjusted by the engine.

[cs09g]

@exotfboy engine may not be able to handle the font's baseline. baseline is on each characters of the font.

[exotfboy]

Seems like that the miss-aligned is caused by different parts of the text rendered by different font.

See this example : https://jsfiddle.net/s4wgqac5/

When using font Arial Unicode MS Regular all the characters including cjk, eng and number are aligned correctly.

When using font Ubuntu Regular, Arial Unicode MS Regular, the cjk is rendered by Arial Unicode MS Regular since the Ubuntu xx does not contains the cjk charecters, and the rest of the text are rendered by Ubuntu.

I am not sure if this can be adjusted.

[cs09g]

Right, that's why we use fontforge to edit its align manually for those fonts.

[exotfboy]

Really? Could you show us how to adjust the alignment of a certain font by fontforge?