In order to create outlined text with a shadow, I am using (basically) the following code technique. The problem is that this works perfectly on Mac, but not at all on Windows. Here’s the code snippet:
Var xPos As Double = 50 // Actual value calculated to center line
Var yPos As Double = 100 // Actual value calculated to allow custom leading / line-spacing
Var p As Picture = new Picture(1600,900,32)
// Setup base font and colors
p.Graphics.FontName = "Arial Black"
p.Graphics.FontSize = 60
p.Graphics.DrawingColor = &cffffff00
// Setup ShadowBrush
p.Graphics.ShadowBrush = New ShadowBrush
p.Graphics.ShadowBrush.BlurAmount = fontSize * 0.05
p.Graphics.ShadowBrush.ShadowColor = colorShadow
Var shadowOffsetVal As Integer = fontSize * 0.05
p.Graphics.ShadowBrush.Offset = New Point( shadowOffsetVal, shadowOffsetVal)
// Output text with Shadow
p.Graphics.DrawText("Lorem ipsum…blah blah blah",xPos,yPos) // Identical to below
// Overlay black outline
p.Graphics.ShadowBrush = Nil
p.Graphics.Outline = True
p.Graphics.DrawingColor = &c00000000
p.Graphics.DrawText("Lorem ipsum…blah blah blah",xPos,yPos) // Identical to above
Yes, the problem exists to some degree with nearly ever font I tested. I am guessing that is a combination of how Windows handles the “Bold” setting, as well as some internal automatic kerning that seems to be happening. Here is another screen shot to show what I mean:
This looks “pretty good,” but if you look close, there are alignment glitches.
That offsets the outline slightly (and makes it slightly better in the above example when Arial Bold was erroneously substituted for Arial Black). Unfortunately, it doesn’t solve the Arial Black problem. Thanks!
Correct, the Arial Black font does exist on both machines. In fact, you can see it in action on Windows as the background white text is indeed Arial Black (in the first Windows screen shot).
Please note that the folks at Xojo are actually looking into this, as well: Issue 73748
That looks like a font hinting issue. Fonts can contain “hints” that the OS uses to tweak the appearance of text to make it more legible - for example, if text is small, the hint might tell the OS to thicken a particular line to make it more legible.
But those hints only apply when rendering the text to a device, like a screen, because they are context-sensitive. If you instead ask the OS for the outline shape of the text as a series of paths, you get the unhinted version, because the hints only apply if and when the text is rendered.
I’ve run into this in other languages. It’s just a hunch. The solution is to ask the OS for the outline paths and then use that path for both the fill and the outline, guaranteeing that they are identical.
I’ll amend my answer to say that it only applies to the screenshot given where the misalignment is very minor and affects very select, consistent portions of the text.
