Search code examples
iosswiftuitextviewpaddingnsattributedstring

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

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. Indentation issue of sublists on iOS

Solution

  • 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 :

    enter image description here