Hello everyone,
I’m using the Neo4j Visualization Library to display Arabic text, but the letters are rendering left‑to‑right (instead of right‑to‑left) and appear disconnected. See image below. Has anyone encountered this issue and found a way to render Arabic script properly?
Hi @pooya72, thanks for reaching out!
RTL languages aren't yet supported by the captions property, but you can use the html property on nodes (and captionHtml property on relationships) as a workaround. These properties allow you to place any html element on top of the nodes/relationships. For example:
const html_0 = document.createElement('div')
html_0.innerHTML = 'شجرة'
const html_1 = document.createElement('div')
html_1.innerHTML = 'بيت'
const nodes = [
{ id: '0', html: html_0 },
{ id: '1', html: html_1 }
]
const html_10 = document.createElement('div')
html_10.innerHTML = 'مع'
const relationships = [{ id: '10', from: '0', to: '1', captionHtml: html_10 }]
nodes.forEach((node) => {
const styledHtml = node.html
styledHtml.style.textAlign = 'center'
styledHtml.style.fontSize = '10px'
styledHtml.style.paddingTop = '25%'
})
relationships.forEach((relationship) => {
const styledHtml = relationship.captionHtml
styledHtml.style.textAlign = 'center'
})
const myNvl = new NVL(parentContainer, nodes, relationships)
will result in
I hope this helps. Please let me know if you have any other questions or comments.
Hi @pooya72, just wanted to let you know that in our latest NVL released we fixed formatting for RTL languages in captions. So with the latest version, you can use Arabic text in the caption and captions property and they will display correctly on the canvas.
