ぺったんR html 実証サンプル version 0.1.x 2012.05.04 ～
はじめに
html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．
この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．
また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．
この文書で示された html 構造は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．
アップデート履歴
version 0.1.1 2012.08.19
display: -moz-table; display: -moz-table-cell;
上記 css の追記により対応ブラウザが NN7.2+ ⇒ NN6.2+ となる．
ie5.01 ( winXP ) での正常表示を確認．
機能一覧
- 正常動作確認済みブラウザ
- ie5.01+, NN6.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5
- 吹きだしの語調
- 通常の語調のほかに、強調、コンピュータの合成音声
- 吹きだし内テキストのレイアウト
- センタリング
、右より、左より
実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本テストでは扱わない．
表示サンプル
表示サンプルは今後充実していくこととする．
ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？
さて？
画像や css に対応しない Web ブラウザでの表示
マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．
テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．
同様の着眼で代替テキストを用意する．
テキストブラウザでの表示イメージ
目の血走ったペンギンが拳を握り締めている ペンギン曰く ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？ ペンギン一息ついて さて？
ブラウザ検証
対応ブラウザ
Windows
ie5.01+, NN6+, firefox3.6, Safari3.2, Iron5, opera7+, Konqueror4.8
Mac
Linux
準対応ブラウザ
Windows
opera6( overflow:hidden が孫要素に対して利かず（？）要素がパネルをはみ出す )
Mac
Linux
非対応ブラウザ
Windows
NN6(テキスト表示位置がずれる), opera5( 日本語に非対応で文字化けする )
Mac
Linux
ソースコード
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: 235px;"> <img src="../resource_pictures/1.png" alt="目の血走ったペンギンが拳を握り締めている" title="キャラクター名:キンイチ, 絵師:yas" 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="ペンギン曰く"> <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p> </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="ペンギン一息ついて"> <p><strong>さて？</strong></p> </div> </div> </div>
css 部分
css2 の display: table, display: table-cell を使って吹き出し内のテキストの上下中央配置を行う．
display: table をサポートしない ie7 以下は、入れ子になった要素を上下に 50% ずらす、という手法で上下中央配置している．その様子を、show border ボタンを使って確認されたし．（ 参考 tableを使わずdivで縦位置を指定 ）
.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 {
position: absolute;
}
.test_pettanr-comic-balloon {
position: absolute;
}
.test_pettanr-comic-balloon img {
width: 100%;
height: 100%;
}
.test_pettanr-comic-balloon p {
margin: 0 !important;
padding: 0 !important;
display: table;
display: -moz-table; /* NN6 */
position: absolute;
top: 0;
left: 16.6%;
width: 66.6%;
height: 100%;
*height: auto;
*top: 50% !important;
}
.test_pettanr-comic-balloon p span,
.test_pettanr-comic-balloon p strong,
.test_pettanr-comic-balloon p em,
.test_pettanr-comic-balloon p i,
.test_pettanr-comic-balloon p samp,
.test_pettanr-comic-balloon p code {
vertical-align: middle;
text-align: center;
font-size: 14px; /* opera6 で使用 13px は不可 */
display: table-cell;
display: -moz-table-cell; /* NN6 */
*display: block;
zoom: 1;
*position: relative;
*top: -50%;
}
.test_pettanr-comic-balloon p strong {
font-weight: bold;
}
.test_pettanr-comic-balloon p em,
.test_pettanr-comic-balloon p i {
font-style: italic;
}
.test_pettanr-comic-balloon p samp,
.test_pettanr-comic-balloon p code {
font-family: monospace;
}