enhance text rendering in genesis topology diagram

[VasylTretiakov]

1. us-east-1-sandbox environment name has overlapping letters
2. tier string in operations tier environment name extends beyond the matching rectangle's right boundary
   

[jhunt]

This looks like an issue with your browser. Can you provide more information about your OS, browser vendor, screen size / resolution, etc.?

[jhunt]

For reference, here's what it looks like for me on a recent vintage of Firefox on macOS, at 1440x990 (and I lose about 300px in the horizontal to some browser chrome):

[VasylTretiakov]

Interesting. All my tests are done from latest stable Chrome on Android and Linux using devices with 1920x1080 (FHD) screens.

[VasylTretiakov]

Internet Explorer 11 with Windows10 looks even worse due to small image being displayed.

Proceeding to Edge, image size seems proper, but character overlapping is obvious.

Checking latest Firefox on Windows 10 also reveals the issues

Thus, considering all tests are done on 1920x1080 resolution, it seems the issue with character overlap is mainly caused by resolution, while some browsers also render image in a disproportional way (but technically that's another issue which can be discussed in a separate topic).

[jhunt]

This is all SVG, so if you'd like to take a look at the raw SVG sources and submit a PR to fix those, I'd be happy to review it.

[VasylTretiakov]

I found the svg in data/pages/docs/about.yml

What I see is that the discussed eu-east-1-sandbox text is split into three strings:

• eu-east-1-sandb
• o
• x

All the three strings are positioned in a similar spot, so all the three parts are overlapping.

<text class="cls-2" transform="matrix(0.75, -0.43, 0.87, 0.5, 1644.46, 719.99)">us-east-1-qa</text>
<text class="cls-2" transform="matrix(0.75, -0.43, 0.87, 0.5, 938.73, 1501.8)">
     us-east-1-sandb
     <tspan class="cls-3" x="419.7" y="0">o</tspan>
     <tspan x="451.83" y="0">x</tspan>
</text>

This explains the visual artifacts I was reporting on 1920x1080 resolution while for your resolution of 1440x990 the disconnected letters seem to be in the right spots.

Appending o and x back to the eu-east-1-sandb string fixes the issue.

<text class="cls-2" transform="matrix(0.75, -0.43, 0.87, 0.5, 1644.46, 719.99)">us-east-1-qa</text>
<text class="cls-2" transform="matrix(0.75, -0.43, 0.87, 0.5, 938.73, 1501.8)">us-east-1-sandbox</text>

[VasylTretiakov]

For operations tier extending beyond the matching rectangle, I was thinking of splitting the string into two single-word ones and putting them under each other.

For example (ignoring text positioning precision), like so

<text class="cls-2" transform="matrix(0.75, -0.43, 0.87, 0.5, 1711.42, 1222.99)">operations</text>
<text class="cls-2" transform="matrix(0.75, -0.43, 0.87, 0.5, 1771.42, 1252.99)">tier</text>

On my screen this produces the following result which looks nicer to me.

But I am not sure how this setup would look on your screen.

[VasylTretiakov]

@jhunt , would you like to review the suggestions in the two previous comments?