如何在Swift 4中使用html 標簽

[英]How to Use html tags in Swift 4 for Japanese Characters


I need to use html tags for Japanese characters in Swift.

我需要在Swift中使用日語字符的html標記。

I've been using the following string extension below:

我一直在使用下面的字符串擴展:

extension String{
func convertHtml() -> 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)
    }catch{
        return NSAttributedString()
    }
}

And then testing it out with a textView as follows:

然后用textView測試如下:

textView.attributedText = "<!DOCTYPE html><html><body>これは<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>です。</body></html>".convertHtml()

This is how it should actually look:

它應該是這樣的:

これは<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>です。

But it ends up looking like this. It doesn't line up properly, and there is a strange line break after every single use of the ruby tag.

結果是這樣的。它不能正確地排列,每次使用ruby標記后都會出現奇怪的換行。

enter image description here

Is there something I'm doing wrong here, and a way to fix this?

有沒有什么地方我做錯了,有什么辦法可以補救?

Thank you!

謝謝你!

1 个解决方案

#1


1  

The whole line of Japanese text should be enclosed in <ruby> tags. This is because the <ruby> element sets up its own inline context, yet its sub-elements such as <rb>, <rt>, <rp>, and <rtc> also set up their own contexts like 'block' that only really make sense when the whole line is enclosed in a <ruby> element.

整個日文文本行應該包含在標記中。這是因為元素建立了自己的內聯上下文,但是它的子元素如 也建立了它們自己的上下文,比如'block',只有當整個行被包含在 元素中時才有意義。

<!DOCTYPE html>
<html>
    <head>
        <!-- In case you'd like to try opening this page in desktop Safari! -->
        <meta charset="UTF-8">
    </head>
    <body>
        <ruby>
            <rb>これ</rb><rt></rt>
            <rb>は</rb><rt></rt>
            <rb>日</rb><rt>に</rt>
            <rb>本</rb><rt>ほん</rt>
            <rb>語</rb><rt>ご</rt>
            <rb>です</rb><rt></rt>
            <rb>。</rb><rt></rt>
        </ruby>
        <span>But this <em>isn't</em> Japanese.</span>
    </body>
</html>

I find it's best to be explicit about every <ruby> sub-element, and to also pair every <rb> (ruby base text) with a corresponding <rt> (ruby transcription). Sure, it looks more redundant and less clean, but it's a lot more semantic and you can be sure it's going to look the same in all browsers.

我發現最好對每一個子元素都明確,並將每一個 (ruby base text)與相應的 (ruby轉錄)進行配對。當然,它看起來更冗余,也不那么干凈,但是它的語義更豐富,您可以確定它在所有瀏覽器中看起來都是一樣的。

Edit showing that HTML is valid

Below, I provide a screenshot of it working. Here's how I invoked it:

下面,我提供了它工作的屏幕截圖。我是這樣調用的:

let webView: WKWebView = WKWebView(frame: self.view.frame, configuration: WKWebViewConfiguration())

webView.loadHTMLString(
    "<!DOCTYPE html><html><head><!-- In case you'd like to try opening this page in desktop Safari! --><meta charset=\"UTF-8\"></head><body><ruby><rb>これ</rb><rt></rt><rb>は</rb><rt></rt><rb>日</rb><rt>に</rt><rb>本</rb><rt>ほん</rt><rb>語</rb><rt>ご</rt><rb>です</rb><rt></rt><rb>。</rb><rt></rt></ruby><span>But this <em>isn't</em> Japanese.</span></body></html>",
    baseURL: nil
)

Evidence

If you copy-paste that as-is, do you have any more luck?

如果你復制粘貼原樣,你還有運氣嗎?

Digression

Seems like UITextView interprets all ruby nodes as having a block context. I would therefore argue that either UITextView/NSAttributedString has not fully implemented the HTML5 specification, or it has bugs, or there is some further configuration to be done. Either way, the easiest way to display this ruby text correctly would be to use a true WKWebView (although I understand this has its own tradeoffs like lack of text-to-speech support, and visibly increased time taken to render).

似乎UITextView將所有ruby節點都解釋為具有塊上下文。因此,我認為要么UITextView/NSAttributedString沒有完全實現HTML5規范,要么它有缺陷,要么還有一些進一步的配置要做。無論哪種方式,正確顯示這個ruby文本的最簡單的方法是使用一個真正的WKWebView(盡管我知道這有它自己的權衡,比如缺乏文本到語音的支持,以及明顯增加了渲染的時間)。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2018/04/03/72f3f42b9a9de9499a764e43e4c84cc3.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com