HTML Text (with Table) in UILabel using NSAttributedString

Question

I was trying to load a simple html string (which has a table) on the UILabel using the attributed string, if the language is english it works well for the rtl layouts the formatting does not work, but it works well on WKWebView, here is the sample

    let testStr = "<html dir = \"RTL\"> <table border=\"1\"  width = 
    \"514.0\" ><tr><td>عمود 1</td><td>عمود 2</td><td>عمود 3</td><td>عمود 
    4</td><td>عمود 5</td></tr><tr><td>صف 1</td><td><br></td><td><br></td> . 
   <td><br></td><td><br></td></tr><tr><td>صف 2</td><td><br></td><td><br> . 
   </td><td><br></td><td><br></td></tr></table></html>"


testLbl.attributedText =
        testStr.toHtmlAttributedText()


extension String{
    func toHtmlAttributedText() -> NSAttributedString? {
        guard let data = self.data(using: String.Encoding.utf8,
                                   allowLossyConversion: true) else { return nil }
        let options: [NSAttributedString.DocumentReadingOptionKey : Any] = [
            NSAttributedString.DocumentReadingOptionKey.characterEncoding : String.Encoding.utf8.rawValue,
            NSAttributedString.DocumentReadingOptionKey.documentType : NSAttributedString.DocumentType.html,
            
            ]
        let htmlString = try? NSMutableAttributedString(data: data, options: options, documentAttributes: nil)
        //this to have borders in html table
        htmlString?.addAttribute(NSAttributedString.Key.backgroundColor, value: UIColor.clear, range: NSMakeRange(0, 1))
        return htmlString
    }
}

Here is how it looks on simulator and on html editor

Please elaborate what you mean by "formatting doesn't work". — Anurag, Aug 08 '19 at 07:11
@Anurag Please have a look at the attached image and this images . https://i.stack.imgur.com/tfjuQ.png . https://i.stack.imgur.com/P4wAt.png — Syed Ismail Ahamed, Aug 08 '19 at 07:21
@SyedIsmailAhamed Just a observation , always convert html in main thread. The HTML importer should not be called from a background thread. It will try to synchronize with the main thread, fail, and time out. Calling it from the main thread works . — Shivam Gaur, Aug 08 '19 at 07:56

Anurag · Answer 1 · 2019-08-08T08:44:35.110

Try using NSTextAligment

NSTextAligment provides number of visual alignment cases for Text.

in your UILabel you can apply them as:

label.textAlignment = .natural

.natural -> Indicates the default alignment for script.

Tip: Explore the NSTextAligment in Documentation. NSWritingDirection is another enum which might help you more.

Secondly, you may also deal with NSLinguisticTagScheme to determine the input language and support the appropriate text aligments accordingly.

A sample code would be :

func helpMeWithDirection(){
 let linguisticTagScheme = [NSLinguisticTagScheme.language]
    let linguicticTagger    = NSLinguisticTagger(tagSchemes: linguisticTagScheme, options: 0)
    linguicticTagger.string = self.text
    let currentLanguage = linguicticTagger.tag(at: 0, scheme: NSLinguisticTagScheme.language,
                                                    tokenRange: nil, sentenceRange: nil)

    if currentLanguage?.rawValue.range(of: "he") != nil ||  currentLanguage?.rawValue.range(of: "ar") != nil {
        self.textAlignment = NSTextAlignment.right
    } else {
        self.textAlignment = NSTextAlignment.left
    }
}

The above function would be an extension of UILabel, since you're dealing with one. Hope this will help you. Thanks!

PS:I'm assuming you're able to parse the attributed string and as you've shown in the image only issue is with rtl.

HTML Text (with Table) in UILabel using NSAttributedString

1 Answers1