Incorrect letter spacing in both tangram-es and js for many shaped languages

[tallytalwar]

Look at the name for North America (उत्तरी अमेरिका). I think I have mentioned about this issue in some other mapzen base style and the underlying problem was how " " was being used, or on those lines. Will try to dig the issue if I can, or else @nvkelso might remember this too (quite confident I discussed this and solved it with him).

[tallytalwar]

I thought we had addressed this in another style but looks like all styles have this issue.
Its because of the split done on " " and replacing it with a "\n". Refer:

refill-style/refill-style.yaml

Lines 108 to 109 in bd579c7

	name = name.split(' ').join('\n');
	return name.split('').join(' ');

Won't work for many other languages (not just indic).

[tallytalwar]

I can reproduce the same issue in tangram js also.

[matteblair]

I can't read Hindi but even I can tell that ain't right 😂

The join('\n') seems like it can (read: should) be replaced with a text_wrap parameter, which will handle RTL and shaped scripts correctly.

The join(' ') seems like it's emulating "expansion" for the font (not sure if there's another name for this, but "expansion" is what CoreText and TrueType call it). I think we could add a draw parameter for text expansion in Tangram ES - not sure about JS. More immediately, we could add a conditional in this function to skip that step if the chosen language is in a "blocklist" of shaped languages.

[tallytalwar]

That sounds reasonable (with respect to disabling for blocklist of shaped languages) to me @matteblair. Thanks

[matteblair]

Oh I just realized - adding spaces between letters makes it such that text_wrap won't work as expected because it will be applied on the output string. The spaces make it such that a line break can go anywhere in the word. So unless the "expansion" can be done properly in the font rendering, text_wrap won't be usable here :\

[nvkelso]

Can we apply non breaking space?

…

On Tue, Jul 7, 2020 at 11:53 Matt Blair ***@***.***> wrote: Oh I just realized - adding spaces between letters makes it such that text_wrap won't work as expected because it will be applied on the output string. The spaces make it such that a line break can go anywhere in the word. So unless the "expansion" can be done properly in the font rendering, text_wrap won't be usable here :\ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#94 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGQIO4UUSXSOVUEJGNGHE3R2NVKBANCNFSM4ORANGWA> .

[matteblair]

Looks like maybe font-stretch is what "text expansion" is called in CSS. Does this property work with Canvas font rendering?

[nvkelso]

CSS letter spacing would add space between the characters.

Font stretch instead exaggerates the letter forms themselves and generally should only be used for fitting text inside a constrained area (like body text on a web page... or perhaps to get a line (road) text label to fit by adjusting it just a smidge.