Why is font rendering for line text so bad?

[rcdailey]

All C4 diagrams have really weird spacing issues with text on lines. See screenshot below. I've tried different fonts but haven't had much luck on kerning/spacing between letters in words. It's so bad that sometimes it looks like a line of spaced out letters instead of words.

I'm using the public Plant UML server for rendering diagrams. I was able to work around the issue by putting custom fonts on a dockerized version of PlantUML, but that won't work for my github workflow since I do not host my own server, nor do I want to.

What is the fix for the font issue?

[kirchsth]

Hi @rcdailey,

I did some trials.

I assume you have problems with svg files (and not with png files).
And if you add the following line in your source then the font problem is gone (and you lose layout based on the new width).

skinparam maxMessageSize 0

like e.g.

@startuml
!include <C4/C4_Sequence>

skinparam maxMessageSize 0

Rel(a,a, "Perform the usual session auth")
@enduml

Are my assumptions correct?

I think the problem is in the svg rendering of plantuml: I maxMessageSize is set (0 deactivates it) all words are positioned separately and therefore it doesn't match so good anymore (I assume they make a rounding of 0.5 but this has to be checked on PlantUML side).

I overlaid both diagrams in one svg file and then it's simpler to see the differences between the files
(second line should be ok for you).

I entered an issue in the forum, maybe they can change the PlantUML implementation (remove rounding or write all words combined).

Best regards
Helmut

[rcdailey]

I am doing PNG in my case

[kirchsth]

Do you get better results with skinparam maxMessageSize 0?

[rcdailey]

I tested the following example C4 sequence diagram:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml

skinparam maxMessageSize 0

Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")

Container_Boundary(b, "API Application")
  Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
  Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
Boundary_End()

ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")

Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel(c3, c4, "select * from users where username = ?", "JDBC")

SHOW_LEGEND()
@enduml

It appears like this:

If I disable skinparam, it looks like this:

There's not much of a difference, although it does appear that the first one looks a little better.

Neither of the above renders looks a good as the version I get when I use a local plantuml instance:

[kirchsth]

If I understand you correctly then

• local version offers the expected output and
• only the online server has the problems (and online with skinparam maxMessageSize 0 is better).

a) Is your suggested solution is a different font?
b) Did you found a better font?

[kirchsth]

A possible solution could be to use a rendering hint in PlantUML.

g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);

If this is used then it creates it a text like the line 3.

And the sequence diagram would look like

[kirchsth]

Following Plantuml PR is created

[kirchsth]

Hi @rcdailey,
can you please check the new generated sequence diagram?
Is it better?
Thank you and best regards
Helmut

[kirchsth]

In previous diagram I compared the online and local version. Following image shows the real difference between the different local jar versions:

• the 3. line is calculated via local jar with new implementation
• the 4. line is calculated via local jar with old implementation

[kirchsth]

Hi @rcdailey,

PlantUML snapshot ~v1.2024.6beta12 includes MR set RenderingHints.VALUE_FRACTIONALMETRICS_ON.

Can you test/compare the snapshot output with your old results and write some feedback if it looks better or not

Thank you and best regards
Helmut

[rcdailey]

HI there, I did get your last message but have been swamped this week. I will absolutely test this for you as soon as I can. I have some free time today so I'll try to get it done. Thank you very much for personally handling this for me!

EDIT: I actually remembered that all of this was done on my work PC, so I probably won't be able to try it until Monday at the earliest.

If in the meantime you can share some steps to test that might help -- if the plantuml public server is already updated and all I have to do is use that, then no problem!

[kirchsth]

Hi @rcdailey

atm the online server uses only v1.2024.5.

But if you have Java installed on your machine, and you download e.g. the https://github.com/plantuml/plantuml/releases/tag/snapshot plantuml-mit-SNAPSHOT.jar and https://github.com/plantuml/plantuml/releases/tag/v1.2024.5 plantuml-mit-1.2024.5.jar files from the different releases
then you can simply generate the old/new version with following commands in 2 different folders and compare e.g. your typically used *.png output files. (I used in my sample a C4-PlantUML/percy file, please update the *.puml path with your files)

java -jar plantuml-mit-1.2024.5.jar -o ./oldVersion "./C4-PlantUML/percy/C4_Sequence Diagram Sample - bigbankplc.puml"

java -jar plantuml-mit-SNAPSHOT.jar -o ./newVersion "./C4-PlantUML/percy/C4_Sequence Diagram Sample - bigbankplc.puml"

more command details see https://plantuml.com/command-line.

E.g. on my machine I got following output:

BR Helmut

[kirchsth]

In the meantime the online server is updated to v1.2024.6, so you can make all your (png) checks with the online server too.
BR Helmut