Hello everyone! I'm new and have been banging my head against this issue. I'm wanting to put a stroke around text on a label and cannot figure out how to do something like this and I cannot find any documentation on it.
Has anyone done anything like this or know of a way to do it?
What is "a stroke"?
Are you asking how to set a border on a Perspective label component? If so,
A better way to do this is to create a new style on the Project Browser and then apply that style using the Classes dropdown on the component. That way you can ensure consistent look and feel across all labels and one edit on the style will update them all.
A stroke is a black border around something. In my case I want to add a black stroke around a white font. I have a situation where I have a label with white text that changes background color based on percent values. I want to add a black border around the text font so its easier to read when the background turns yellow with the white text.
Wouldn't it be easier to change the font color? If the background is white change the font color to black.
I don't think font in a label has a stroke and fill property, I think it's one property, color. But perhaps possible with some CSS whackery.
Maybe this, Adding Stroke to Web Text | CSS-Tricks - CSS-Tricks
Edit, tried this and it works:
.psc-font-test {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
OK. You are talking about font stroke and fill.
I don't think that's supported. See How To Add Text Outline With CSS - Kinsta®. for details on this but I Designer seems to reject the Webkit style instructions.
A simple solution is to use textShadow. Try the adding the following to the label's style properties:
textShadow : black 0px 0px 4px
https://docs.inductiveautomation.com/display/DOC81/Style+Reference#StyleReference-TextMenu
Text shadow is how I would do it too
Sorry for the delay, been meaning to reply back to this, but had other things I needed to figure out first. I originally thought to do the same thing with the shadow feature but I can't get it to work. Whenever I try to get the shadow function to work nothing happens. It seems pretty straight forward lol, not sure what I'm messing up.
You've added it to the label's textStyle property.
I have tried adding it to everything I can think of lol. But the results are the same, even when I add it to the label's style properties.
textShadow : #000000 0 0 4
is not the same as my suggested
textShadow : black 0px 0px 4px
Specifically, the px is non-negotiable. You can specify colors by hex but if you leave off the px it will refuse to set the shadow.
EDIT: playing around with it some more and it's that last value in particular, the shadow width, any non-zero value that absolutely has to have a px or other unit specified:
ha-ha oh wow. I can't believe I missed something so small. This helps so much you guys have no idea!
I'm glad you got a solution. Don't forget to mark "Solution" to whichever answer was the relevant one.
