How to maintain indentations of HTML content in UITextView in Swift?

Question

I'm showing a lists & sublists in UITextView but it doesn't show indentation for sublists. Here is my code, getting data from HTML format here.

extension NSAttributedString {
convenience public init?(styled: String, textAlignment: NSTextAlignment = .center, color: UIColor = .black) {
    guard let data = styled.data(using: String.Encoding.unicode) else {
        return nil
    }
    do {
        let string = try NSMutableAttributedString(data: data,
                                                   options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil)
        let paragraphStyle = NSMutableParagraphStyle()

        paragraphStyle.tabStops = [NSTextTab(textAlignment: .natural, location: 0, options: Dictionary<NSTextTab.OptionKey, Any>())]
        paragraphStyle.defaultTabInterval = 5

        string.addAttributes(
            [NSAttributedStringKey.foregroundColor: color,NSAttributedStringKey.paragraphStyle:paragraphStyle],
            range: NSMakeRange(0, string.length)
        )

        self.init(attributedString: string.removingTrailingNewLine)
    } catch {
        return nil
    }
}

HTML data to be shown, although it contains ul, ol tags but adding CSS for those tags doesn't apply inside UITextView.

    <html>

    <head>
    <style type="text/css">
    body {
      font-size: 14px;
      font-family: -apple-system, Arial, sans-serif;
      color: black;
      margin-bottom: 0px;
      padding-bottom: 0px;
      line-height: 20px;
    }

    ul,
    ol {
      padding-left: 10px;
    }
    </style>
    </head>

    <body>
    <p>Professionals are often vastly more comfortable solving analytical, convergent problems than those requiring more divergent thinking. In this article, Olivier Leclerc and Mihnea Moldoveanu share some strategies for stimulating truly novel thinking.
    They introduce five "flexons," which can be thought of as "languages" for shaping problems that help you bring diverse perspectives to problem solving:</p>

  <ul type="disc">
    <li>Networks</li>
    <li>Evolutionary</li>
  </ul>


  <ol>
    <li>Decision-agent</li>
    <li>System dynamics</li>
    <li>Information-processing :
      <ol>
        <li>Decision-agent</li>
        <li>System dynamics</li>
        <li>Information-processing</li>
      </ol>
    </li>
  </ol>


  <ul type="disc">
    <li>Networks :
      <ul>
        <li type="circle">Decision-agent</li>
        <li type="circle">System dynamics</li>
      </ul>
    </li>
  </ul>

</body>

</html>

Here is how it shows on device. One more thing that I would like to point out if I add paragraph styling from Swift side, then list shows like this, If I don't add paragraph styling then Lists but then padding more than my requirement.

Where is HTML Example? just add it – Abdelahad Darwish May 15 '18 at 09:09 — Abdelahad Darwish, May 15 '18 at 09:09
@AbdelahadDarwish added HTML and some details too. – Zubair May 15 '18 at 09:19 — Zubair, May 15 '18 at 09:19

score 3 · Accepted Answer · answered May 15 '18 at 09:46

Just if you receive Html data Display it by using attributedText

Convert html to AttributedString :

    // Read Html of Your example From Bundle

    guard let  htmlFile =  Bundle.main.path(forResource: "dataHtml", ofType: "html") else { return}

    // Safe convert html to string
    guard let  html =  try? String(contentsOfFile: htmlFile, encoding: String.Encoding.utf8)else { return}

    let options = [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html]

    // Safe string  to Data

    guard let  htmlData =  NSString(string: html).data(using: String.Encoding.unicode.rawValue) else { return}

    // Safe attributedString from data
    guard let  attributedString =  try? NSAttributedString(data: htmlData, options: options, documentAttributes: nil) else { return}

    textView.attributedText = attributedString
    textView.textColor = .red // you can comment  or change font and color

Result on your example :

I want to control padding using `ul,ol{padding-left: 10px;}`, but its not working, any idea? — Zubair, May 15 '18 at 11:24
you can make processing to html before display , I will do it for you minutes — Abdelahad Darwish, May 15 '18 at 11:49
@Zubair hey, I have the same problem, it seems the `padding` attributes are not supported by NSAttributedString. Have you found any way to solve this issue? — Kyle Xie, Sep 14 '22 at 11:29

How to maintain indentations of HTML content in UITextView in Swift?

1 Answers1