--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Language" content="ja">\r
+ <meta http-equiv="Content-Script-Type" content="text/javascript">\r
+ <meta http-equiv="Content-Style-Type" content="text/css">\r
+ <meta http-equiv="imagetoolbar" content="no">\r
+ <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
+ <!-- InstanceBeginEditable name="doctitle" -->\r
+ <title>ぺったんR html 実証サンプル version 0.2 | pettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <style type="text/css"> \r
+ \r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test_pettanr-comic-wrapper {\r
+ margin : 1em auto;\r
+}\r
+ .test_pettanr-comic-panel {\r
+ border-style : solid;\r
+ border-color : #111;\r
+ position : relative;\r
+ margin : 1em 0;\r
+ overflow : hidden;\r
+ }\r
+ .test_pettanr-comic-panel img {\r
+ position : absolute;\r
+ }\r
+ .test_pettanr-comic-balloon {\r
+ position : absolute;\r
+ }\r
+ .test_pettanr-comic-balloon img {\r
+ width : 100%;\r
+ height : 100%;\r
+ }\r
+ .test_pettanr-comic-speech {\r
+ margin : 0 !important;\r
+ padding : 0 !important; \r
+ display : table;\r
+ table-layout : fixed;\r
+ position : absolute;\r
+ top : 0;\r
+ left : 16.6%;\r
+ width : 66.6%;\r
+ height : 100%;\r
+ *height : auto;\r
+ *top : 50% !important;\r
+ }\r
+ .test_pettanr-comic-speech-inner {\r
+ vertical-align : middle;\r
+ display : table-cell;\r
+ *display : block;\r
+ zoom : 1;\r
+ *position : relative;\r
+ *top : -50%;\r
+ }\r
+ .test_pettanr-comic-speech p {\r
+ padding : 0.5em 0 !important;\r
+ margin : 0 !important;\r
+ }\r
+ .test_pettanr-comic-speech strong {\r
+ font-weight : bold;\r
+ }\r
+ .test_pettanr-comic-speech em,\r
+ .test_pettanr-comic-speech i {\r
+ font-style : italic;\r
+ }\r
+ .test_pettanr-comic-speech samp,\r
+ .test_pettanr-comic-speech code {\r
+ font-family : monospace;\r
+ }\r
+\r
+ .show-border .test_pettanr-comic-speech {\r
+ border : 1px solid green;\r
+ } \r
+ .show-border .test_pettanr-comic-speech div {\r
+ border : 1px solid red;\r
+ }\r
+ .show-border .test_pettanr-comic-speech p {\r
+ border : 1px solid orange;\r
+ }\r
+ .show-border .test_pettanr-comic-speech span,\r
+ .show-border .test_pettanr-comic-speech strong,\r
+ .show-border .test_pettanr-comic-speech em,\r
+ .show-border .test_pettanr-comic-speech i,\r
+ .show-border .test_pettanr-comic-speech samp,\r
+ .show-border .test_pettanr-comic-speech code {\r
+ border : 1px solid blue;\r
+ }\r
+ </style>\r
+ <!-- InstanceEndEditable -->\r
+</head>\r
+\r
+<body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
+ \r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1><a href="../index.html">pettanR</a></h1>\r
+ <!-- global navi -->\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <!-- InstanceBeginEditable name="main_content" -->\r
+ <div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > ぺったんR html 実証サンプル version 0.2</div>\r
+ <h2>ぺったんR html 実証サンプル version 0.2 2013.08.10</h2>\r
+ <h3>はじめに</h3>\r
+ <p>html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．</p>\r
+ <p>この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．</p>\r
+ <p>また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．</p>\r
+ <p>この文書で示された html 構造と css は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．</p>\r
+ \r
+ <h3>機能一覧</h3>\r
+ <dl class="dl-table clearfix">\r
+ <dt>正常動作確認済みブラウザ</dt>\r
+ <dd>ie5+, NN7.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5</dd>\r
+ <dt>吹きだしの語調</dt>\r
+ <dd>通常の語調のほかに、強調、コンピュータの合成音声</dd>\r
+ <dt>脚本情報</dt>\r
+ <dd>テキストブラウザ・音声読み上げブラウザでも作品を読むことができる（はず）</dd>\r
+ <dt>リッチテキスト機能</dt>\r
+ <dd>まだ、、、</dd>\r
+ </dl>\r
+ <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない．</p>\r
+ \r
+ <h3>表示サンプル</h3>\r
+ <p>表示サンプルは今後充実していくこととする．</p>\r
+ \r
+ <div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
+ \r
+ <div id="html2comic">\r
+ <div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png"\r
+ alt="目の血走ったペンギンが拳を握り締めている"\r
+ title="キャラクター名:キンイチ, 絵師:yas"\r
+ longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi"\r
+ width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
+ >\r
+ <div class="test_pettanr-comic-balloon"\r
+ style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
+ >\r
+ <img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
+ <div class="test_pettanr-comic-speech">\r
+ <div class="test_pettanr-comic-speech-inner">\r
+ <p>どの環境でもそれなりにセリフを表示する</p>\r
+ <p>これには慎重を要する</p>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="test_pettanr-comic-balloon"\r
+ style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
+ >\r
+ <img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
+ <div class="test_pettanr-comic-speech">\r
+ <div class="test_pettanr-comic-speech-inner">\r
+ <p>そやそや</p>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <h3>画像や css に対応しない Web ブラウザでの表示</h3>\r
+ <p>マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．</p>\r
+ <p>テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．</p>\r
+ <p>同様の着眼で代替テキストを用意する．</p>\r
+ <h4>テキストブラウザでの表示イメージ</h4>\r
+ <pre><samp>\r
+目の血走ったペンギンが拳を握り締めている\r
+ペンギン曰く\r
+どの環境でもそれなりにセリフを表示する\r
+これには慎重を要する\r
+ペンギン一息ついて\r
+そやそや\r
+ </samp></pre>\r
+ \r
+ <h3>ブラウザ検証</h3>\r
+ <h4>対応ブラウザ</h4>\r
+ <p>NN7, NN8, NN9, firefox3.6, ie5以降, Safari3.2, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
+ <h4>準対応ブラウザ</h4>\r
+ <p>opera6( <code>overflow:hidden</code> が孫要素に対して利かず（？）要素がパネルをはみ出す )</p>\r
+ <p>opera8 パネルの枠線が一部欠けてしまう．opera7.2 ではこの不具合は起こらない．</p>\r
+ <h4>非対応ブラウザ</h4>\r
+ <p>NN6(テキスト表示位置がずれる), opera5( 日本語に非対応で文字化けする )</p>\r
+ \r
+ <h3>ソースコード</h3>\r
+ <h4>html 部分</h4>\r
+ <p>パネルピクチャはひとつの <img> タグで表示されます．</p>\r
+ <p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる．</p>\r
+ <pre class="brush: xml;">\r
+<div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png"\r
+ alt="目の血走ったペンギンが拳を握り締めている"\r
+ title="キャラクター名:キンイチ, 絵師:yas"\r
+ longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi"\r
+ width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
+ >\r
+ <div class="test_pettanr-comic-balloon"\r
+ style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
+ >\r
+ <img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
+ <div class="test_pettanr-comic-speech">\r
+ <div class="test_pettanr-comic-speech-inner">\r
+ <p>どの環境でもそれなりにセリフを表示する</p>\r
+ <p>これには慎重を要する</p>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="test_pettanr-comic-balloon"\r
+ style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
+ >\r
+ <img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
+ <div class="test_pettanr-comic-speech">\r
+ <div class="test_pettanr-comic-speech-inner">\r
+ <p>そやそや</p>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+</div>\r
+ </pre>\r
+ <h4>css 部分</h4>\r
+ <p>css2 の <code>display: table, display: table-cell</code> を使って吹き出し内のテキストの上下中央配置を行う．</p>\r
+ <p><code>display: table</code> をサポートしない ie7 以下は、入れ子になった要素を上下に 50% ずらす、という手法で上下中央配置している．その様子を、show border ボタンを使って確認されたし．（ 参考 <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a> ）</p>\r
+ <pre class="brush: css;">\r
+.test_pettanr-comic-wrapper {\r
+ margin : 1em auto;\r
+}\r
+ .test_pettanr-comic-panel {\r
+ border-style : solid;\r
+ border-color : #111;\r
+ position : relative;\r
+ margin : 1em 0;\r
+ overflow : hidden;\r
+ }\r
+ .test_pettanr-comic-panel img {\r
+ position : absolute;\r
+ }\r
+ .test_pettanr-comic-balloon {\r
+ position : absolute;\r
+ }\r
+ .test_pettanr-comic-balloon img {\r
+ width : 100%;\r
+ height : 100%;\r
+ }\r
+ .test_pettanr-comic-speech {\r
+ margin : 0 !important;\r
+ padding : 0 !important; \r
+ display : table;\r
+ table-layout : fixed;\r
+ position : absolute;\r
+ top : 0;\r
+ left : 16.6%;\r
+ width : 66.6%;\r
+ height : 100%;\r
+ *height : auto;\r
+ *top : 50% !important;\r
+ }\r
+ .test_pettanr-comic-speech-inner {\r
+ vertical-align : middle;\r
+ display : table-cell;\r
+ *display : block;\r
+ zoom : 1;\r
+ *position : relative;\r
+ *top : -50%;\r
+ }\r
+ .test_pettanr-comic-speech p {\r
+ padding : 0.5em 0 !important;\r
+ margin : 0 !important;\r
+ }\r
+ .test_pettanr-comic-speech strong {\r
+ font-weight : bold;\r
+ }\r
+ .test_pettanr-comic-speech em,\r
+ .test_pettanr-comic-speech i {\r
+ font-style : italic;\r
+ }\r
+ .test_pettanr-comic-speech samp,\r
+ .test_pettanr-comic-speech code {\r
+ font-family : monospace;\r
+ }\r
+ </pre>\r
+ <h3>履歴</h3>\r
+ <dl class="dl-table-small">\r
+ <dt>version 0.2</dt>\r
+ <dd>2013.08.10 公開．<br>\r
+ 吹き出し内での <p> タグによる段落分け(改行)に対応．<br>\r
+ デフォルトでテキストの中央配置をやめる．<br>\r
+ 外す．<del>font-size : 14px; /* opera6 で使用 13px は不可 */</del><br>\r
+ レンダリング負荷を下げる為の css 指定を追加 ( テキストの上下中央配置のための display:table に対して tabel-layout:fixed を追加 )．<br>\r
+ <img> タグに longdesc を追加．title 属性で説明しきれなかった画像に関する情報が書いてある url．\r
+ </dd>\r
+ <dt>version 0.1</dt>\r
+ <dd>2012.05.04 公開．</dd>\r
+ </dl>\r
+ <h3>懸案</h3>\r
+ <p>スピーチの上下中央配置に使っている display:table を使ったテクニックに Firefox 3.5 で起きる不具合が報告されている．<a href="http://ie-style.blogspot.jp/2009/08/firefox-35-display-tabletable-row-table.html">Project IE: Firefox 3.5 の display: table;(table-row; table-cell;) 関連の挙動について:</a></p>\r
+ </div>\r
+ <!-- InstanceEndEditable -->\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
+\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="../help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
+ </div><!-- #EndLibraryItem -->\r
+ </div>\r
+ <script type="text/javascript">\r
+ var has_server_support = false;\r
+ </script>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
+ <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>\r
+ <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>\r
+ <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js"></script>\r
+ <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js"></script>\r
+ <link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">\r
+ <script type="text/javascript">\r
+ SyntaxHighlighter.all();\r
+ \r
+ var btn = document.getElementById( 'swbutton' );\r
+ var elm = document.getElementById( 'html2comic' );\r
+ var cls = 'show-border';\r
+ var val = btn.firstChild.data\r
+ \r
+ function switchBorder(){\r
+ var current = elm.className;\r
+ elm.className = cls === current ? '' : cls;\r
+ btn.firstChild.data = cls === current ? val: 'hide border';\r
+ }\r
+ </script>\r
+<!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
OSDN Git Service
