RTL problem in angular syncfusion diagram

[khaled]

 

In the Syncfusion official document for angular, there is a guide for RTL and it's simple and straight forward. They say we should add following code to the main component to enable RTL:

import { enableRtl } from '@syncfusion/ej2-base';
// Enables Right to left alignment for all controls
enableRtl(true);

or for individual component: adding -> enableRtl='true'

`<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' showHeader='true'
    enableRtl='true' headerTitle='Social Media'>
    <ng-template #template let-data="">
    <span class='{{data.class}} icon'><span class='media'>{{data.socialMedia}}</span></span>
    </ng-template>
</ejs-listview> `

Now, In my angular project, I use diagram, and RTL is enabled; but the style for text isn't good at all. I fork diagram demo from official syncfusion document and the link is: RTL syncfusion angular diagram

how can I fix it to show text properly?

[Aravind Ravi]

Hi Khaled, 

 

Currently, in the diagram we have support to render diagram elements from left to right. We do not have RTL support for our diagram component. 

 

Regards 

Aravind Ravi 

[yazan alsaber]

Hello Dears,

we had faced the same issue many times and in many projects, we tried many work arounds, until finally we had a great and stable work around.

1. On Export to SVG you need to capture the TSpan alignment from JSON.

2. embed a new as an attribute to the make it "yazanalign" and assign it with the same value.

3. on the view you need to show the rendered SVG you need to execute the code below

      var Tspans = document.getElementsByTagName('tspan');

      for (var i = 0; i < Tspans.length; i++) {

        var currentTspan = Tspans[i];

        var rectWidth = parseFloat(currentTspan.parentElement.parentElement.firstChild.getAttribute('width'));

        var tspanWidth = parseFloat(currentTspan.getBoundingClientRect().width);

        var vmsAlign = currentTspan.parentElement.parentElement.parentElement.firstChild.getAttribute('yazanalign');

        switch (vmsAlign.toLowerCase()) {

          case "left":

            currentTspan.setAttribute('x', 0);

            break;

          case "right":

            var tspanNewX = rectWidth - tspanWidth;

            currentTspan.setAttribute('x', tspanNewX);

            break;

          default:

            var tspanNewX = rectWidth - tspanWidth;

            currentTspan.setAttribute('x', tspanNewX / 2);

            break;

        }

      }

for any further help feel free to contact me

Regards,

Yazan

[Gowtham Gunashekar]

Hi Yazan, 

 

On further analysis, we think you try to add a specific alignment to all the tspan in the diagram at the time of exporting the diagram as SVG. Currently, we don’t have any support for that.  

 

Sample:  https://stackblitz.com/edit/angular-exgdoq?file=main.ts  

 

If we misunderstood your requirement, please share us more details or replicate the issue in the shared sample. This will be helpful for us to proceed further. 

 

Regards, 

Gowtham