Provide fallback font cascade for sketch style

[languitar]

The current skinparam for the sketch style uses Comic Sans as the only font. This font is proprietary and might not exist on some systems. Moreover, it lacks a few important characters. With font fallback support now available in plantuml (https://forum.plantuml.net/10498/is-there-a-supported-way-to-specify-fall-back-fonts), it would be nice if there was a larger cascade of appropriate fonts.

[Potherca]

Good point!

We'll need to decide on the exact order of the font stack, but in the past, I've seen this being used for Comic-style fonts:

DefaultFontName: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive, sans-serif;

[kirchsth]

Hi,
I checked the fonts on the plantuml server, but in reality I found none of the fonts (there is a "SansSerif" but not a "sans-serif").

@startuml
listfont aeiou
@enduml

Found fonts see below.

@languitar: which font was your solution?

@Potherca: I cannot see a set of useful fonts. Which fonts should be used?

Additional I think this font selection is not working at all. I entered a plantuml forum entry.

I see only one solution; we use a pattern like

@startuml
''''''''''''''''' select custom font before C4.puml is loaded
!$FONT_NAME_SKETCH = "Courier"

''''''''''''''''' include (with missing extension)
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

' missing extension which has to be added to C4.puml
!ifndef $FONT_NAME_SKETCH
  !$FONT_NAME_SKETCH = "Comic Sans MS"
!endif

!procedure LAYOUT_AS_SKETCH()
skinparam backgroundColor #EEEBDC
skinparam handwritten true
skinparam defaultFontName $FONT_NAME_SKETCH
center footer <font color=red>Warning:</font> Created for discussion, needs to be validated
!endprocedure

''''''''''''''''' diagram itself
LAYOUT_AS_SKETCH()

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

BR Helmut

[Potherca]

I think the main use-case for this would not be standard plantuml server but a local or custom setup.

Besides starting with a comic, and ending in a generic sans-serif, I think DejaVu Sans (or Sans Light) might be a good match for somewhere in between.

I think exposing the font as a variable is a good idea, which we can combine with setting a more extensive font stack.

[kirchsth]

You are right, local I have >100 fonts.
But I still have the problem with the font stack, some combinations are working some not (I see no pattern).

[Potherca]

I'm inclined to move forward with the suggested changes regardless of the font-stack issue in PlantUML, as that will most likely be resolved eventually. Playing around with the stack might even lead to the discovery of the root cause of things n ot working?

[kirchsth]

Hi @languitar, @Potherca

I try to support configurable sketch styles (incl. fonts) with a new call

SET_SKETCH_STYLE($bgColor="_dont_change_", $fontColor="_dont_change_", $warningColor="_dont_change_", $fontName="_dont_change_", $footerWarning="_dont_change_", $footerText="_dont_change_")

' and it can be used like 

SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="gray", $warningColor="white", $fontName="A not existing, cursive, Comic Neue, Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif", $footerWarning = "Sketch", $footerText = "Created for discussion")

But I found following problems:
a) changed font color changes all font colors (is a new bug in PlantUML, I expect a fast bugfix)
b) if only one font is defined the support depends on the output formats (see below), but it can be changed
c) font cascade is not working (here I don't know if we get a bugfix)

Best regards
Helmut

SVG

PNG

the complete sample

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

!global $SKETCH_BG_COLOR = "#EEEBDC" 
!global $SKETCH_FONT_COLOR = ""
!global $SKETCH_WARNING_COLOR = "red"
!global $SKETCH_FONT_NAME = "Comic Sans MS"
!global $SKETCH_FOOTER_WARNING = "Warning:"
!global $SKETCH_FOOTER_TEXT = "Created for discussion, needs to be validated"

!unquoted procedure SET_SKETCH_STYLE($bgColor="_dont_change_", $fontColor="_dont_change_", $warningColor="_dont_change_", $fontName="_dont_change_", $footerWarning="_dont_change_", $footerText="_dont_change_")
!if $bgColor != "_dont_change_"
  !global $SKETCH_BG_COLOR = $bgColor
!endif
!if $fontColor != "_dont_change_"
  !global $SKETCH_FONT_COLOR = $fontColor
!endif
!if $warningColor != "_dont_change_"
  !global $SKETCH_WARNING_COLOR = $warningColor
!endif
!if $fontName != "_dont_change_"
  !global $SKETCH_FONT_NAME = $fontName
!endif
!if $footerWarning != "_dont_change_"
  !global $SKETCH_FOOTER_WARNING = $footerWarning
!endif
!if $footerText != "_dont_change_"
  !global $SKETCH_FOOTER_TEXT = $footerText
!endif
!endprocedure

!procedure LAYOUT_AS_SKETCH()
  skinparam handwritten true
!if $SKETCH_BG_COLOR > ""
  skinparam backgroundColor $SKETCH_BG_COLOR
!endif
!if $SKETCH_FONT_COLOR > ""
  skinparam defaultFontColor $SKETCH_FONT_COLOR
!endif
!if $SKETCH_FONT_NAMES > ""
  skinparam defaultFontName $SKETCH_FONT_NAME
!endif
!if $SKETCH_FOOTER_WARNING > "" || $SKETCH_FOOTER_TEXT > ""
  !$line = "footer <font color=" + $SKETCH_WARNING_COLOR + ">"+ $SKETCH_FOOTER_WARNING + "</font> " + $SKETCH_FOOTER_TEXT
  $line
!endif
!endprocedure

' SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="gray", $warningColor="white", $fontName="A not existing, cursive, Comic Neue, Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif", $footerWarning = "Sketch", $footerText = "Created for discussion")

SET_SKETCH_STYLE($bgColor="lightblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion")

' Open problem: DefaultFontColor changes ALL font colors (not only the undefined) removed $fontColor="gray"
' (I hope I get a fix for it)
' SET_SKETCH_STYLE($fontColor="gray")

' Open problem: (multiple) fonts not working, the correct one has to be known and png(?) output is required
' png: font found on server side (svg: a different font found on client side)
SET_SKETCH_STYLE($fontName="jlm_cmmi10")
' png font on server side
' SET_SKETCH_STYLE($fontName="VL Gothic")

' both are not working at all 
' SET_SKETCH_STYLE($fontName="Not existing, jlm_cmmi10, VL Gothic, sans-serif")

LAYOUT_AS_SKETCH()

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

[kirchsth]

Problem a) changed font color changes all font colors (is a new bug in PlantUML, I expect a fast bugfix)
https://forum.plantuml.net/15539/skinparam-defaultfontcolor-overwrittes-existing-definitions

Updated: fixed in PlantUML

[kirchsth]

Problem c) it could be that we get a bugfix
https://forum.plantuml.net/14842/specify-fall-back-fonts-is-not-working

[kirchsth]

@languitar, @Potherca: A first version can be tested via my extended branch
Independent of c) it works.
But I have questions related to the $fontColor.
a) Which parts of the diagram should get the changed font color too (e.g. unformatted arrows, borders, ...)
b) Or can/should I skip the $fontColor (there could be only a problem if the background color is lightgray(?) too)

What do you mean?
Thank you and best regards
Helmut

@startuml LAYOUT_AS_SKETCH Sample
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml

SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion")

' PNG with font jlm_cmmi10 (typically another font is used)
' SET_SKETCH_STYLE($fontName="jlm_cmmi10")

' SVG with fallback fonts MS Gothic,Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif (typically without "MS Gothic")
SET_SKETCH_STYLE($fontName="MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif")

LAYOUT_AS_SKETCH()

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

PNG with font jlm_cmmi10

SVG with fallback fonts MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif