How to add CSS for HTML to NSAttributedString?

Question

I am trying to load an HTML file via NSAttributedString to display it in a UITextView.

So, how can I apply CSS to the text view's content?

I guess you can't apply css to textview, Rather dispay your content in webview with html file. — Toseef Khilji, Feb 28 '14 at 09:11
You can't apply all CSS attributes (like border-left: 10px solid #000000; and etc.) — Kuvonchbek Yakubov, Jan 16 '20 at 16:52

score 33 · Accepted Answer · edited Mar 04 '15 at 15:16

33

Since iOS 7 you can use NSAttributedString with HTML syntax:

NSURL *htmlString = [[NSBundle mainBundle]  URLForResource: @"string"     withExtension:@"html"];
NSAttributedString *stringWithHTMLAttributes = [[NSAttributedString alloc] initWithFileURL:htmlString
                                                                                       options:@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType}
                                                                            documentAttributes:nil
                                                                                         error:nil];
textView.attributedText = stringWithHTMLAttributes; // attributedText field!

You have to add string.html to you project, and the content of the html can be like this:

<html>
  <head>
    <style type="text/css">
      body {
        font-size: 15px;
        font-family: Avenir, Arial, sans-serif;
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is the text</p>
  </body>
</html>

From what I could test, you can change: color, font-family, font-weight, font-size, text-align, and use , , , , , and  tags.

edited Mar 04 '15 at 15:16

Daniel

20,420
10
92
149

answered Mar 04 '14 at 17:15

André Rodrigues

9,313
4
23
25

@AndréRodrigues do you know where I can find the list of possible customization? I'm trying to use a custom icon for a list (
...

Zeb

Jul 17 '17 at 12:06

1

Can we apply external css, if yes then how? – Mansuu.... Aug 29 '17 at 12:01

is it possible to change color of the links? – Klemen Sep 27 '17 at 20:16

1

@Mansuu.... Yes you can have your css in a separate file, you can set in your HTML the relative path of your css file. – André Rodrigues Sep 28 '17 at 08:30

@KlemenZagar I think it's possible, but the best way to confirm that is to try it :) – André Rodrigues Sep 28 '17 at 08:30

Yesterday I tried many ways and none was working. Later i solved it by replacing UILabel with UITextView – Klemen Sep 28 '17 at 15:10

@AndréRodrigues, I tried using relative path like let externalCss = "" and tried using absolute path, but none works. – Mansuu.... Oct 12 '17 at 06:34

You can keep the CSS in a separate file in your bundle for macOS at least, as I've just had this working for me in to an [NSTextView](https://developer.apple.com/documentation/appkit/nstextview). First you need to include the stylesheet link in your HTML document's `HEAD` as you would usually (e.g. ``). Then when you create your [NSAttributedString](https://developer.apple.com/documentation/foundation/nsattributedstring) you need to pass a base URL (e.g. by using `htmlUrl.deletingLastPathComponent()` in Swift). – Quintin Willison May 17 '18 at 12:32

border-left: 10px solid red; don't apply in UITextView – Kuvonchbek Yakubov Jan 16 '20 at 07:16

@QuintinWillison I don't see any base URL params while creating NSAttributedString.... Can you please paste some code for E.g? Also custom class defined in CSS are not taking reference in attributed string. – vinoth87 May 31 '21 at 15:30

score 0 · Answer 2 · answered Dec 07 '19 at 14:28

Rather than repeat the css you need across multiple files, if you are storing the files in your Assets folder then one option is to have a single file containing all the html before the body tag, which contains all the style information. You can then append the bytes, as shown in this example from my own code:

func loadHTMLData(section:String, page:Int) -> NSAttributedString? {
    var data = Data()
    if let asset = NSDataAsset(name: "htmlhead") {
        data.append(asset.data)
    }

    if let asset = NSDataAsset(name: "\(section)\(page)") {
        data.append(asset.data)
        do {
            let attr = try NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil)
            return attr
        }
        catch {
            // do something with error
            return nil
        }
    }
    else {
        return nil
    }
}

There's also nothing to stop you from splitting the files further if you wish.

How to add CSS for HTML to NSAttributedString?

2 Answers2

Linked