Arabic text not displayed correctly

[nouryf]

Hi,

I'm using 'Mapbox gl js' 0.32.1 and 'right to left' plugin to display tiles with Arabic labels. I downloaded, for testing, an .mbtiles from https://openmaptiles.org/downloads/#country I noticed that the Arabic labels are either not displaying the firs character or the middle or last one.

Attached is a screenshot highlighting (red box) labels displayed incorrectly. I also attached the mapbox map for comparison. In the Mapbox map, the Arabic text is correct (reference: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/)

I used .html similar to the one here: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/

Could this be a data issue (mbtiles some how not storing the labels correctly) or may be I'm using the plugin incorrectly ? Any other dependency to display the Arabic text correctly ? Any way to know what is the source of the issue ?

Thanks Noury

[ChrisLoer]

Hi @nouryf I'm so sorry it took me so long to respond! I missed the notification for your comment when it came in. 😓

I downloaded the morocoo.mbtiles file, and the thing that jumped out at me is that the names in those files are trilingual: English/Berber(I think?)/Arabic. My guess is you're using a font that doesn't have glyphs for Berber, so it doesn't show up in the labels. However (and I'm guessing a lot), control characters from the Berber text could still be affecting the rest of the display. The "Anfa/أنفا" case itself looks formatted as I'd expect.

[nouryf]

Hi @ChrisLoer, thanks for your response. Since I open this issue, things progressed in the direction you thought. It was a font issue. The used font did not seem to have all the Arabic glyphs and the displayed Arabic text has missing characters in it. This is now logged under a different project https://github.com/openmaptiles/openmaptiles/issues/194

So this is not a Mapbox GL js issue. This ticket can be closed.

[ELFALLAH02]

I had the same issue with Mapbox using streamlit I don't know why but the name of cities' streets ...everything in Arabic is from left to right. I think I use pydeck package too, but it's not responsible for the map style. Here is my code:

`                st.write(pdk.Deck(
                    map_style="mapbox://styles/mapbox/light-v9",
                    initial_view_state={
                        "latitude": midpoint[0],
                        "longitude": midpoint[1],
                        "zoom": 17,
                        "pitch": 50, },

                    layers=[
                        pdk.Layer(
                            'HeatmapLayer',
                            data=m,
                            get_position=[longitude, latitude],
                            auto_highlight=True,
                            radius=30,
                            opacity=0.9,
                            extruded=True,
                            get_color=mycolor(res),
                            pickable=True,
                            elevation_scale=4,), ],))`

Output

[nouryf]

Try adding the plugin that support right to left languages like Arabic:

mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
true // Lazy load the plugin
);