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

Message ListMessage List     Post MessagePost Message

  addText() does not correctly right-align multiline text in SVG files
Posted by David Wilson on Dec-07-2018 03:07
If you add right-aligned multi-line text to a ChartDirector chart, then generate an SVG file, the text does not always display as correctly right-aligned.

For example:

I create some multi-line text:

std::string text(
    "This is a big long text linen"
    "This is another big long text linen"
    "This is yet another big big long long text line"

I add it to the chart top-right aligned to a point (x, y) near the top right corner of the chart:

chart.addText(x, y, text, font, font_size, Chart::TextColor, Chart::TopRight);

Then I generate my SVG file:


When viewing the resultant SVG file in various applications, the text lines are not correctly right-aligned.  In my tests, Firefox shows better alignment, while other applications can show very poor alignment (IE, Word, PowerPoint, Inkscape, &c).

I have determined that the problem is not with the rendering engines of the various applications, it is in the SVG file generated by ChartDirector.

The problem is that, even for text is supposed to be right-aligned, ChartDirector generates commands for left-aligned text:

<text id='b660' style="font-family:'Arial';font-size:8px;" x='764' y='32'>This is a big long text line</text>

where 764 is the left end of the text.

The right end of left-aligned text will be correct only if the application chooses the exact same font and renders the text with the exact anticipated length. Unfortunately, different applications seem to render the same text with the same font and font size with different lengths, so we see poor right alignment in some applications.

To fix this, addText() should store right-aligned text as right-aligned in the SVG file:

<text id='b660' style="font-family:'Arial';font-size:8px;" x='840' y='32' text-anchor='end'>This is a big long text line</text>

Here 840 is the right end of the text, and the 'text-anchor' flag aligns the text to the right end.  This change fixes right alignment of multi-line text in all applications I have tested.

  Re: addText() does not correctly right-align multiline text in SVG files
Posted by Peter Kwan on Dec-07-2018 16:48
Hi David,

The is the same issue as:

The root cause of this problem is because every SVG viewer can draw SVG text differently. Even for the same SVG viewer, it can draw text with different relative length when the scale changes. That is, even if two text are of the same length in one scale, they are not necessarily of the same length when drawn at 2x scale, and SVG (Scalable Vector Graphics), as its name implies, is designed to be drawn at various scales.

Because ChartDirector text layout can be relatively complex (remember the text can be arbitrarily complex CDML - see, ChartDirector internally does not use text-anchor, as it is not sufficient to support complex layout. ChartDirector just puts the text at the position computed by itself.

SVG 1.1 introduces the textLength attribute, which is specifically designed for this kind of issues. It allows the SVG viewer (such as the browser) to know the text length computed by the SVG producer (such as ChartDirector), so it can position the text as originally intended.

From your code, I assume you are using C++. As mentioned in the page above, we have created an update for Linux (x86_64) based on ChartDirector 6.3 that can generate text with the "textlength" attribute. If you are using other OS, please let me know operating system you are using and whether it is 32-bit or 64-bit, so I can provide the updated DLL or shared object to you.

Peter Kwan

  Re: addText() does not correctly right-align multiline text in SVG files
Posted by David Wilson on Dec-07-2018 22:59
Thank you for your prompt reply, and your help with past issues.

Yes, I would certainly like to try out the "textlength" upgrade for 64-bit Windows.  Please email me as to where I can obtain the upgrade.

It would be helpful to address the right-alignment issue, since we are moving (with Microsoft) toward open graphics format (SVG, PNG), and this issue manifests in many of our target applications (IE, Edge, Chrome, Office 365, Inkscape).

Note that this is a minor criticism, we have generally found ChartDirector quite serviceable. In regard to SVG chart presentation issues, I have traced almost all of them to the renderer, this is the only one I was able to trace to ChartDirector.


Dave Wilson

  Re: addText() does not correctly right-align multiline text in SVG files
Posted by Peter Kwan on Dec-08-2018 19:04
Hi David,

I have just uploaded the updated chartdir60.dll (64-bit) to:

This updated chartdir60.dll will include the textLength attribute in SVG text, so the alignment should be very accurate.

Peter Kwan