Comments (18)
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.
Related Issues (20)
- Maplibre >=4.2.0: can't use "within" filter in "all" filter anymore: ["all", ["within", ...], ...] HOT 10
- Stop rendering when hands off computer, a.k.a frame invalidation HOT 5
- Marker hovers above Globe when moving the map HOT 2
- within filter inconsistent results based on zoom level HOT 8
- docs: show how to npm i maplibre-gl on intro page HOT 2
- transformCameraUpdate leads to unexpected camera jumps when targetting terrain HOT 2
- `feature-state` with `fill-outline-color` breaks rendering HOT 13
- map crashes when panning through mountains in 3D terrain (even on maplibre docs itself) HOT 3
- Poor sprite quality HOT 3
- Filter based on zoom level gives wrong results HOT 4
- RTL plugin with `await` triggers console error HOT 1
- Add an `.editorconfig` config HOT 2
- Zoom in to maximum spatiotemporal white, tile only has level 16, use level 16 zoom when zooming in to level 18 HOT 1
- GeolocateControl create control button twice when mounted/unmounted/remounted HOT 2
- Suggest installing newer version of maplibre-gl HOT 1
- Docs: Images are not lazy loaded on Examples page HOT 5
- Use a modern moduleResolution strategy
- Allow adding multiple layers to map.on() event handler HOT 2
- Documentation: Broken Link: maplibre-native HOT 4
- Render to user-supplied framebuffer HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maplibre-gl-js.