CODEWITHSUNDEEP
htmlcssswiftswift3wkwebview
user1269290
user1269290

Reputation: 481

How to format text in WKWebView by wrapping it into HTML using Swift iOS?

I am loading text into a WKWebView. My goal is to:

  1. set font size to a fixed value
  2. align text vertically in the WKWebView
  3. align text horizontally in the WKWebView

I have not been able to find functions on the WKWebView that would do that. So I am trying to wrap the string into some HTML code.

Here is my code:

func loadQuestions() {
    questionView.questionLabel.text = questionArray[questionIndex].questionText

    let questionText: String = questionArray[questionIndex].questionText!
    let answerText: String = questionArray[questionIndex].answerText!

    let htmlWrap = "<p>\(questionText)</p><p>\(answerText)</p>"

    answerView.webView.loadHTMLString(htmlWrap, baseURL: nil)
}

This works, but the moment I am trying to add some advanced formatting that I get using a converter website (since I don't know html) I get all the quotation marks (") which invalidate my string.

let htmlWrap = "<p style="text-align: center;"><span style="font-size: 36pt;">\(questionText)</span></p><p style="text-align: center;"><span style="font-size: 36pt;">\(answerText)</span></p>"

That above will not compile.

It seems I can use the escape character (\) in the html string before each quotation mark (") and that seems to work if it is a simple line. But does not work for complex html. So how do I do this?

Thank you!

Upvotes: 0

Views: 3057

Answers (2)

Tom Dibble
Tom Dibble

Reputation: 167

Method 1: Escaping

As you alluded to in your initial question, you can always escape any embedded quote characters by prefixing the '\' character. If you go this route, I would make two passes in a global find-and-replace: first replace a single backslash () with two backslashes, then replace each quote with \".

Method 2: Multiline String Literal

As of Swift 4.0 (a year and a half old now), you can also use multiline string literals, which are bounded by """ (three double-quotes) to get yourself partway there. You would do it like this:

let htmlWrap = """
    <p style="text-align: center;"><span style="font-size: 36pt;">\(questionText)</span></p><p style="text-align: center;"><span style="font-size: 36pt;">\(answerText)</span></p>"
    """

The first line break (before "

Indentation up to the point of the terminating """ will not be preserved. So for instance the string above would not include the extra four-space indent I put in the code sample, because the terminating """ is also indented by four spaces.

Taking text out of some other generator and inserting into your document between the multiline literal string markers should generally be a safe copy-paste except in the very odd situation where you have three quotes actually in your HTML (it has no special meaning in HTML, so would only come if your plain text had that construct in it, such as if you were quoting this answer).

An important thing to note, however, is that escaping in multiline literals still escapes. So, something like this will not end up as it is written:

let testing = "Testing 123"
let htmlWrap = """
    <p>\(testing)</p>
    """

... would end up printing "Testing 123" in your web view.

Method 3: Raw Multiline String Literals (Swift 5+)

Swift 5 (in Xcode 10.2 which is in beta now) remedies this by adding Raw Strings, which can also be multiline like so:

let testing = "Testing 123"
let htmlWrap = #"""
    <p>\(testing)</p>
    """#

... which will print out "(testing)" in your web view as you might expect.

Method 4: Separate the HTML into its own file

In my opinion, however, if I am dealing with HTML, I put in its own file, and load that text into a string using the String(contentsOfFile: myFile) initializer to load it in. This keeps HTML text in its own file that as a bonus Xcode will be able to intelligently help you with if you ever go in to edit it.

Upvotes: 1

Santhosh R
Santhosh R

Reputation: 1568

Two ways:
  As you already know, using \ is a good way to go around this, because for Swift a string starts with " and ends with ". Adding \ before " with convert it into a part of the string and not the control character specifying the end of the string. So you can copy the output of your converter and paste it in a text editor and find and replace " with \". There is no other way if you want to use " inside the HTML string (if the option of directly getting the html string from your converter using an API to store into a variable is ruled out).

 The other way is to use ' instead of " inside the HTML string. So again you will have to copy the output of your converter to a text editor and find and replace " with '.

Upvotes: 2

Related Questions