How to handle Right-to-Left Texts in Maps
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@{{site.versions.maplibre-gl}}/dist/maplibre-gl.js"></script>
<link
href="https://unpkg.com/maplibre-gl@{{site.versions.maplibre-gl}}/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/{{site.versions.mapbox-gl-rtl-text}}/mapbox-gl-rtl-text.js",
null,
true, // Lazy load the plugin
);
const map = new maplibregl.Map({
container: "map",
style:
"https://api.maptiler.com/maps/{{site.map-styles.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.