Right-to-left texts (RTL) is a phenomenon typical for Middle East countries, especially for many languages spoken in this region. The most widespread RTL languages are Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi. This article describes and shows how to handle RTL languages in the globally used online maps that are originally created for standard left-to-right written texts.
Handling RTL Texts
Use the mapbox-gl-rtl-text plugin to support right-to-left languages such as Arabic and Hebrew.
By setting the lazy parameter to true, the plugin is only loaded when the map first encounters Hebrew or Arabic text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add support for right-to-left scripts</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maplibregl.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
);
var map = new maplibregl.Map({
container: 'map',
style:
'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [44.3763, 33.2788],
zoom: 11
});
</script>
</body>
</html>
Conclusion
RTL texts in online maps can be handled thanks to the Mapbox RTL plugin in JavaScript (JS RTL plugin). Despite being created by Mapbox, this plugin works in the MapTiler maps as well.
Useful links
Mapbox GL RTL text
How to use MapLibre
Comments
0 comments
Please sign in to leave a comment.