<meta http-equiv="imagetoolbar" content="no">\r
<link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
<!-- InstanceBeginEditable name="doctitle" -->\r
- <title>Comic 用 html構造テスト | pettanR</title>\r
+ <title>マンガ状コンテンツを表示するための html + css の調査 | pettanR</title>\r
<!-- InstanceEndEditable -->\r
<!-- InstanceBeginEditable name="head" -->\r
+ <style type="text/css">\r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test1-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test1-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test1-pettanr-comic-panel img,\r
+ .test1-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test1-pettanr-comic-balloon img {\r
+ width: 100%;\r
+ height: 100%;\r
+ } \r
+ .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
+ position: absolute;\r
+ table-layout: fixed;\r
+ top: 0;\r
+ left: 16.6%;\r
+ width: 66.6%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ }\r
+ .test1-pettanr-comic-speach tbody,\r
+ .test1-pettanr-comic-speach tr,\r
+ .test1-pettanr-comic-speach td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ font-size: 14px; /* opera6で仕様 13px は不可 */\r
+ }\r
+ \r
+ \r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test2-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test2-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test2-pettanr-comic-panel img {\r
+ position: absolute;\r
+ }\r
+ .test2-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test2-pettanr-comic-balloon img {\r
+ position: absolute;\r
+ width: 100%;\r
+ height: 100%;\r
+ }\r
+ .test2-pettanr-comic-balloon div {\r
+ position: relative;\r
+ display: table-row;\r
+ padding: 0 16.6%;\r
+ width: 66.6%;\r
+ height: 100%;\r
+ } \r
+ .test2-pettanr-comic-balloon div p {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ margin: 0 !important;\r
+ padding: 0 !important;\r
+ *position: absolute;\r
+ *top: 50%;\r
+ }\r
+ .test2-pettanr-comic-balloon div p span {\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%;\r
+ font-size: 14px;\r
+ } \r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test3-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test3-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test3-pettanr-comic-panel img {\r
+ position: absolute;\r
+\r
+ }\r
+ .test3-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test3-pettanr-comic-balloon img {\r
+ position: absolute;\r
+ width: 100%;\r
+ height: 100%; \r
+ }\r
+ .test3-pettanr-comic-balloon p {\r
+ margin: 0 !important;\r
+ padding: 0 !important; \r
+ display: table;\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
+ border: 1px solid red; \r
+ } \r
+ .test3-pettanr-comic-balloon p span {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%;\r
+ font-size: 14px; /* opera6で仕様 13px は不可 */\r
+ border: 1px solid blue; \r
+ } \r
+ </style>\r
<!-- InstanceEndEditable -->\r
</head>\r
\r
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
- <h2>コミック用 html 構造のテスト</h2>\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > マンガ状コンテンツを表示するための html + css の調査</div>\r
+ <h2>マンガ状コンテンツを表示するための html + css の調査</h2>\r
<p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです.</p>\r
- <p>html は js で動的に描画されるため、js の関連部分のテストも兼ねます.</p>\r
- <p>js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます.</p>\r
- <p>js による動的な書き出しは、吹き出し画像のリクエストを抑止でき、またブラウザの表示エリア外の画像へのアクセスを行わなくて済むので システムへの負荷を抑えることができます.</p>\r
- <form name="htmlTest" class="block-element-item">\r
- <textarea name="jsonString" style="width:100%" rows="30" cols="100">\r
-{\r
- "border": 1,\r
- "comic_id": 5,\r
- "resource_picture_id": 1,\r
- "x": 0,\r
- "y": 0,\r
- "z": 0,\r
- "t": 0,\r
- "width": 400,\r
- "height": 235,\r
- "panel_elements": [\r
- {\r
- "resource_picture": {"id":1,"ext":'png'},\r
- "x": 178,\r
- "y": -2,\r
- "z": 0,\r
- "width": 166,\r
- "height": 252\r
- },\r
- {\r
- "balloon_template_id": 1,\r
- "system_picture_id": 1,\r
- "size": 1,\r
- "tail": -14,\r
- "x": -29,\r
- "y": 39,\r
- "z": 1,\r
- "width": 200,\r
- "height": 160,\r
- "speaches_attributes": {\r
- "newf1": {\r
- "content": "Hello",\r
- "x": -29,\r
- "y": 39,\r
- "width": 200,\r
- "height": 160\r
- }\r
- }\r
+ <p>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどれか?このページを表示させつつ判断します.</p>\r
+ <p>このページでは js を使用していないため ベクター画像の置き換えは行われず、反転画像はサーバのものが読み込まれます.</p>\r
+ \r
+ <h2><table> を使ったテキストの上下中央配置</h2>\r
+ <p><table> タグを使ったレイアウトは多くのブラウザで意図した表示が期待できるが、html 文書としてはよろしくない.</p>\r
+ <div class="test1-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</td></tr></table>\r
+ </div>\r
+ <div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>さて?</td></tr></table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <h3>対応ブラウザ</h3>\r
+ <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7</p>\r
+ <h3>準対応ブラウザ</h3>\r
+ <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す ), Konqueror4.8(windows, さて?がずれる)</p>\r
+ <h3>非対応ブラウザ</h3>\r
+ <p>NN6(テキスト表示位置がずれる), opera5( 日本語に非対応で文字化けする )</p>\r
+ <h3>source</h3>\r
+ <h4>html 部分</h4>\r
+ <p>パネルピクチャはひとつの <img> タグで表示されます.</p>\r
+ <p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <table> からなる.</p>\r
+ <pre><code>\r
+<div class="test1-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</td></tr></table>\r
+ </div>\r
+ <div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>さて?</td></tr></table>\r
+ </div>\r
+ </div>\r
+</div>\r
+ </code></pre>\r
+ <h4>css 部分</h4>\r
+ <pre><code>\r
+.test1-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test1-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test1-pettanr-comic-panel img,\r
+ .test1-pettanr-comic-balloon {\r
+ position: absolute;\r
+ } \r
+ .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
+ position: absolute;\r
+ table-layout: fixed;\r
+ top: 16.6%;\r
+ left: 16.6%;\r
+ width: 66.6%;\r
+ height: 66.6%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
}\r
- ]\r
+ .test1-pettanr-comic-speach tbody,\r
+ .test1-pettanr-comic-speach tr,\r
+ .test1-pettanr-comic-speach td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ vertical-align: middle;\r
+ }\r
+ </code></pre>\r
+\r
+\r
+ <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応 タグの少ないバージョン</h2>\r
+ <p>html タグ構造は 先の <table> レイアウトに比べて自然.しかし <code>display:table-cell</code> などを使うため、より広範なブラウザに対応する、という点で不安が残る.</p>\r
+ <p>参考にしたページ <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a></p>\r
+ <div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</span></p>\r
+ </div>\r
+ <div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <p><span>さて?</span></p>\r
+ </div>\r
+ </div>\r
+ </div> \r
+ <h3>対応ブラウザ</h3>\r
+ <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
+ <h3>準対応ブラウザ</h3>\r
+ <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す )</p>\r
+ <h3>非対応ブラウザ</h3>\r
+ <p>NN6(テキスト表示位置がずれる), opera5( 日本語に非対応で文字化けする )</p>\r
+ <h3>source</h3>\r
+ <h4>html 部分</h4>\r
+ <p>パネルピクチャはひとつの <img> タグで表示されます.</p>\r
+ <p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる.</p>\r
+ <pre><code>\r
+<div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</span></p>\r
+ </div>\r
+ <div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <p><span>さて?</span></p>\r
+ </div>\r
+ </div>\r
+</div>\r
+ </code></pre>\r
+ <h4>css 部分</h4>\r
+ <pre><code>\r
+.test3-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
}\r
- </textarea>\r
- <input type="button" value="print" name="bindButton">\r
- </form>\r
- <div id="outputHere"></div>\r
+ .test3-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test3-pettanr-comic-panel img {\r
+ position: absolute;\r
+\r
+ }\r
+ .test3-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test3-pettanr-comic-balloon img {\r
+ position: absolute;\r
+ width: 100%;\r
+ height: 100%; \r
+ }\r
+ .test3-pettanr-comic-balloon p {\r
+ margin: 0 !important;\r
+ padding: 0 !important; \r
+ display: table;\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
+ .test3-pettanr-comic-balloon p span {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%; \r
+ } \r
+ </code></pre>\r
+ \r
+ \r
+ <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応</h2>\r
+ <p>table-cell 及び クロスブラウザ対応</p>\r
+ <div class="test2-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test2-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test2-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <div><p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</span></p></div>\r
+ </div>\r
+ <div class="test2-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <div><p><span>さて?</span></p></div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <h3>対応ブラウザ</h3>\r
+ <p>NN9, firefox 3.6, ie6</p>\r
+ \r
</div>\r
<!-- InstanceEndEditable -->\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" src="../javascripts/common.js"></script>\r
-<!-- InstanceBeginEditable name="script" -->\r
<script type="text/javascript">\r
- var jsonArea = document.htmlTest.jsonString,\r
- button = document.htmlTest.bindButton,\r
- bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
- json;\r
- button.onclick = function(){\r
- try {\r
- eval( 'json = ' + jsonArea.value);\r
- bindWorker.json( json); \r
- } catch(e){\r
- }\r
- }\r
+ var has_server_support = false;\r
</script>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
<!-- InstanceEndEditable -->\r
</body>\r
<!-- InstanceEnd --></html>\r