直式中文in UIWebView(使用JavaScript)

在UIWebView中如果直式瀏覽中文?

使用JavaScript,在「webViewDidFinishLoad:」內加入:

(1)NSString *contentString3 = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitWritingMode= '%@'",@"vertical-rl"];

webkitWritingMode是css,css style原本是writing-mode(見http://www.w3.org/TR/css3-writing-modes/),在UIWebView(Safari)內為-webkit-writing-mode,但是若要在程式中使用,則需去掉-,並將-之後的英文字母改為大寫,-webkit-writing-mode就成了webkitWritingMode,webkitWritingMode稱為CSSStyleDeclaration,詳見Oreilly JavaScript大全 David Lagnagan著,黃銘偉譯,2011GOTOP,431~433頁 section16.3。

注意=右邊的'%@',在程式內使用CSSStyleDeclaration時,原css內為writing-mode=vertical-rl,需在vertical-rl加雙引號",如"vertical-rl",但因雙引號"已被initWithFormat:用掉,故用單引號。

有關css換CSSStyleDeclaration規則以JavaScripte舉例如下(詳見Oreilly JavaScript大全 David Lagnagan著,黃銘偉譯,2011GOTOP,431~433頁 section16.3):

css style:

position:absolue; font-family:sans-serif;background-color:#ffffff;

CSSStyleDeclaration:

e.style.position = "absolue";

e.style. fontFamily = "sans-serif";

e.style.backgroundColor = "#ffffff";

(2)[self.webView stringByEvaluatingJavaScriptFromString:[[NSString alloc] initWithFormat:@"%@",contentString3]];

stringByEvaluatingJavaScriptFromString可重新改變html tag的內容,見UIWebView class reference

 

直式中文由右向左讀,自動捲到文章起頭的設定:

 http://stackoverflow.com/questions/1431895/objective-c-equivalent-to-javascripts-settimeout

以上的設定可直式閱讀中文,但是,因為英文是由左向右,因而,目前是呈現中文文章的最後一頁。如何自動捲到文章起頭?這就要使用javascript的window.scrollBy(%d, 0);。下三行可做到。docWidth是self.webView文章的全長,windowWidthself.webView文章目前顯示的長度(螢幕只能顯示這麼多),j是所需自動捲的長度 j=docWidth-windowWidth。

NSString* docWidth = [self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.offsetWidth"];

NSString* windowWidth = [self.webView stringByEvaluatingJavaScriptFromString:@"window.innerWidth"];

int j = [docWidth intValue]  - [windowWidth intValue];

NSString* javascript = [NSString stringWithFormat:@"window.scrollBy(%d, 0);", j];

以上是自動捲到文章起頭的code。但是加入這些code到uiwebview內,並不會捲到文章起頭。原因是UIWebview尚未webViewDidFinishLoad,因而出現的狀況是文章會捲但只捲了70%,並不會捲到文章起頭。這是因為UIWebview尚未webViewDidFinishLoad。所以需延遲上段程式的執行,方法如下:

dispatch_time_t delay = dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC * 1.5); //for javascript

dispatch_after(delay, dispatch_get_main_queue(), ^(void){

把上面那段程式放在這裡。

}

注意:以上延遲1.5秒是測試來的,可能在不同版本iPhone/iPad會不同,若不夠,可加長。

注意:用javascript自動捲到文章起頭的好處是任何版本iOS均可用,且可scroll至文章任何一點,若在iOS5.0以上,可用UIWebView的scrollview中的setContentOffset來自動捲到文章起頭。如下:

dispatch_time_t delay = dispatch_time(DISPATCH_TIME_NOWNSEC_PER_SEC * 2.5);

dispatch_after(delay, dispatch_get_main_queue(), ^(void){

[self.webView.scrollView 

setContentOffset CGPointMake((self.webView.scrollView.contentSize.width 

self.webView.bounds.size.width), 0.0f) animated:YES];

}

參考書目:

  1. Oreilly JavaScript大全 David Lagnagan著,黃銘偉譯,2011GOTOP,431~433頁 section16.3。
  2. http://www.w3.org/TR/css3-writing-modes/
  3. http://stackoverflow.com/questions/1431895/objective-c-equivalent-to-javascripts-settimeout