Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NSAttributedString and html styling (bullet alignment)

In my iOS app I'm using NSAttributedString to generate a list of bullets. Unfortunately I'm struggling with making the bullets look presentable. My first attempt was to use regular text and a unicode character for the bullets, basically using a string like this:

var attributedString = NSMutableAttributedString(
    string: "Here is a list of bullets and a paragraph introducing them, note that this paragraph spans multiple lines\n" +
    "• This is the first bullet\n" +
    "• Here is a second bullet\n" +
    "• And here is a third bullet with a lot of text such that it overflows to the next line"
)

The result was this:

enter image description here

I like how the bullets look, but the overflowing text in the last bullet should be aligned with the line before and I couldn't figure out how to achieve that with plain text (without applying the same alignment to the paragraph above).

My 2nd attempt was to use html in NSAttributedString via NSHTMLTextDocumentType, and use <ul> and <li> elements to generate the bullets.

let content = "Here is a list of bullets and a paragraph introducing them, note that this paragraph spans multiple lines" +
    "<ul>" +
         "<li>This is the first bullet</li>" +
         "<li>Here is a second bullet</li>" +
         "<li>And here is a third bullet with a lot of text such that it overflows to the next line</li>" +
    "</ul>"
var attributedString = try! NSMutableAttributedString(
    data: content,
    options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
    documentAttributes: nil
)

That fixed the first issue but introduced a new one:

enter image description here

The bullets are now spaced too far (both from the left edge and the text on the right). I tried to use the typical html/css tricks to fix the alignment (<li style="text-indent: -10px;">) but those styles seem to be ignored by NSAttributedString.

I tried to remedy this with an additional NSMutableParagraphStyle but it seems to do more harm than good. Here is what I tried:

var paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.firstLineHeadIndent = 0
paragraphStyle.headIndent = 20
attributedString.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: attributedStringRange)

And here is what I got:

enter image description here

As you can see, it only made things worse, here are my issues with it:

  • It does offset the 2nd line, but I only want that effect for the bullets, not the paragraph before (I guess I can remedy that by decreasing the range over which the effect gets applied)
  • I have to guess/hardcode the offset, in my example I picked 20 and that wasn't enough for the bullets given the current font settings, which could change
  • For some reason the bullet spacing is even more stretched out now for no reason at all, it seems like just applying a vanilla NSParagraphStyle without doing anything does this and I see no option to fix this.

All I really want is for my bullet spacing to look similar to the first screenshot while the overflow indent for second line to look like the second without having to hardcode exact pixel positions. Could you guys help me out?

Thanks

like image 783
Alexander Tsepkov Avatar asked May 25 '16 13:05

Alexander Tsepkov


People also ask

How do you align text in bullet points in HTML?

You can use . parentOfUl{ text-align:center;} and then ul{ display:inline-block; }, and at last li{ text-align:center; }.

What is NSAttributedString?

An NSAttributedString object manages character strings and associated sets of attributes (for example, font and kerning) that apply to individual characters or ranges of characters in the string. An association of characters and their attributes is called an attributed string.


1 Answers

Use <table> instead of <ul><li> to handle the bullet alignment. Styles like ul{margin:0;padding:0} or li{margin-left: 0;} will be ignored.

Example:

let html = "<table>" +
            "<tr><td valign=\"top\" style=\"padding-right:16px\">•</td><td valign=\"top\">text 1</td></tr>" +
            "<tr><td valign=\"top\" style=\"padding-right:16px\">•</td><td valign=\"top\">text 2</td></tr>" +
            "</table>"

let attributedString = try! NSAttributedString(data: html.data(using: String.Encoding.utf8)!,
                               options: [.documentType: NSAttributedString.DocumentType.html,
                                         .characterEncoding: String.Encoding.utf8.rawValue,],
                               documentAttributes: nil)
like image 126
Peter Kreinz Avatar answered Sep 20 '22 02:09

Peter Kreinz