HTML tags in UILabel don't work and instead got shown

Question

I've got this HTML text:

"<style>* {font-size: 12pt !important;color: #000000 !important;font-family: Montserrat-Regular !important;}</style>Perform the following steps:<br><u>Option 1:</u><br><p>1) Upon receiving a push notification alert, tap on the push notification to launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p><br><u>Option 2:</u><br><ol><p>1) If you didn’t receive push notification, you may launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p>"

I'm trying to show this HTML text properly in a UILabel. I have set the UILabel to Attributed This is my extension to convert String to NSAttributedString with HTML format:

extension String {
    func attributedStringFromHTML() -> NSAttributedString? {
        guard let data = "\(self)"
            .data(using: .utf8, allowLossyConversion: false) else {
            Log.error(category: .transaction, message: "Unable to decode data from html string: %@", self)
            return nil
        }
        
        let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
            .documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ]
        
        if let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) {
            return attributedString
        } else {
            Log.error(category: .transaction,
                      message: "Unable to create attributed string from html string: %@",
                      self)
            return nil
        }
    }
}

This is the result. As you can see, the CSS style is not shown and the font is changed so CSS worked. However, the tags are shown and not giving the effects that they should provide:

Can you help me with this? Thanks.

Answer 1

I tried your code and it works fine. I think it's how you use the html string. Try to put it between """html string here""" for long string. You can also replace "\(self)" by self because it's already a string.

let string = """
"<style>* {font-size: 12pt !important;color: #000000 !important;font-family: Montserrat-Regular !important;}</style>Perform the following steps:<br><u>Option 1:</u><br><p>1) Upon receiving a push notification alert, tap on the push notification to launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p><br><u>Option 2:</u><br><ol><p>1) If you didn’t receive push notification, you may launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p>"
"""

label.attributedText = string.attributedStringFromHTML()