Graphics.DrawText with Outline - Mac vs Windows

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

Mac screen shot:

Windows screen shot of exact same code:

I have tried the following, and none of it worked:

  • Setting: p.Graphics.Bold = True
  • Creating and using TextShape instead of DrawText
  • Trying different fonts besides Arial Black
    • Some fonts look “better”, but none of them have the outline align perfectly like it does on Mac.
    • Windows also seems to KERN when Outline = False, and to NOT KERN when Outline = True

Is there something I’m doing wrong? Or does Windows simply handle fonts in a way that you cannot overlay outlines? Any help would be appreciated.

It looks like the outline on Windows uses Arial font instead of Arial Black.
Do you have the same problem using Arial font?

Best to open an issue for this.

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.

I will also take your suggestion, and open an issue.

I have created the following issue, so I’m putting the link here for posterity:

What’s the result if you draw the outlined text on Window at x/y +/- Graphics.PenSize / 2?

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!

Did you have on both OS:
Arial Black

fonts ?

I mean, you are not using a Black Style running on one OS…

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.