Full "complex text" support: indic scripts, ligatures, kerning, etc.

[ChrisLoer]

GL JS now supports right-to-left (and bidirectional) text, along with text shaping for languages that use the Arabic script (#3708). There are a number of further features that fall under the category of "complex text" that remain to be addressed:

• Shaping for Brahmic/Indic scripts
• Shaping with basic OpenType support for ligatures and kerning in Latin fonts
• Shaping with support for more advanced typographic features (such as Apple Advanced Typography)
• Language aware line-breaking algorithms. This is an improvement for languages like Chinese or Japanese, where current line breaking is sub-optimal in that it will easily break inside of compound words. Language aware line-breaking is much more important for languages like Thai or Lao where finding acceptable breaking points requires the use of a dictionary.

The first two items can be implemented using Harfbuzz. More advanced typography as in item three would probably require passing through to system libraries (such as Apple's Core Text). Line-breaking can be implemented using ICU, but a standard implementation would require client-side line breaking dictionaries which are likely to be prohibitively large.

Mapbox Classic supports basic shaping using Harfbuzz via Mapnik, but I don't believe it has support for language-aware line breaking or advanced typographical features.

Because library support for text shaping and internationalization is much better in the C/C++ world (in most of the JS world, the browser can do it all for you), we'll generally implement this functionality first in gl-native (see mapbox/mapbox-gl-native#7774) and then figure out how to port back to gl-js.

@1ec5 @lucaswoj @pveugen

[anthony-toezin]

Hi, is there any updates on the "Shaping for Brahmic/Indic scripts" feature?

[ChrisLoer]

Hi @anthony-toezin, I don't have any specific update -- we're still looking for incremental opportunities to build towards full support. One thing that has changed is that we now have a limited capability to render glyphs locally with #4895, but we still don't have a shaping capability. The Emscripten project has continued to become more efficient, which means cross-compiling Harfbuzz to asm.js or wasm looks more and more practical.

One of the blockers for us is that we need to build a business case for all the server-side infrastructure we'd need to build to support client-side text shaping. If you can provide some information about what use cases it would unlock for you, that would help us build the case. 🙂

[anthony-toezin]

Thanks for the fast response @ChrisLoer . I wasn't aware of TinySDF. I just checked it out today, and I'm having some trouble wrapping my head around it. Do you have a working code example where you use it to render the glyphs of a mapbox map by calling the TinySDF function?

I came across this from you.

https://chrisloer.github.io/tiny-sdf/index.html#8.8/31.1489/121.574

When I looked at the html tho it looks like you are passing a parameter(cjkGlyphFont) to the mapbox object rather than calling the TinySDF function directly. So it looks like you have this working out of the box for mapbox gl js. But I found in the mapbox gl js documentation that it only supports CJK Unified Ideographs and Hangul Syllables ranges. The map you demonstrated in Chinese looks good to me, so I'd be curious to try this out for Burmese.

I'm working to provide navigation tools to people in Myanmar, where the majority of people rely on local knowledge and asking others to find their way around. We're using mapbox to build our product, but users being unable to read the map in their local language is a big problem. Google maps still doesn't have much of a presence in this part of the world. I think many people would prefer to have greater ownership of the map experience which is why they go with Mapbox. The absence of Google Maps coverage here makes it all the more compelling to use Mapbox vs Google Maps, so being able to render in Burmese would go a long ways towards making mapbox the obvious choice.

[anthony-toezin]

[anthony-toezin]

I also played around with your demo for the TinySDF, looks like it's not arranging the diacritics correctly for Myanmar unicode, but I need to spend more time to see what's going on.

[ChrisLoer]

Hi @anthony-toezin sorry it may have been misleading for me to cite TinySDF as "progress" -- although it is potentially useful because it allows us to render glyphs on the client side instead of sending them down from the server, it doesn't give us any capability to do complex text shaping, and in fact when we use TinySDF we don't even get glyph "metrics" back (how high, how wide, what advance, etc.). The reason mapbox's use of TinySDF is restricted to CJK glyphs is that CJK glyphs can be treated as fixed-width/fixed-height so we can get around the limitations. We use it to reduce map load times, without any significant change in appearance. What you're seeing in Myanmar script is what we'd expect. On the iOS side we recently put together a hack that uses TinySDF in combination with the Apple CoreText APIs to render southeast asian languages -- but it depends on an Apple API that's not available on the browser/JS side.

Thanks a lot for adding some detail about your project -- that's very helpful for us, and it certainly sounds like something we'd like to be a part of. If you have time to discuss the project in more detail, maybe you could reach out to our sales team? They're super friendly, and even if it's not a commercial project, they might put you in touch with our Community team. Just tell them Chris sent you. 😉

[1ec5]

On the iOS side we recently put together a hack that uses TinySDF in combination with the Apple CoreText APIs to render southeast asian languages -- but it depends on an Apple API that's not available on the browser/JS side.

@anthony-toezin, we’re posting occasional screenshots of this hack in mapbox/mapbox-gl-native#7774 and mapbox/mapbox-gl-native#7862, by the way. The iOS map SDK is part of the iOS navigation SDK, which may be of interest to you (info on contributing a localization).

[anthony-toezin]

Thanks for that information @ChrisLoer I'll definitely reach out to them and see if we might be able to do more cooperation together.

@1ec5 I'll stay tuned to that. Thanks

[mnavada]

I am interested in rendering Indic languages on Mapbox gl native as well as mapbox gl js.
I have come up with a scheme to support Indic languages. I would like people to review and comment on my approach.

1. I am planning to introduce a stage called getCoverage before the getGlyphs stage.
2. Get coverage will fetch a newly defined coverage file created by fontnik-modified or any other program.
3. Newly defined coverage file is supposed to use cmap table, which maps unicode to glyphIndex.
4. GetGlyphs stage will be modified to handle glyphIndex based glyphs rather than older unicode based.
5. In the getCoverage stage I would substitute unicodes with glyphIndex by parsing syllables.
6. I will have a new mapping called coverageMap which maps texts to glyphed texts.
7. Shaping stage will be modified to handle glyphedText instead of earlier plain unicode based text.

Can anybody suggest if it is the right direction? Any comments are welcome.

[ChrisLoer]

Hi @mnavada it sounds like you're exploring in the right direction, in that we'd need to move to a multi-stage approach where we get shaping tables first, run shaping with the tables to get a set of glyph ids and positions, and then request glyphs from the server by glyph ID instead of by unicode character. For many languages/fonts, it's not as simple as looking up a unicode character->glyph ID mapping in the cmap table, because the required set of glyph IDs will depend on substitution rules (e.g. the GSUB table) .

[mnavada]

I proceeded a little bit further with this idea. I am planning to divide the work into two stages. One, IndicFont preparation and other, Indic Font processing. Second will be kept by me myself for strategic reasons. I would like to contribute the first stage back to mapboxgl-js and mapboxgl-native code base. What are the ways of contributing the code to code base?

Further. I have introduced a stub module called textProcessor in the glyph_manager which does specifically IndicProcessing. Later this module can be enhanced with harfBuzz. All other changes which is explained above will be part of the contribution.

[ryanhamley]

Hi @mnavada. Thanks for your interest in helping with this issue. You can learn how to submit a PR with our contributor documentation.

[toton6868]

@ChrisLoer Sorry for offtopic. I am trying to render Bengali font but there is no luck at all. I was using Tilemill till now. Springmayer helped me in 2013 by implementing Harfbuzz in Tilemill. Now I am trying to get with vector tiles. I have installed Harfbuzz with the help of https://harfbuzz.github.io/. In the comment of 21st February you mentioned

which means cross-compiling Harfbuzz to asm.js or wasm looks more and more practical.

Can you please elaborate on how I can use harfbuzz in a vector mapping with mapbox gl js API?

[ChrisLoer]

Can you please elaborate on how I can use harfbuzz in a vector mapping with mapbox gl js API?

Hi @toton6868 unfortunately it would be pretty difficult to use harfbuzz with GL JS without making significant changes to the GL JS code, as well as implementing server infrastructure to provide shaping tables to GL JS.

[toton6868]

@ChrisLoer Thanks for quick reply. That means there is no luck to render Bengali font? I am trying to build a native mapping and navigation app and site. If this can not be done my project will not see any success.

[ChrisLoer]

That means there is no luck to render Bengali font?

😞 Yes, that's right.

[tallytalwar]

Hi @toton6868

Though mapbox-gl is great and a very well supported and written map rendering library, but for your specific use case you might want to give tangram and tangram-es a try. Both web and native tangram renderers support all indic scripts including bengali.

Apologies MBGL team for mentioning this here, we love MBGL and draw a lot of inspiration from it, but just helping another open source user.

[azizul-bkash]

@tallytalwar I am worried about Tangram please follow the following blog.

https://mapzen.com/blog/shutdown/

Yes It is shutting down :(

[tallytalwar]

@azizul-bkash Both tangram web and native rendering project are still very much in development :D.
Again apologies to discuss this here. @azizul-bkash please followup outside this thread. Thanks.

[toton6868]

My project will halt untill solution. I saw in harfbuzz project that it support bengali language. I have install and configure hurfbuzz in my server. Is there any way or luck to visualise Bengali font with harfbuzz as Bengali falls within Indic language.

[toton6868]

@ChrisLoer any update on Bengali support?

[charleyw]

Is there any progress on this issue? We met the problem when rendering myanmar.