ページ

2009年4月21日火曜日

WebKit検証(10) - CSSのmedia変更

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

これまでに WebViewを使って画像やPDFを作成してきたが、どれも一部のフレームしか表示されなかった。そういうものなのかと思っていたところ、先日 odnazさんから印刷用CSS が適用されたのではないかとの指摘を受けた。なるほど。確かにそんな感じがする。

動作確認に利用していたページ(ADCのリファレンス)を Safariで開き、印刷プレビューを見ると確かに右側のフレームだけの表示になっている。


印刷用プレビュー



スタイルシートにはメディアタイプと呼ばれる出力媒体を設定することができる。一般的に使われる画面(screen)、印刷(print) の他に、携帯デバイス(handheld)や点字向け(braille, embosseed)、さらには音声(speech)などを指定することができる。この設定を受け取ったブラウザはそれらに適合したデバイス(例えば音声合成ソフトとスピーカー)が利用可能であれば、その出力媒体をターゲットにした表現を行う(例えば、ページを読み上げる)。

参考:正しい知識を得たい人の為のCSS2リファレンス - メディアタイプ


よく使われるのは screen(画面)と print(印刷)で、通常ブラウザで使っている場合には screen向けに定義されたスタイルシートを使い画面表示を行う。一方 印刷(もしくはプレビュー)する場合には print向けに定義されたスタイルシートを使う。今回 ADCのリファレンスページではCSS内に printが設定されていたので、Safari(もしくは WebView)がそのスタイルシート設定を使い、一部のフレームだけを表示していた。


ということは WebView が使うメディアタイプを制御できれば、画像生成時(もしくはPDF生成時)の表現を変えられるのでは?

そこでリファレンスを眺めているとメディアタイプを指定するメソッドが見つかった。
WebView#setMediaStyle:

ここへ "screen" を渡してみたらどうなるのか?やってみよう。

コードへ下記を1行追加する。

[_web_view setMediaStyle:@"screen"];



実行して PDFを保存してみる。左のフレームが出た。


意図通りに動いてくれたようだ。ただ左のフレームは画面で見た通り(スクロールバー付き)が再現されている。メディアタイプが screen(画面)なのでこれは仕方ないか。右側のフレームはページ分割されてちゃんと下まで出ているようだ。


次に画像。


こちらも左フレームが表示されて見たままが画像として作成された。


- - - -
Thanks! > odnazさん