Making a text shadow on the web

Targets Web
1

I am using this code to create a text shadow on a desktop app with a canvas control. I’d like to know how to do this in a web app. The web app supports similar syntax, like a rectangle shadow, but not for text. Is there a solution using the “style” syntax?

My code for a desktop app in a canvas control::

g.ShadowBrush = New ShadowBrush(2, 2, Color.RGB(50,70,90),3) ’ x-Offset, y-Offset, Color, Blur Amount

g.DrawingColor = Color.RGB(200,120,130)
g.FontName = “Helvetica”
g.FontUnit = FontUnits.Point
g.FontSize = 36
g.Bold=True

g.DrawText( “ADDRESS BOOK”, 0, 40)
g.ShadowBrush=Nil

Thank you,
fritz

2

You can use the CSS text-shadow, see info here:

Xojo code like:

me.Style.Value("text-shadow") = "#32465a 2px 2px 3px"
1 Like
3

Alberto

Clearly you are correct. I know I tried some variation of this that didn’t error out. Maybe I left out the dash.
At any rate, I tried several orderings of this code:

me.Style.Value(“text-shadow”) = “#333333 10px 10px 10px”
g.DrawingColor = Color.RGB(200,200,130)
g.FontName = “Helvetica”
g.FontSize = 36
g.Bold=True
g.DrawText( “ADDRESS BOOK”, 0, 40)

I’m going to guess this doesn’t work because A. It’s in the wrong order or B. Mixing the “g” syntax with the CSS style.value syntax isn’t the way to do it. I tried to arrange it like I have it in the desktop version. I inverted the order but that didn’t help. Everything still works except for the shadow.

I could do this all with “style.value” except that this is a canvas and in CSS I’d need a “before” tag to insert text (I’m assuming).

If you have any thoughts on this, please advise at your convenience.

Your assistance so far is much appreciated. At least I know this CSS value is supported. I was just figuring text shadow wasn’t supported in Xojo web.

fritz

4

The text-shadow works with Text elements, like WebLabel.

I don’t have experience with graphics/Canvas. I don’t think text-shadow will work if you want to add a shadow to a graphics element. Sorry about that.

I understand graphics are differences between Desktop apps and Web apps. Maybe someone with more experience could give you an idea of why the code doesn’t produce the same result, if something needs to be adjusted, or if you need to file a bug/feature request case.

5

Oh yeah! It works with labels just fine! Works with buttons too, which is even more important!
That’s really all I need. If I need to put text in a canvas, I can create text with effects in Affinity or another graphics program.
You’ve given my Xojo web development program a giant push forward!

Thank you for your time and trouble, Alberto.

fritz

1 Like