maplibre-gl-js
maplibre-gl-js copied to clipboard
maplibre
Unicode font do not display properly in map.
This is the name in openstreetmap.org
This is what displayed in map.
Test code available in code pen here
https://codepen.io/snickell/pen/dypOWzj
I opened this issue in Mapbox gl js. Can anyone give me direction how this can be solved to support Devanagari letters
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...
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
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 :-)
@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
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.
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.
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
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This issue was closed because it has been stalled for 30 days with no activity.
Assigned XXL bounty. https://github.com/maplibre/maplibre/issues/193 Acceptance criteria: brahmic fonts are rendered correctly.
Nice that you start working on this, @hami9x. You can have a look at https://github.com/maplibre/maplibre-gl-native/discussions/778 there should be some useful info.
@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.
It's worth considering writing it in Rust maybe, so that it will be available in both native and here (as wasm).
