Halo around font

I am putting a label over a complex background and in order to get it to be easily readable, i would like to have a 2 or 3 pixel halo around the characters. The “Shadow” feature does not do it well since the offset is only in one direction, not completely around the characters. Is there a way to use any of the advanced features to get a uniform halo effect around each character?

Hey @KaneoheKid

Would something like this suit your use case at all?

The main benefit is that you’d be able to toggle it via the blocks too

I also tried doing some overlapping two labels which wasn’t terrible, but I think I prefer the first option:

Incidentally, how much text are you working with? Are static images an option here?

1 Like

Hey @KaneoheKid What kind of app are you building?

I had some thoughts for if @domhnallohanlon suggestion didn’t work out for you.

It may be nice to create a card with a semi transparent background to sit over your photo and make the text more readable.

text on images isn’t great UI most of the time and makes it rather inaccessible to individuals with poor eyesight.

Thanks for your insights @domhnallohanlon and @jared. Yes, backgrounds can be distracting for sure. I’ve tried both the text field background shading and shadows, and neither is all that good with some of my backgrounds so I had wanted to see if a strong halo, or as Microsoft calls it “glow” which extends a few pixels in all directions not just one, would work better. I tried lots of variations using the advanced features “Text Style” and “Styling” but could not figure out how to get the halo effect. I was just hoping that somebody else may have come up with a solution that i could try.

Static images might be an option, but it could be a challenge to get them to look good on both phones and notebooks. In this case, an overlay would not work since the text is labels for buttons.

Ah, got it. That makes sense @KaneoheKid

The more I look at this design the more I like it - reminds me of a stream deck.

I think, to keep the UX more consistent, I’d move these bottom 4 items into a nav bar and then build out the dashboard/stream deck with the top 5 items

1 Like

You can set buttons with background any image you want… that image can be edited like a Text floating on transparent background… This way you can edit that text how you want it on any image editor. (let button’s label empty, backroud edited image will be the label :wink:

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.