How to display HTML in UITextView/UILabel with custom color, font, etc. in iOS using Swift

If you want to show a list that contains items in HTML in a UITableView or UICollectionView, it’s preferable to use the 3rd party library DTCoreText. It’s a lot faster than the native way. I have made a tutorial about it, here.

When you want to show a text from HTML content from a website to your app, you have to convert the text to an NSAttributedString format to display it correctly on a UITextView/UILabel.

In this tutorial, I’m going to saw you how to do this very quickly by using an extension that uses custom text color, font, and more with the help of CSS.

We’re not going to cover how to add a custom font to your iOS project in this tutorial, but we will focus only on the NSAttributedString implementation.

Just paste the following extension to your Extensions.swift file: 

extension String { private var convertHtmlToNSAttributedString: NSAttributedString? { guard let data = data(using: .utf8) else { return nil } do { return try NSAttributedString(data: data,options: [.documentType: NSAttributedString.DocumentType.html,.characterEncoding: String.Encoding.utf8.rawValue], documentAttributes: nil) } catch { print(error.localizedDescription) return nil } } public func convertHtmlToAttributedStringWithCSS(font: UIFont? , csscolor: String , lineheight: Int, csstextalign: String) -> NSAttributedString? { guard let font = font else { return convertHtmlToNSAttributedString } let modifiedString = "<style>body{font-family: '\(font.fontName)'; font-size:\(font.pointSize)px; color: \(csscolor); line-height: \(lineheight)px; text-align: \(csstextalign); }</style>\(self)"; guard let data = modifiedString.data(using: .utf8) else { return nil } do { return try NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue], documentAttributes: nil) } catch { print(error) return nil } } }
Code language: Swift (swift)

After that, go to your string you want to convert to NSAttributedString and place it like the example below:

myUILabel.attributedText = "Swift is awesome!!!".convertHtmlToAttributedStringWithCSS(font: UIFont(name: "Arial", size: 16), csscolor: "black", lineheight: 5, csstextalign: "center")
Code language: Swift (swift)

Here’s what every parameter takes:

  • font: Add your font as usually do in a UILabel/UITextView, using UIFont with the name of your custom font and the size.
  • csscolor: Either add color in HEX format, like "#000000" or use the name of the color, like "black".
  • lineheight: It’s the space between the lines when you have multiple lines in a UILabel/UITextView.
  • csstextalign: It’s the alignment of the text, the value that you need to add is "left" or "right" or "center" or "justify"

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Gisela

Hi! This helped a lot! I have a question, is there a way to convert a css file into inline style and inject it into a html file in order to use this method?

Thank you very much!

vipin

Italic tags does not work for me after applying font. how to display italic text for <i></i>

vipin

Yes it is working now. But tag inside tag does not working.
<p><i>This is italic <b>bold</b></i></p>

vipin

Thanks John for quick response.
Yes it works with these fonts . But I have a custom font which was added using .otf file. I do have files for bold, regular, italic, light, bold italic, light italic. It is not working when I set that font. Any idea what might be causing this. Thanks in advance.