Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unicode font do not display properly in map. #50

Open
aerotypebharat opened this issue Dec 29, 2020 · 18 comments
Open

Unicode font do not display properly in map. #50

aerotypebharat opened this issue Dec 29, 2020 · 18 comments
Assignees
Labels
💰 bounty XXL Extra Extra Large Bounty, USD 3000 bug Something isn't working PR is more than welcomed Extra attention is needed

Comments

@aerotypebharat
Copy link

This is the name in openstreetmap.org
image
This is what displayed in map.
image
Test code available in code pen here
https://codepen.io/snickell/pen/dypOWzj

@aerotypebharat
Copy link
Author

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

@HarelM
Copy link
Collaborator

HarelM commented Jun 30, 2021

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...

@aerotypebharat
Copy link
Author

aerotypebharat commented Jul 18, 2021

image
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
image
I also found this line is commented out in is_char_in_unicode_block.js
image

@HarelM
Copy link
Collaborator

HarelM commented Jul 18, 2021

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 :-)

@ambientlight
Copy link
Contributor

ambientlight commented Jul 19, 2021

@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

@aerotypebharat
Copy link
Author

aerotypebharat commented Jul 19, 2021

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.

@anarchodin
Copy link

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.

@nyurik
Copy link
Member

nyurik commented Sep 15, 2021

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

@github-actions
Copy link
Contributor

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 github-actions bot added the stale label Mar 15, 2022
@github-actions
Copy link
Contributor

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

@HarelM
Copy link
Collaborator

HarelM commented Mar 16, 2023

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

@HarelM HarelM added bug Something isn't working PR is more than welcomed Extra attention is needed 💰 bounty XXL Extra Extra Large Bounty, USD 3000 and removed stale labels Mar 16, 2023
@hami9x
Copy link

hami9x commented Mar 20, 2023

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

@wipfli
Copy link
Contributor

wipfli commented Mar 20, 2023

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

@wipfli
Copy link
Contributor

wipfli commented Mar 20, 2023

And also this one: maplibre/maplibre#231

@hami9x
Copy link

hami9x commented Mar 21, 2023

@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.

@HarelM
Copy link
Collaborator

HarelM commented Mar 21, 2023

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

@bigBxr
Copy link

bigBxr commented Mar 14, 2024

The arabic is displaying backwards and the letters are disconnected.

@wipfli
Copy link
Contributor

wipfli commented Mar 15, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💰 bounty XXL Extra Extra Large Bounty, USD 3000 bug Something isn't working PR is more than welcomed Extra attention is needed
Projects
None yet
Development

No branches or pull requests

8 participants