[Feature] add outline to label and button text

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?YES

Tell us about the problem

Currently there is no way to add outline for texts in nativescript.
but we need that in cases the color of Label ( or Button with transparent background) and parent are same so if we don't add an outline to text of button and label the element will be invisible.

I found that for android this can be done using shadaw for Label and stroke for button.

It would be really good if we had CSS property to set outline of text.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

I actually tried to do this yesterday with native code but couldn't solve it. However, in iOS you can at least create a shadow effect using this:

var Color = require("color").Color;

function viewShadow(view, hex, props = {}) {
  var defaults = {
    alpha: 1,
    x: 0, y: 0,
    radius: 1,
  };
  for(var key in defaults) if(!props.hasOwnProperty(key)) props[key] = defaults[key];
  
  if(view.ios) {
    nativeView = view.ios;
    nativeView.layer.masksToBounds = false;
    nativeView.layer.shadowOpacity = props.alpha;
    nativeView.layer.shadowRadius = props.radius;
    nativeView.layer.shadowColor = new Color(hex).ios.CGColor;
    nativeView.layer.shadowOffset = CGSizeMake(props.x, props.y);
  }
};

This won't create a perfect outline though because you cannot control the intensity. What I tried to do after some googling was this:

function textOutline(view, color = "#ff0000", width = -1.0) {
  color = new Color(color);
  width = parseFloat(width);
  
  if(view.ios) {
    let nativeView = view.ios;
    let attributes = NSDictionary.dictionaryWithDictionary({
      NSStrokeColorAttributeName: color.ios,
      NSForegroundColorAttributeName: view.color.ios,
      NSStrokeWidthAttributeName: width
    });
    let attributedString = NSAttributedString.alloc().initWithStringAttributes(view.text || "", attributes);
    nativeView.attributedText = attributedString;
  }
}

But it doesn't work. It should, but nothing happens.

@kazemihabib

Hi @kazemihabib,

This issue could be related to #550, where has been logged a feature request for implementing shadow CSS property for the components. Could you verify the attached issue and to vote for it if this is your case?

Regards,
@tsonevn

@tsonevn

Hi, @tsonevn

that issue is about box-shadaw but my requested feature is text-shadaw.
this page shows the difference http://www.w3schools.com/css/css3_shadows.asp .

@tsonevn

@tsonevn - box-shadow and text-shadow are different things. Also, what's being requested here is an outline feature. Think "Stroke" in Photoshop compared to "Outer shadow" or "Outer glow". So it's not the same request as #550.

Any update on this?

@Cayan

Hi @Cayan,
This feature is still under review and I could not commit to the exact time when this functionality will be included in NativeScript.
Regarding that, any PR will be highly appreciated and if all the test pass, it will be included in the modules. For further info review this article.

+1 text-shadow / stroke feature

+1 text-shadow

Yes, please add the text-shadow property.

Please, add text-shadow property!! <3

I need text-shadow property so bad

+1!!!

+1

I can't believe a modern framework doesn't have this feature. Its one of the very basic things in terms of UI.

I've found a way to stroke easily a label text:

function textLoaded(args) {

    var attributes = {
        NSStrokeColor: UIColor.blackColor,
        NSColor: UIColor.whiteColor,
        NSStrokeWidth: 2
    };

    var attributedString = NSAttributedString.alloc().initWithStringAttributes( args.object.text, attributes );

    args.object.ios.attributedText = attributedString;
    
}

The stated spec https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke will be supported in next minor release.

feat(css): text-stroke support

feat(css): text-stroke support (#10399)

feat(css): text-stroke support (NativeScript#10399)

Navigation Menu

Repository navigation

[Feature] add outline to label and button text #3597

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?YES

Tell us about the problem

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Feature] add outline to label and button text #3597

Description

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?YES

Tell us about the problem

Activity

NordlingDev commented on Feb 10, 2017

tsonevn commented on Feb 14, 2017

kazemihabib commented on Feb 14, 2017

NordlingDev commented on Feb 14, 2017

Cayan commented on Jun 21, 2017

tsonevn commented on Jun 21, 2017

34r7h commented on Nov 27, 2017

bzaruk commented on Jan 17, 2018

elalienx commented on May 28, 2018

gabrielsmelo commented on Apr 2, 2019

tanekim88 commented on Apr 9, 2019

frabanca commented on Apr 15, 2019

Omi231 commented on May 17, 2019

Omi231 commented on May 17, 2019

Macarthurval commented on Jan 30, 2020

NathanWalker commented on May 12, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions