Draw a line inside a UITextView - NSAttributedString

Question

I wish to draw a customizable line inside a UITextView consisting of some text (using NSAttributedString)

Here's what I tried

NSString *unicodeStr = [NSString stringWithFormat:@"%C%C%C", 0x00A0, 0x0009, 0x00A0]; //nbsp, tab, nbsp
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:unicodeStr];
NSRange strRange = NSMakeRange(0, str.length);

NSMutableParagraphStyle *const tabStyle = [[NSMutableParagraphStyle alloc] init];
tabStyle.headIndent = 16; //padding on left and right edges
tabStyle.firstLineHeadIndent = 16;
tabStyle.tailIndent = -16;
NSTextTab *listTab = [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentCenter location:40 options:@{}]; //this is how long I want the line to be
tabStyle.tabStops = @[listTab];
[str  addAttribute:NSParagraphStyleAttributeName value:tabStyle range:strRange];
[str addAttribute:NSStrikethroughStyleAttributeName value:[NSNumber numberWithInt:2] range:strRange];

But no matter what value I provide for the tab stop location (40 in this case) and tailIndent (-16 here), the line only respects the headIndent and spans the entire UITextView width (minus the headIndent of course).

EDIT - I am pretty sure the issue is because I am not using the correct unicode chars (although they seem to be the logical choice). In case this gives someone a hint, if I add a space after the 2nd nbsp i.e. towards the end, the tab is limited to a single tab length

Can you provide an example of what you want the text to look like? — Danny Bravo, Mar 16 '16 at 09:58
I'm trying to implement an hr tag (horizontal rule). They are not supported by NSAttributedString when converting from html — lostInTransit, Mar 17 '16 at 03:19

Buu Bui · Accepted Answer · 2016-03-18T10:28:37.623

Is it your expected result?

Can you try this:

NSTextTab *listTab = [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentCenter location:self.textView.frame.size.width - tabStyle.firstLineHeadIndent + tabStyle.tailIndent options:@{}];

And this is the full code:

- (void) viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  NSString *unicodeStr = @"\n\u00a0\t\t\n";
  NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:unicodeStr];
  NSRange strRange = NSMakeRange(0, str.length);

  NSMutableParagraphStyle *const tabStyle = [[NSMutableParagraphStyle alloc] init];
  tabStyle.headIndent = 16; //padding on left and right edges
  tabStyle.firstLineHeadIndent = 16;
  tabStyle.tailIndent = -70;
  NSTextTab *listTab = [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentCenter location:self.textView.frame.size.width - tabStyle.headIndent + tabStyle.tailIndent options:@{}]; //this is how long I want the line to be
  tabStyle.tabStops = @[listTab];
  [str  addAttribute:NSParagraphStyleAttributeName value:tabStyle range:strRange];
  [str addAttribute:NSStrikethroughStyleAttributeName value:[NSNumber numberWithInt:2] range:strRange];

  NSAttributedString *htmlStr = [[NSAttributedString alloc] initWithData:[@"<h1>Lorem ipsum dolor sit er elit lamet</h1>" dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];

  [str insertAttributedString:htmlStr atIndex:0];
  [str appendAttributedString:htmlStr];

  self.textView.attributedText = str;
}

Did already, didn't work. I am pretty sure it has something to do with the nbsp on either sides of the tab, but I can't figure out why — lostInTransit, Mar 18 '16 at 09:30
Is this what I want - yes. But I have some text before and after (html) and that seems to mess up the horizontal rule (I guess?). The code doesn't seem to be very different from what I have. Not sure why it wouldn't work for me. — lostInTransit, Mar 18 '16 at 10:01
why u pass the 'self.textView.frame.size.width' reference when this size is not calculated? — famfamfam, Oct 20 '20 at 08:02

score 1 · Answer 2 · answered Apr 30 '16 at 15:36

Here's what I did to solve the same issue. It uses a subclass of NSTextTab:

import UIKit

class RightAnchoredTextTab : NSTextTab {
    weak var textContainer : NSTextContainer!

    required init(textAlignment alignment: NSTextAlignment, location loc: CGFloat, options: [String : AnyObject], textContainer aTextContainer : NSTextContainer) {
        super.init(textAlignment: alignment, location: loc, options: options)
        textContainer = aTextContainer
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override var location: CGFloat {
        get {
           return textContainer.size.width-textContainer.lineFragmentPadding*2-super.location
        }
    }
}

And similar bits similar to other solutions:

func horizontalLine(indent : CGFloat = 30, width : CGFloat = 1) -> NSAttributedString
{
    let paragraphStyle = NSMutableParagraphStyle()

    paragraphStyle.tabStops = []
    paragraphStyle.addTabStop(NSTextTab(textAlignment: .Left, location: indent, options: [:]))
    paragraphStyle.addTabStop(RightAnchoredTextTab(textAlignment: .Right, location: indent, options: [:], textContainer : textView.textContainer))
    paragraphStyle.alignment = .Left

    let attributes = [NSParagraphStyleAttributeName : paragraphStyle, NSStrikethroughStyleAttributeName : width]

    textView.backgroundColor = UIColor.yellowColor()
    let ZeroWidthNonBreakingSpace = "\u{FEFF}"
    return  NSAttributedString(string: "\t\(ZeroWidthNonBreakingSpace)\t\(ZeroWidthNonBreakingSpace)\n", attributes:  attributes)
}

A few notes:

It will probably only work with a single square text container.
NSTextContainer has a lineFragmentPadding. If you've every wondered why you have to indent a right alignment tab by 10 this is it: the default value is 5.
prefixing the text with \n meant there was no strikethrough. No idea why.
This solution works with rotations etc as UITextView calls NSTextTab.location again when the bounds are changed.

It's working like a charm... I have 6 paragraphs and have to add the line at the end of each and the above solution works perfectly. Only one change I did as I need full separator line of the size of the textview, I modified this line - "return textContainer.size.width-textContainer.lineFragmentPadding*2" and I get what I want. Thanks !! — Dishant, May 07 '20 at 08:21

score 0 · Answer 3 · answered Oct 26 '20 at 12:52

for swift 5,

    let unicodeStr = "\n\u{00a0}\t\t\n"
    let str = NSMutableAttributedString(string: unicodeStr)
    let strRange = NSRange(location: 0, length: str.length)

    let tabStyle = NSMutableParagraphStyle()
    tabStyle.headIndent = 0 //padding on left and right edges
    tabStyle.firstLineHeadIndent = 0
    //tabStyle.tailIndent = -16
    let listTab = NSTextTab(textAlignment: .center, location: textView.frame.size.width-10, options: [:]) //this is how long I want the line to be
    tabStyle.tabStops = [listTab]
    str.addAttribute(.paragraphStyle, value: tabStyle, range: strRange)
    str.addAttribute(.strikethroughStyle, value: NSNumber(value: 2), range: strRange)
    str.addAttribute(.strikethroughColor, value: UIColor.label, range: strRange)
    str.addAttribute(NSAttributedString.Key.font, value: self.currentFont, range: strRange)
    str.addAttribute(NSAttributedString.Key.foregroundColor, value: UIColor.label, range: strRange)


    textView.textStorage.append(str)

    //To set cursor end of document
    let endPosition = self.textView.endOfDocument
    self.textView.selectedTextRange = self.textView.textRange(from: endPosition, to: endPosition)

Draw a line inside a UITextView - NSAttributedString

3 Answers3

Linked