0

I spent more than 8 hours, but could not able to fix my issue. My code as below:

let sampleHTML = "<p><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" style=\"\" size=\"1\"><b style=\"\">1. GPS must be turned on<\/b>&nbsp;to locate panel GP clinics within 1 km from your location.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">2.&nbsp;You can do a wildcard search based on “Clinic Name” or “Road Name”.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">3. The top right corner&nbsp;shows the tip of a highlighter which is a <b>Filter<\/b>&nbsp;to find another Panel type eg. TCM or Specialist Panel (where applicable).<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">4. When the search is done, click on your desired panel clinic and you can<\/font><\/span><\/p><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><p class=\"p2\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><b><font color=\"#000000\" size=\"1\">(a) View Clinic Operating hours<\/font><\/b><\/span><\/p><\/blockquote><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><b style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(b) Call the clinic<\/font><\/b><\/p><\/blockquote><blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><b style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(c) Get Direction to the panel clinic (GPS must be turned on)<\/font><\/b><\/p><\/blockquote><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">5.If <b>GPS is not turned on<\/b>, you can still access to 4a and 4b for your selected panel clinic.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><b><i style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">Important Notice<\/font><\/i><\/b><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(1) <i>*Last Clinic Registration is<\/i>&nbsp;<b>30 Minutes before closing time or earlier<\/b> if the number of patients’ registration exceeded the capacity that the attending doctor and clinic staff can handle that goes beyond the clinic normal operating hours.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(2) <b>Surcharge<\/b> will be imposed on members for visit <i>on or after *Last Clinic Registration<\/i>.<\/font><\/span><\/p><p class=\"p1\" style=\"margin-right: 0px; margin-left: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: Menlo;\"><span style=\"background-color: rgb(255, 255, 255);\"><font color=\"#000000\" size=\"1\">(3) <b>Operating hours<\/b> are indicative. Please call the clinic before visiting as clinics’ operating hours may change without prior notice.<\/font><\/span><\/p><div><font color=\"rgba(255, 255, 255, 0.850980392156863)\" face=\"Menlo\" size=\"1\"><br><\/font><\/div><div><font size=\"1\"><img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAIAAADwf7zUAAAKMWlDQ1BJQ0MgUHIAQAAAAAICAEAAAAACAgBAAAAAAgIAQAAAAAICD\/H8\/yGKggh8zsAAAAAElFTkSuQmCC\"><\/font><font color=\"rgba(255, 255, 255, 0.850980392156863)\" face=\"Menlo\"><span style=\"font-size: 1px;\"><br><\/span><\/font><\/div>"

Converting html to attributed string extension as below:

    extension String {
    var htmlToAttributedString: NSAttributedString? {
        guard let data = data(using: .utf8) else { return NSAttributedString() }
        do {
            return try NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue], documentAttributes: nil)

            //[.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue]
        } catch {
            return NSAttributedString()
        }
    }

    var htmlToString: String {
        return htmlToAttributedString?.string ?? ""
    }   
}

Loading attributed text to textview as below:

cell.txtViewHTML.attributedText = sampleHTML.htmlToAttributedString

The output screenshot as below:

Getting extra spacing in between, if i load same in webview it is looking fine

I believe something wrong in my code, can anyone please help.

Thanks in advance.

Improve this question
5
  • 2
    Which extra space? Between Important notice and point a? Commented Apr 9, 2020 at 9:45
  • @AjinkyaSharma point 4 - a & important notice - a. Commented Apr 9, 2020 at 10:08
  • 1
    That is in your HTML.. extra <p></p> Remove that.. or play around with that.. Commented Apr 9, 2020 at 10:16
  • @AjinkyaSharma, i think the problem with html not with my code. Commented Apr 9, 2020 at 10:22
  • @AjinkyaSharma, when i have image in html string, textview it is not displaying image completely. I have edited my question, not able to add image src path to html content due to limit in number of characters. please help me out. Commented Apr 13, 2020 at 5:04

1 Answer 1

Reset to default
2

I have made some modifications in your HTML code:

let sampleHTML = "<p><b>1. GPS must be turned on</b>&#160;to locate panel GP clinics within 1 km from your location.</p><p><b>2.</b>&#160;You can do a wildcard search based on &#8220;Clinic Name&#8221; or &#8220;Road Name&#8221;.</p><p><b>3. The top right corner</b>&#160;shows the tip of a highlighter which is a&#160;<b>Filter</b>&#160;to find another Panel type eg. TCM or Specialist Panel (where applicable).</p><p>4. When the search is done, click on your desired panel clinic and you can<ol type=\"a\"><li><b>View Clinic Operating hours</b></li><li><b>Call the clinic</b></li><li><b>Get Direction to the panel clinic (GPS must be turned on).</b></li></ol></p><p><b>5.</b>&#160;If&#160;<b>GPS is not turned on</b>, you can still access to S/no 4a and 4b for your selected panel clinic.</p><h1><p><i><font size=\"3\">Important Notice</font></i></h1><ol type=\"a\"><li><i>*Last Clinic Registration is&#160;</i><b>30 Minutes before closing time or earlier</b>if the number of patients&#8217; registration exceeded the capacity that the attending doctor and clinic staff can handle that goes beyond the clinic normal operating hours.</li><li><b>Surcharge&#160;</b>will be imposed on members for visit&#160;<i>on or after *Last Clinic Registration.</i></li><li><b>Operating hours&#160;</b>are indicative. Please call the clinic before visiting as clinics&#8217; operating hours may change without prior notice.</li></ol></p>"

.

Sample Output from StackOverflow "Blockquotes"

1. GPS must be turned on to locate panel GP clinics within 1 km from your location.

2. You can do a wildcard search based on “Clinic Name” or “Road Name”.

3. The top right corner shows the tip of a highlighter which is a Filter to find another Panel type eg. TCM or Specialist Panel (where applicable).

4. When the search is done, click on your desired panel clinic and you can

  • View Clinic Operating hours
  • Call the clinic
  • Get Direction to the panel clinic (GPS must be turned on).

    • 5. If GPS is not turned on, you can still access to S/no 4a and 4b for your selected panel clinic.

    Important Notice

  • *Last Clinic Registration is 30 Minutes before closing time or earlierif the number of patients’ registration exceeded the capacity that the attending doctor and clinic staff can handle that goes beyond the clinic normal operating hours.
  • Surcharge will be imposed on members for visit on or after *Last Clinic Registration.
  • Operating hours are indicative. Please call the clinic before visiting as clinics’ operating hours may change without prior notice.

    • Sample output in Simulator: (Please ignore the screenshot background) enter image description here

    Let me know if you need any help on the HTML part.

    Improve this answer
    Sign up to request clarification or add additional context in comments.

    6 Comments

    what modifications have you made ?
    You can check the updated HTML added in answer. And just a quick thing: 1. I have removed the extra <p></p> tags. 2. Closing position on </p> tags changes a bit.
    but in webview it looks fine.
    I am not sure why it is correct in WebView. But in TextView extra space comes with <p></p> tag. I got this issue last year.
    thanks, i can show this as reference to my Project manager, that problem with html.
    |

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.