Welcome to yEd Q&A!
Here you can ask questions and receive answers from other members of the community and yEd developers. And you can tell us your most wanted feature requests.

Text is not centered correctly in SVG when exported under Ubuntu/Linux

0 votes

Hi everyone,

the SVG Export under Linux places some text not at the correct location. The text is not centered. If I export the same graphml file under windows everything is just fine.

yEd version 3.16

I uploaded a testcase here.

I exported testcase.graphml under Windows 10 (testcase_win-export.svg) and Ubuntu 16.04 (testcase_linux-export.svg). If you diff them, you see the different coordinates.

I also attached some screenshots that let you easily see the problem. I opened the svgs with several browser-os-combinations just to be sure.

The result is always the same: It seems that the labels are not centered correctly:

- the "<<abstract>>" is not in the middle as it should be. this applies for both the UML stereotype and the simple text before the line break.

- the UML class name is not in the middle

- normal node labels are also not centered within the node. They seem to be slightly more on the left side.

asked Sep 1, 2016 in Help by phauer (120 points)
recategorized Sep 2, 2016 by thomas.behr

1 Answer

0 votes

That is the result of the way font rendering and SVG display works.

Simple solution
You may be able to improve the situation by using a font that is available on both machines (and measures similarly on both Windows and Linux).

Technical explanation (i.e. the gory details)
Currently, you have set the label font to 'Dialog'. However, 'Dialog' is not a real font but a symbolic name that is only available in Java applications. When you open your SVG document in a browser and the browser has to render text elements with font 'Dialog', it will not be able to match that font name with any existing fonts on your machines and use a fallback font instead. However, a different font also means a different text width and thus the text no longer appears centered.
You can verify that it is a text rendering issue if you set an actual border or background color for e.g. the "<<abstract>> Facade" label. Since label size is by default determined by the size of the text plus a 2px margin, this essentially visualizes the text bounds. If you open the corresponding SVG document in a browser, you will notice that the colored bounds are still centered in the node, but the text has changed in relation to said bounds.
To make matters worse, it is not even guaranteed that two different applications render text the same size even if the same font is used. I.e. a Java application may render the text differently from Firefox and Firefox may render the text differently from Chrome - even on the same operating system.
Finally, Linux usually renders text slightly larger than windows (even when you use the same font). Thus even if you use a font that is physically available on all the machines you view your SVG document on, the result will almost certainly slightly differ if you view the SVG document on the "other" operating system (i.e. the one the document was not generated on).

None of the above is actually a yEd short coming.

answered Sep 3, 2016 by thomas.behr [yWorks] (100,770 points)
Thanks for your answer. You explanation helps a lot.

I changed the label font to a specific font under Linux. Like "FreeSans", exported the svg (testcase-FreeSans-linux-export.svg) and the labels in some labels is now correct (testcase-FreeSans-linux-export.svg-screeny-under-linux-chrome.png).

BUT I recognized that changing the font of an UML class diagram only affects the name; not the stereotype and the methods or property block of the class diagram (see above screenshot). This is something, where yEd can act different. ;-)

What do you think about the following rough ideas that may fix the problem of arbitrary fonts in yEd/SVG:
- use SVG Fonts (but I'm not an expert here)
- embed fonts in the graphml file

In this both cases, yEd could pick a specific font by default instead of "Dialog".
Searching for logical java font 'Dialog' leads to the following page
http://mindprod.com/jgloss/logicalfonts.html
that stated that Arial could be the real font on Windows. Looking in my SVG I see font 'sans-serif', and replacing it with 'Arial' fixes the font width (in my case)
As of yEd 3.16.2 the font of the default label is used for stereotype, constraint, attributes, and methods, too.