RTL support

text

This example shows how to display Right to Left texts in Ogma. RTL support requires the mapbox-gl-rtl-text library. Tutorial on how to include optional dependencies here.

index.ts

import Ogma from '@linkurious/ogma';

// graph with mixed RTL and LTR text labels
const graph = {
  nodes: [
    { id: 0, attributes: { text: 'Arabic - العَرَبِيَّة‎', radius: 12 } },
    { id: 1, attributes: { text: 'Maghrebi group', radius: 8 } },
    { id: 2, attributes: { text: 'Moroccan Arabic (الدارجة - darija)' } },
    { id: 3, attributes: { text: 'Tunisian Arabic (تونسي - tūnsī)' } },
    { id: 4, attributes: { text: 'Algerian Arabic (دارجة - darja)' } },
    { id: 5, attributes: { text: 'Libyan Arabic ( ليبي - lībi)' } },
    { id: 6, attributes: { text: 'Hassaniya Arabic' } },
    { id: 7, attributes: { text: 'Saharan Arabic' } },
    { id: 8, attributes: { text: 'Sudanese group', radius: 8 } },
    { id: 9, attributes: { text: 'Sudanese Arabic (سوداني - sūdānī)' } },
    { id: 10, attributes: { text: 'Chadian Arabic' } },
    { id: 11, attributes: { text: 'Juba Arabic' } },
    { id: 12, attributes: { text: 'Egyptian group', radius: 8 } },
    { id: 13, attributes: { text: 'Egyptian Arabic (مصرى - maṣri)' } },
    { id: 14, attributes: { text: "Sa'idi Arabic (صعيدى - ṣaʿīdi)" } },
    { id: 15, attributes: { text: 'Arabian Peninsula group', radius: 8 } },
    { id: 16, attributes: { text: 'Bahrani Arabic' } },
    { id: 17, attributes: { text: 'Bareqi Arabic' } },
    { id: 18, attributes: { text: 'Gulf Arabic (خليجي - ḵalījī)' } },
    { id: 19, attributes: { text: 'Najdi Arabic (نجدي - najdi)' } },
    { id: 20, attributes: { text: 'Omani Arabic (عماني - ʿumāni)' } },
    { id: 21, attributes: { text: 'Hejazi Arabic (حجازي - ḥijāzi)' } },
    { id: 22, attributes: { text: 'Hadhrami Arabic (حضرمي - ḥaḍrami)' } },
    { id: 23, attributes: { text: 'Shihhi Arabic' } },
    { id: 24, attributes: { text: 'Dhofari Arabic' } },
    { id: 25, attributes: { text: 'Yemeni Arabic (يمني - yamani)' } },
    { id: 26, attributes: { text: 'Tihamiyya Arabic' } },
    { id: 27, attributes: { text: 'Mesopotamian group', radius: 8 } },
    { id: 28, attributes: { text: 'Mesopotamian Arabic' } },
    {
      id: 29,
      attributes: { text: 'North Mesopotamian Arabic (Moslawi/Qeltu)' }
    },
    { id: 30, attributes: { text: 'Levantine group', radius: 8 } },
    { id: 31, attributes: { text: 'Levantine Arabic (شامي - šāmi)' } },
    { id: 32, attributes: { text: 'Syrian Arabic' } },
    { id: 33, attributes: { text: 'Cypriot Maronite Arabic' } },
    { id: 34, attributes: { text: 'Lebanese Arabic (لبناني - libnēni)' } },
    { id: 35, attributes: { text: 'Jordanian Arabic (أردني - urduni)' } },
    {
      id: 36,
      attributes: { text: 'Palestinian Arabic (فلسطيني - falasṭīni)' }
    },
    { id: 37, attributes: { text: 'Bedawi Arabic (بدوي - badawi/bdiwi)' } },
    { id: 38, attributes: { text: 'Andalusian group', radius: 8 } }
  ],
  edges: [
    { source: 0, target: 1 },
    { source: 0, target: 8 },
    { source: 0, target: 12 },
    { source: 0, target: 15 },
    { source: 0, target: 27 },
    { source: 0, target: 30 },
    { source: 0, target: 38 },

    { source: 1, target: 2 },
    { source: 1, target: 3 },
    { source: 1, target: 4 },
    { source: 1, target: 5 },
    { source: 1, target: 6 },
    { source: 1, target: 7 },

    { source: 8, target: 9 },
    { source: 8, target: 10 },
    { source: 8, target: 11 },

    { source: 12, target: 13 },
    { source: 12, target: 14 },

    { source: 15, target: 16 },
    { source: 15, target: 17 },
    { source: 15, target: 18 },
    { source: 15, target: 19 },
    { source: 15, target: 20 },
    { source: 15, target: 21 },
    { source: 15, target: 22 },
    { source: 15, target: 23 },
    { source: 15, target: 24 },
    { source: 15, target: 25 },
    { source: 15, target: 26 },

    { source: 27, target: 28 },
    { source: 27, target: 29 },

    { source: 30, target: 31 },
    { source: 30, target: 32 },
    { source: 30, target: 33 },
    { source: 30, target: 34 },
    { source: 30, target: 35 },
    { source: 30, target: 36 },
    { source: 30, target: 37 }
  ]
};

const ogma = new Ogma({
  graph: graph,
  container: 'graph-container'
});
ogma.tools.brand.set(
  '<span class="footnote">Data &copy; <a href="https://en.wikipedia.org/wiki/Varieties_of_Arabic">Wikipedia</a></span>',
  { position: 'bottom-right' }
);

// do not hide labels
ogma.styles.addNodeRule({
  text: {
    //scaling: true,
    //scale: 0.8,
    minVisibleSize: 0,
    position: 'right',
    backgroundColor: 'white'
  }
});
ogma.layouts
  .hierarchical({
    direction: 'LR',
    levelDistance: 200,
    nodeDistance: 20,
    duration: 0
  })
  .then(() => {
    return ogma.view.locateGraph({ padding: { right: 250 } });
  });

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <!-- use CDN to load the library for RTL support -->
    <script src="https://cdn.jsdelivr.net/npm/@mapbox/mapbox-gl-rtl-text@0.2.1/index.js"></script>
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

styles.css

.footnote {
  font-family: Helvetica, Ariel, sans-serif;
  font-size: 0.8em;
  display: inline-block;
  padding: 5px;
}
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}