From a384d9a02793c43ae0d0dc58490daf703cb7c113 Mon Sep 17 00:00:00 2001 From: itozyun Date: Fri, 4 May 2012 21:41:50 +0900 Subject: [PATCH] fixed comic2html_0.1.html --- 0.4.x/test/html2comic_0.1.html | 354 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 354 insertions(+) create mode 100644 0.4.x/test/html2comic_0.1.html diff --git a/0.4.x/test/html2comic_0.1.html b/0.4.x/test/html2comic_0.1.html new file mode 100644 index 0000000..90bef4b --- /dev/null +++ b/0.4.x/test/html2comic_0.1.html @@ -0,0 +1,354 @@ + + + + + + + + + + + ぺったんR html 実証サンプル version 0.1 | pettanR + + + + + + + + +
+
+ + + +
+ +
+ +

ぺったんR html 実証サンプル version 0.1

+

はじめに

+

html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝である．

+

この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．

+

また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．

+

この文書で示された html 構造は ぺったんR プロジェクトに設定されたライセンスの元でユーザーが自由に利用できる．

+ +

機能一覧

+
+
正常動作確認済みブラウザ
+
ie5.5+, NN7.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5
+
吹きだしの語調
+
通常の語調のほかに、強調、コンピュータの合成音声
+
吹きだし内テキストのレイアウト
+
センタリング、右より、左より
+
+ +

表示サンプル

+

表示サンプルは今後充実していくこととする．

+ +
show border
+ +
+
+
+ 目の血走ったペンギンが拳を握り締めている +
+ ペンギン曰く +

ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？

+
+
+ ペンギン一息ついて +

さて？

+
+
+
+
+ +

画像や css に対応しない Web ブラウザでの表示

+

マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．

+

テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し、html 構造を設定する．

+

テキストブラウザでの表示イメージ

+ 

+目の血走ったペンギンが拳を握り締めている
+ペンギン曰く
+ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？
+ペンギン一息ついて
+さて？
+
+ +

ブラウザ検証

+

対応ブラウザ

+

NN7, NN8, NN9, firefox3.6, ie5.5, ie6, ie7, Safari3.2, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)

+

準対応ブラウザ

+

opera6( overflow:hiddenが利かず要素がパネルをはみ出す )

+

非対応ブラウザ

+

NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )

+ +

ソースコード

+

html 部分

+

パネルピクチャはひとつの <img> タグで表示されます．

+

バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる．

+ 
+<div class="pettanr-comic-wrapper" style="width: 400px;">
+	<div class="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="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="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 部分

+ 
+.pettanr-comic-wrapper {
+	margin:					1em auto;
+}
+	.pettanr-comic-panel {
+		border-style:			solid;
+		border-color:			#111;
+		position:				relative;
+		margin:					1em 0;
+		overflow:				hidden;
+	}
+		.pettanr-comic-panel img {
+			position:				absolute;
+		}
+		.pettanr-comic-balloon {
+			position:				absolute;
+		}
+			.pettanr-comic-balloon img {
+				width:					100%;
+				height:					100%;				
+			}
+			.pettanr-comic-balloon p {
+				margin:					0 !important;
+				padding:				0 !important;				
+				display:				table;
+				position:				absolute;
+				top:					0;
+				left:					16.6%;
+				width:					66.6%;
+				height:					100%;
+				*height:				auto;
+				*top:					50% !important;
+				
+			}
+				.pettanr-comic-balloon p span,
+				.pettanr-comic-balloon p strong,
+				.pettanr-comic-balloon p em,
+				.pettanr-comic-balloon p i,
+				.pettanr-comic-balloon p samp,
+				.pettanr-comic-balloon p code {
+					vertical-align:			middle;
+					text-align:				center;
+					font-size:				14px; /* opera6 で使用 13px は不可 */
+					display:				table-cell;
+					*display:				block;
+					zoom:					1;
+					*position:				relative;
+					*top:					-50%;
+				}
+				.pettanr-comic-balloon p strong {
+					font-weight:			bold;
+				}
+				.pettanr-comic-balloon p em,
+				.pettanr-comic-balloon p i {
+					font-style:				italic;
+				}
+				.pettanr-comic-balloon p samp,
+				.pettanr-comic-balloon p code {
+					font-family:			monospace;
+				}	
+
+ +
+ +
+
+
+ +
+ + +
+ + + + + + + + + + + -- 2.11.0