ぺったんR html 実証サンプル version 0.3 2013.09.23
はじめに
html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．
この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．
また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．
この文書で示された html 構造と css は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．
機能一覧
- 正常動作確認済みブラウザ
- ie5+, Firefox3.6+, NN6.2+, Opera7.11 & 9.64+, Konqueror4.8, Safari3.2, Iron5
- 吹きだしの語調
- 通常の語調のほかに、強調、コンピュータの合成音声
- 脚本情報
- テキストブラウザ・音声読み上げブラウザでも作品を読むことができる（はず）
- リッチテキスト機能
- まだ、、、
実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない．
表示サンプル
表示サンプルは今後充実していくこととする．
それじゃほとんど意味がないじゃねえか
どの環境でもそれなりにセリフを表示する
これには慎重を要する
そやそや
画像や css に対応しない Web ブラウザでの表示
マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．
テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．
同様の着眼で代替テキストを用意する．
テキストブラウザでの表示イメージ
ようやく口を開くと 「それじゃほとんど意味がないじゃねえか」 頭を抱えるキンイチであった 深いため息に空気までが暗く重々しい… 目の血走ったペンギンが拳を握り締めている ペンギン曰く 「どの環境でもそれなりにセリフを表示する」 これには慎重を要する ペンギン一息ついて 「そやそや」
ブラウザ検証
対応ブラウザ
NN6.2+, firefox3.6, ie5+, Safari3.2, Iron5, opera7.11 & 9.64+, Konqueror4.8(windows)
準対応ブラウザ
Opera6.06( overflow:hidden が孫要素に対して利かず（？）要素がパネルをはみ出す z-index が overflow:hidden なパネルを超えて効いてしまう)
Opera8.02 パネルの枠線が一部欠けてしまう．alt タグの内容が画面に表示される．opera7.11 ではこの不具合は起こらない．
非対応ブラウザ
NN6(テキスト表示位置がずれる．z-index 指定が画面にゴミを出してしまう), Opera5( 日本語に非対応で文字化けする )
ソースコード
html 部分
パネルピクチャはひとつの <img> タグで表示されます．
バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる．
<div class="test_pettanr-comic-wrapper" style="width: 400px;"> <div class="test_pettanr-comic-panel" style="border-width: 2px;height: 300px;"> <div class="test_pettanr-comic-balloon" style="width: 200px; height: 200px; left: -4px; top: -10px; z-index: 3;" > <img src="../system_pictures/_w7.gif" alt="ようやく口を開くと"> <div class="test_pettanr-comic-speech"> <div class="test_pettanr-comic-speech-inner" style="font-size: 1em; text-align: left; color: rgb(0, 0, 0);" > <p>それじゃほとんど意味がないじゃねえか</p> </div> </div> </div> <img src="2.gif" alt="頭を抱えるキンイチであった" title="キャラクター名:キンイチ, 絵師:yas" longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi" width="247" height="273" style="top: 101px; left: 86px; z-index: 2;"> <div class="test_pettanr-comic-ground" style="z-index: 1; background-color: #003;">深いため息に空気までが暗く重々しい…</div> </div> <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;"> <img src="../resource_pictures/1.png" alt="目の血走ったペンギンが拳を握り締めている" title="キャラクター名:キンイチ, 絵師:yas" longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi" width="166" height="272" style="left: 148px; top: -2px; z-index: 0;" > <div class="test_pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;" > <img src="../system_pictures/_w5.gif" alt="ペンギン曰く"> <div class="test_pettanr-comic-speech"> <div class="test_pettanr-comic-speech-inner"> <p>どの環境でもそれなりにセリフを表示する</p> <p>これには慎重を要する</p> </div> </div> </div> <div class="test_pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;" > <img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて"> <div class="test_pettanr-comic-speech"> <div class="test_pettanr-comic-speech-inner"> <p>そやそや</p> </div> </div> </div> </div> </div>
css 部分
上下中央配置(モダンブラウザ)
css2 の display: table, display: table-cell を使って吹き出し内のテキストの上下中央配置を行う．
上下中央配置(old IE)
display: table をサポートしない ie7 以下は、入れ子になった要素を上下に 50% ずらす、という手法で上下中央配置している．その様子を、show border ボタンを使って確認されたし．（ 参考 tableを使わずdivで縦位置を指定 ）
レイアウト計算負荷を提げる
.test_pettanr-comic-ground でテキストをコマの外に飛ばしているのは、padding-left : 100%; になる．
width : 0; *width : 100%; overflow : hidden はどちらも無くても表示に変わりが無いが、それぞれレイアウト計算負荷が下がりそうなので指定してある．
.test_pettanr-comic-wrapper {
margin : 1em auto;
}
.test_pettanr-comic-panel {
border-style : solid;
border-color : #111;
position : relative;
margin : 1em 0;
overflow : hidden;
}
.test_pettanr-comic-panel img,
.test_pettanr-comic-balloon {
position : absolute;
}
.test_pettanr-comic-balloon img {
width : 100%;
height : 100%;
}
.test_pettanr-comic-speech {
margin : 0 !important;
padding : 0 !important;
display : table;
table-layout : fixed;
position : absolute;
top : 0;
left : 16.6%;
width : 66.6%;
height : 100%;
*height : auto;
*top : 50% !important;
}
.test_pettanr-comic-speech-inner {
vertical-align : middle;
display : table-cell;
*display : block;
zoom : 1;
*position : relative;
*top : -50%;
}
.test_pettanr-comic-speech p {
padding : 0.5em 0 !important;
margin : 0 !important;
}
.test_pettanr-comic-speech strong {
font-weight : bold;
}
.test_pettanr-comic-speech em,
.test_pettanr-comic-speech i {
font-style : italic;
}
.test_pettanr-comic-speech samp,
.test_pettanr-comic-speech code {
font-family : monospace;
}
.test_pettanr-comic-ground {
position : absolute;
top : 0;
left : 0;
width : 0;
*width : 100%; /* for ie5.5- */
height : 100%;
overflow : hidden;
padding-left : 100%;
background-repeat : repeat;
background-position : 0 0;
}
履歴
- version 0.3
- 2013.09.23 公開．
脚本情報を html タグとして書き出し、通常の閲覧に際しては非表示、テキストブラウザ等に対しては表示となるように html と css を拡張．参考 RE: 脚本機能について
あるパネルで指定されたパネル要素の z-index が、他のパネルに影響しないか？調査の追加．参考 RE: パネルのZインデックスが適切でない - version 0.2
- 2013.08.10 公開．
吹き出し内での <p> タグによる段落分け(改行)に対応．
デフォルトでテキストの中央配置をやめる．
外す．font-size : 14px; /* opera6 で使用 13px は不可 */
レンダリング負荷を下げる為の css 指定を追加 ( テキストの上下中央配置のための display:table に対して tabel-layout:fixed を追加 )．
<img> タグに longdesc を追加．title 属性で説明しきれなかった画像に関する情報が書いてある url を指示する手段としてとして適切ではないか、と考える． - version 0.1
- 2012.05.04 公開．
懸案
スピーチの上下中央配置に使っている display:table を使ったテクニックに Firefox 3.5 で起きる不具合が報告されている．Project IE: Firefox 3.5 の display: table;(table-row; table-cell;) 関連の挙動について: