How can I both stroke and fill with NSAttributedString w/ UILabel

Question

Is it possible to apply both stroke and fill with an NSAttributedString and a UILabel?

score 99 · Accepted Answer · edited Nov 13 '19 at 04:54

99

Yes, the key is to apply a Negative value to the NSStrokeWidthAttributeName If this value is positive you will only see the stroke and not the fill.

Objective-C:

self.label.attributedText=[[NSAttributedString alloc] 
initWithString:@"string to both stroke and fill" 
attributes:@{
             NSStrokeWidthAttributeName: @-3.0,
             NSStrokeColorAttributeName:[UIColor yellowColor],
             NSForegroundColorAttributeName:[UIColor redColor]
             }
];

Thanks to @cacau below: See also Technical Q&A QA1531

Swift 4 version:

let attributes: [NSAttributedStringKey : Any] = [.strokeWidth: -3.0,
                                                 .strokeColor: UIColor.yellow,
                                                 .foregroundColor: UIColor.red]

label.attributedText = NSAttributedString(string: text, attributes: attributes)

Swift 5.1 version:

let attributes: [NSAttributedString.Key : Any] = [.strokeWidth: -3.0,
                                                  .strokeColor: UIColor.yellow,
                                                  .foregroundColor: UIColor.red]

label.attributedText = NSAttributedString(string: text, attributes: attributes)

edited Nov 13 '19 at 04:54

Ky -

30,724
51
192
308

answered Apr 16 '13 at 22:01

Piotr Tomasik

9,074
4
44
57

2

Note that the "outline" will be a inner outline, not an outer one - i.e. the outline will eat into the fill area. – Jason Apr 29 '13 at 17:56
4

@Jason is there a way to generate a fill "outside" with UILabel + AttributedText? – Piotr Tomasik Apr 29 '13 at 22:03
1

AWESOME! Thanks for the tip. This saved me a ton of time! – Andrew Theken Jun 13 '14 at 14:41
See also [Technical Q&A QA1531](https://developer.apple.com/library/mac/qa/qa1531/_index.html) – cacau Oct 20 '14 at 05:24
1

Thanks, when I first saw negative values for that key I was wondering why. I set a positive value instead and got a stroke with no fill before I came upon this answer. – John Ernest Jun 11 '19 at 15:23
good answer! this helped me today. – Dilip Agheda Dec 30 '21 at 05:55

gvuksic · Answer 2 · 2017-04-10T11:28:45.957

Swift version:

let attributes = [NSStrokeWidthAttributeName: -3.0,
                      NSStrokeColorAttributeName: UIColor.yellowColor(),
                      NSForegroundColorAttributeName: UIColor.redColor()];

label.attributedText = NSAttributedString(string: "string to both stroke and fill", attributes: attributes)

Swift 3 version:

    let attributes = [NSStrokeWidthAttributeName: -3.0,
                      NSStrokeColorAttributeName: UIColor.yellow,
                      NSForegroundColorAttributeName: UIColor.red] as [String : Any]

    label.attributedText = NSAttributedString(string: "string to both stroke and fill", attributes: attributes)

score 2 · Answer 3 · answered Nov 09 '17 at 12:05

Now Latest in swift apple remove the [String: Any] for attributes key value declaration use as [NSAttributedStringKey : Any]

    let strokeTextAttributes = [
        NSAttributedStringKey.strokeColor : UIColor.green,
        NSAttributedStringKey.foregroundColor : UIColor.lightGray,
        NSAttributedStringKey.strokeWidth : -4.0,
        NSAttributedStringKey.font : UIFont.boldSystemFont(ofSize: 52)
        ] as [NSAttributedStringKey : Any]

    hello_cell_lb.attributedText = NSAttributedString(string: "\(hello_array[indexPath.row])", attributes: strokeTextAttributes)

thank you

score 2 · Answer 4 · answered Jun 11 '18 at 00:17

Swift 4 version:

let attributes: [NSAttributedStringKey : Any] = [.strokeWidth: -3.0,
                                                 .strokeColor: UIColor.yellow,
                                                 .foregroundColor: UIColor.red]

label.attributedText = NSAttributedString(string: text, attributes: attributes)

score 0 · Answer 5 · answered Dec 22 '20 at 12:32

This is an example of Stroke and Oblique/tilt/slant text in UITextView

    public func setAttributedText(fontStyle: INSTextFontPickerStyle, strokeColor: UIColor = UIColor.white, foregroundColor: UIColor = UIColor.black, isObliqueness: Bool = false, isStrokes: Bool = false) {
        self.fontStyle = fontStyle

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = innterTextView.textAlignment

        // Tilting the text
        let obliquenessValue = isObliqueness ? NSNumber(value: 0.2) : NSNumber(value: 0) // The angle of tilting in clockwise

        // Stroke a line in text edges
        var strokeWidth = NSNumber(value: 0.0)
        var _strokeColor = UIColor.clear
        if isStrokes || fontStyle == .strokeEdges {
            strokeWidth = NSNumber(value: -2.0) // The width of stroke
            _strokeColor = strokeColor
        }
        
        textView.attributedText = NSAttributedString(string: textView.text, attributes: [
            NSAttributedString.Key.foregroundColor : foregroundColor,
            NSAttributedString.Key.font : UIFont.systemFont(ofSize: (actualFontSize > 0 ? actualFontSize : fontSize)),
            NSAttributedString.Key.paragraphStyle : paragraphStyle,
            NSAttributedString.Key.strokeColor : _strokeColor,
            NSAttributedString.Key.strokeWidth : strokeWidth,
            NSAttributedString.Key.obliqueness: obliquenessValue
        ])
    }

How can I both stroke and fill with NSAttributedString w/ UILabel

5 Answers5

Linked

Related