ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Text alignment in SVG
Posted by Eric de Ruiter on Oct-31-2018 22:53
Attachments:
Hi,

We are in the process of moving all of our chart rendering to SVG, in this process we discovered some text alignment issues in some of the labels of our charts.

The main source of the problems are axis labels, those labels are right/top aligned to connect to the axis. The way ChartDirector generates SVG is that ChartDirector tries to figure out the width of the text and calculates the left/bottom position of the text.
This can lead to problems as the SVG rendering engine of a browser can render the text differently leading to a different width, and thus alignment problems.

Is it possible to instruct ChartDirector to use text-anchor="end" for right/top aligned text?  This would greatly reduce the impact of text rendering differences between browsers and ChartDirector.

The attached image is an example of a barchart we have, in the image both the firefox and chrome renderings of the SVG are combined. You'll see that the texts start at the same X position, but as the width of the rendered text differs per browser the labels are not correctly aligned to the axis (and even overlap with the axis).

The same problem can be seen for vertical y-axis labels.

The way ChartDirector can help is to use text-anchor="end" in case of right aligned texts. This way the svg renderer will align the end of the text to the specified X position. Is this possible?

Kind regards,

  Eric
chartdir_alignment.png

  Re: Text alignment in SVG
Posted by Peter Kwan on Nov-02-2018 18:20
Hi Eric,

We are aware that every SVG viewer (different browser brands, versions, operating systems, and other types SVG viewers) can draw SVG text differently. Some viewers can even change the relative text length if you zoom in/out the web page (that is, the text can sometimes look too long and sometimes too short, depending on the magnification level).

Unluckily, the current version of ChartDirector cannot generate the "text-anchor" attribute.

A few years ago, we have tried individual character positioning (the "dx" attribute) to solve this problem. This can create text that is of the same length as computed by ChartDirector. This can solve the alignment problem as well as other problems (such as proper text wrapping, or resizing a box or table column to fit the text). Unluckily, at that time, we found that the SVG support for the browsers and other viewers are still not very good, so we have not included this in ChartDirector.

Given that the current browsers should support SVG much better, I can ask our developer to look into this issue again to see if we can find a solution that works in all browsers for all types of text layout. Would you mind to inform me which programming language edition of ChartDirector you are using?

Regards
Peter Kwan

  Re: Text alignment in SVG
Posted by Eric de Ruiter on Nov-02-2018 20:29
Hi Peter,

We are using the PHP version.

Thanks for looking into this, hopefully adding support for the text-anchor attribute is not too difficult.

Alternate solutions that could be considered:
- using textLength / textAdjust (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength)
- allow to set custom classes/id's on a textbox. This way you can tag all axis-labels manually and adjust the layout by adding custom styling and/or post-processing.

If this is not possible I think we will look into some post-processing to add the labels manually to the SVG output.

Kind regards,

  Eric

  Re: Text alignment in SVG
Posted by Peter Kwan on Nov-06-2018 04:11
Hi Eric,

Thanks for the textLength suggestion. This is exactly the attribute that is designed to solve this kind of problem. We have not considered it in the past because of poor browser support.

We tested it today, and it works in IE 11, Edge, Chrome. but only works partially in FireFox. On FireFox, it only works for the text element, but not the tspan element. (We use tspan to support complicated text layout, such as bi-direction text flow - text that flows from left-to-right in some part and right-to-left in another part, like English text with an Arabic name in the middle.) Luckily, in case textLength is not supported, FireFox just ignores it so it reverts to the current behaviour.

Would you mind to inform me which operating system edition(s) of ChartDirector you are using, so we can compile an update for you?

Regards
Peter Kwan

  Re: Text alignment in SVG
Posted by Eric de Ruiter on Nov-06-2018 16:49
Hi Peter,

Thanks for your fast reply!
We are using the Linux (x86_64) version of ChartDirector.

Kind regards,

  Eric

  Re: Text alignment in SVG
Posted by Peter Kwan on Nov-09-2018 18:00
Hi Eric,

I have just uploaded an updated version of the libchartdir.so for Linux x64 to our web site:

https://www.advsofteng.com/libchartdir63p1_linux_x64.zip

Please use the libchartdir.so inside to replace your existing "active" libchartdir.so. (You may have multiple copies of libchartdir.so in your machine. The "active" libchartdir.so is the one actually used by your PHP. It is usually in the PHP extension directory.)

After updating the libchartdir.so, please restart Apache (or the web server you are using).

So far we have tested it with IE 11, Edge and modern versions of Chrome and Firefox, and it works for left-to-right languages. The SVG become very consistent with the PNG image generated by ChartDirector.

Please kindly let me know if this can solve the problem.

Regards
Peter Kwan

  Re: Text alignment in SVG
Posted by Eric de Ruiter on Nov-09-2018 20:37
Thanks! This looks great!

Kind regards,

  Eric