Unicode font do not display properly in map. about maplibre-gl-js HOT 18 OPEN

There was some attempts to solve this, but they didn't go far. OpenLayers tried to do it using svg on canvas, but iirc it was not solving it properly either.

Basically there is a c++ lib that knows how to do all the proper text rendering. Browsers use that for the sites. Webgl has limited support of that lib (?), eg cannot use it along a curve to draw street names. So mb had to create a separate system for fonts that can draw labels in webgl along a curve line, but only if each letter is by itself. It does not support ligatures and other complexities. They did a hack for Arabic by creating 4 variants for each letter: without ligatures, with one on left, one in right, and both, plus some code that decides which variant to use. Languages such as used in Maianmar (Birma) are far more complex, and cannot be hacked this way.

Hopefully some day browsers will have a good font support in webgl so all this hackary can just be dropped

from maplibre-gl-js.

@HarelM I'd like to work on this issue, can I claim this?

from maplibre-gl-js.

Nice that you start working on this, @hami9x. You can have a look at maplibre/maplibre-native#778 there should be some useful info.

from maplibre-gl-js.

And also this one: maplibre/maplibre#231

from maplibre-gl-js.

It's worth considering writing it in Rust maybe, so that it will be available in both native and here (as wasm).

from maplibre-gl-js.

I opened this issue in Mapbox gl js. Can anyone give me direction how this can be solved to support Devanagari letters

from maplibre-gl-js.

I'm not sure I fully understand the problem. It would be best if you elaborate.
Regardless, you'll probably need to download a font that support these letters and use it instead of the current font.
I had the same problem with hebrew letters I think...

from maplibre-gl-js.

This vowel character is supposed to go in front of the consonant. More details can ne explored here in Wikipedia https://en.wikipedia.org/wiki/Devanagari

I also found this line is commented out in is_char_in_unicode_block.js

from maplibre-gl-js.

Ahh, I have the same problem with "nikud" - the hebrew extra characters to indicate how to read, they appear after the letter instead of within the letter.
I have no clue how to solve this, you'll need to research how text in webgl is created and how to add these letters in the right place.
Sorry I don't have better knowledge on the subject. But if you find out please serve a PR :-)

from maplibre-gl-js.

@aerotypebharat: What fontface is used in your screenshot? Do you have a public fontface that renders Devanagari correctly at https://fonts.google.com/ ? You can then use https://github.com/orangemug/font-glyphs to generate pre-rendered fonts (Signed Distance Field glyphs) to consume from your style

from maplibre-gl-js.

I am using Khula font. It is public in Google Khula Font. It renders properly in text. I have tried other fonts that support Devanagari but maplibre-gl.js does not have code to handle vowels and special characters of Devanagari.

from maplibre-gl-js.

The approach chosen by Mapbox to render labels is unfortunately fundamentally incompatible with scripts that require more sophisticated handling than a mechanical typewriter could provide. This is not a problem with Unicode support as such; there is no problem with the encoding.

from maplibre-gl-js.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

from maplibre-gl-js.

This issue was closed because it has been stalled for 30 days with no activity.

from maplibre-gl-js.

Assigned XXL bounty.
maplibre/maplibre#193
Acceptance criteria: brahmic fonts are rendered correctly.

from maplibre-gl-js.

@wipfli Thank you for the heads up, I have some background in C++ and enjoy hardcore stuff like this. This will be really challenging though.

from maplibre-gl-js.

The arabic is displaying backwards and the letters are disconnected.

from maplibre-gl-js.

@bigBxr to get correct arabic text you need to load the RTL plugin

from maplibre-gl-js.