ぺったんR html 実証サンプル version 0.2 2013.08.10
はじめに
html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．
この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．
また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．
この文書で示された html 構造と css は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．
機能一覧
- 正常動作確認済みブラウザ
- ie5+, NN7.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5
- 吹きだしの語調
- 通常の語調のほかに、強調、コンピュータの合成音声
- 脚本情報
- テキストブラウザ・音声読み上げブラウザでも作品を読むことができる（はず）
- リッチテキスト機能
- まだ、、、
実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない．
表示サンプル
表示サンプルは今後充実していくこととする．
どの環境でもそれなりにセリフを表示する
これには慎重を要する
そやそや
画像や css に対応しない Web ブラウザでの表示
マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．
テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．
同様の着眼で代替テキストを用意する．
テキストブラウザでの表示イメージ
目の血走ったペンギンが拳を握り締めている ペンギン曰く どの環境でもそれなりにセリフを表示する これには慎重を要する ペンギン一息ついて そやそや
ブラウザ検証
対応ブラウザ
NN7, NN8, NN9, firefox3.6, ie5以降, Safari3.2, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)
準対応ブラウザ
opera6( overflow:hidden が孫要素に対して利かず（？）要素がパネルをはみ出す )
opera8 パネルの枠線が一部欠けてしまう．opera7.2 ではこの不具合は起こらない．
非対応ブラウザ
NN6(テキスト表示位置がずれる), 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: 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 を使って吹き出し内のテキストの上下中央配置を行う．
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-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;
}
履歴
- 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;) 関連の挙動について: