大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

Swiftワン・ピース・コード:UIWebViewを使う・・ヘッダー部分(縦書き用)

株式会社クローバーフィールドの経営理念
著者:川上洋
公開日:2019/02/07
最終更新日:2019/02/07
カテゴリー:技術情報
タグ:

こんにちは、川上です。

WebViewで縦書き対応は、iOSのVer10.0以降が対応と思われます。
My実機の初版iPadminiは9.3以上にUpできなかったので、縦書きできませんでした(;;’)

 
  // MARK:+++++ HTML 縦書きヘッダーの設定
    func  makeTategakiHTMLHeader(_ htmStr: inout String,_ bgColor:String = "#ffffff" )
    
    {
        htmStr += "<head>"
        htmStr += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">"
        htmStr += "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">"
        //電話番号にリンクが自動で付くのを防ぐ方法
        htmStr += "<meta name=\"format-detection\" content=\"telephone=no\">"
        
        // 拡大はするがユーザーがピンチで拡大や、スクロールができないようにする。 add ver1.2(1)
        htmStr += " <meta name=\'viewport\' content=\'width=device-width,user-scalable=no\' />"
        // アプリ側  webView.scalesPageToFit = true;
        
        // MARK:CSS(スタイルシート)入門のコードを組み込む
        htmStr += "<style type=\"text/css\">"
        htmStr += "<!--"

        // 縦書きにする
        htmStr += "body{"
        htmStr += "   -ms-writing-mode: tb-rl;"
        htmStr += "    writing-mode: vertical-rl;"
        htmStr += "}"

        htmStr += ".red_atr { border-bottom:solid 3px #ff0000;}"
        htmStr += ".green_atr { border-bottom:solid 3px #008000;}"
        htmStr += ".blue_atr { border-bottom:solid 3px #0000ff;}"
        htmStr += ".sample4 { border-bottom:solid 3px #ff0000;}"
        htmStr += ".darkgray_bkcolor {background-color:#0000ff;}" //使用時に編集する

        htmStr += "-->"
        htmStr += "</style>"
        htmStr += "</head>"
        
        htmStr += "<html> "
        htmStr += "<body bgcolor=" + bgColor + ">"
    }

なので、記述形式は、先と同様で、

var htmStr:String = ""

//HTML 縦書きヘッダーの設定
makeTategakiHTMLHeader(&htmStr,"#000000")

本体

htmStr += "</html>  </body>"   //HTML EOF

WebView.loadHTMLString(htmStr, baseURL:nil)

で、こんな感じに表示されます。

ではでは。

    上に戻る