Check alignment of text in nodes

[Yagnap]

Not positioned uniformly, e.g. "folk's terms" left in application system types and enterprise functions, but centered in features. DatabaseManagementSystem overlaps with border. May be an issue with the graphml file.

[KonradHoeffner]

Everything looks centered in the original diagram, this must be caused by and fixed in the XSLT transformation preprocessing script, I will fix it.

[KonradHoeffner]

OK, I understand the problem now: There has never been any actual centering meaning a "center" tag or style or something like that. Instead the centering seems to be performed by yEd and hardcoded into the x coordinate. Then when the XSLT transformation script switches out the words, this accidentally works out quite well for the feature block because the string "FeatureCatalogue" is similar in lenght to "terminologies" and analogously for classified and citation. However "ApplicationSystem..." and "EnterpriseFunction..." is longer and thus it is placed too far on the left.

This is a trivial problem to fix but what is the most elegant one for future maintenance?

[KonradHoeffner]

I really like this StackOverflow solution, just copying it here:

An easy solution to center text horizontally and vertically in Set the position of the text to the absolute center of the element in which you want to center it:

If it's the parent, you could just do x="50%" y ="50%". If it's another element, x would be the x of that element + half its width (and similar for y but with the height).

Use the text-anchor property to center the text horizontally with the value middle:

middle

The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

Use the dominant-baseline property to center the text vertically with the value middle (or depending on how you want it to look like, you may want to do central)

Here is a simple demo:

<svg width="200" height="100">
 <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
 <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

[KonradHoeffner]

This is how this would look in the SVG output for us:

      <g class="node" id="FeatureClassified">
         <g fill="rgb(255,204,153)" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" transform="matrix(1,0,0,1,-80,-95)" stroke="rgb(255,204,153)">
            <rect x="1033" y="212" width="201.25" rx="4" ry="4" height="30" stroke="none"/>
         </g>
         <g text-rendering="geometricPrecision" stroke-miterlimit="1.45" shape-rendering="geometricPrecision" transform="matrix(1,0,0,1,-80,-95)" stroke-linecap="butt">
            <rect x="1033" y="212" fill="none" width="201.25" rx="4" ry="4" height="30"/>
            <text x="1136" xml:space="preserve" y="227" dominant-baseline="middle" text-anchor="middle" stroke="none">terminology items</text>
         </g>
      </g>

However if we calculate and change this in the SVG file, it will be overwritten the next time the diagram is updated and exported by yEd from GraphML to SVG.

[KonradHoeffner]

Filed a feature request at https://yed.yworks.com/support/qa/28414/center-text-the-elegant-way-in-svg-export.

[KonradHoeffner]

It's ugly and it isn't perfect but this somewhat centers it with a single line of XSLT and I don't want to waste any more time with this when yEd may correct this in a future version anyways:

  <xsl:template match="text/text()">
    <xsl:value-of select="replace(replace(replace(replace(.,'EnterpriseFunction|OrganizationalUnit|ApplicationSystemType|OutcomeCriteria','            '),'[^ ]*Catalogue','terminologies'),'[^ ]*Classified','terminology items'),'[^ ]*Citation','folks` terms')"/>
  </xsl:template>