<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
- \r
- <h3>動的書き出しテスト</h3>\r
- <p>以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます．</p>\r
- <form name="htmlTest" class="block-element-item">\r
- <textarea name="jsonString" style="width:100%" rows="20" 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
- }\r
- ]\r
-}\r
- </textarea>\r
- <input type="button" value="print" name="bindButton" class="button">\r
- </form>\r
- <p id="invalidJsonAlert" style="color:red;display:none;font-weight:bold;">json is invalid !</p>\r
- <div id="outputHere"></div>\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
- <p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する．外部サイト張り出し用 script や ユーザーコンソールの コミックビューワーから使われる．</p>\r
- <p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する．bind の意味は 製本 ．jQuery.bind とは関係ないので注意．</p>\r
+ <h4>html 部分</h4>\r
+ <p>パネルピクチャはひとつの <img> タグで表示されます．</p>\r
+ <p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <table> からなる．</p>\r
<pre><code>\r
-var jsonArea = document.htmlTest.jsonString,\r
- button = document.htmlTest.bindButton,\r
- bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
- elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
- json = null;\r
-button.onclick = function(){\r
- try {\r
- eval( 'json = ' + jsonArea.value);\r
- elmAlertStyle.display = 'none';\r
- } catch(e){\r
- elmAlertStyle.display = 'block';\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
- json !== null && bindWorker.json( json);\r
- json = null;\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
+ .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
+ .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
- <h3>js による動的な書き出しの利点</h3>\r
- <p>js による動的な書き出しには以下にあげる利点がある．最後のもの以外はサーバへの画像リクエストを抑えるものになります．</p>\r
- <ul>\r
- <li>吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる</li>\r
- <li>反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる．</li>\r
- <li>ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる</li>\r
- <li>コマのズーム機能が利用できる．ただしリサイズを禁止された画像を含むコマに対してはできない．</li>\r
- </ul>\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>\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
- elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
- json = null;\r
- button.onclick = function(){\r
- try {\r
- eval( 'json = ' + jsonArea.value);\r
- elmAlertStyle.display = 'none';\r
- } catch(e){\r
- elmAlertStyle.display = 'block';\r
- }\r
- json !== null && bindWorker.json( json);\r
- json = null;\r
- }\r
- </script>\r
<!-- InstanceEndEditable -->\r
</body>\r
<!-- InstanceEnd --></html>\r
OSDN Git Service
