version0.4.35, added comic reader.

[pettanr/clientJs.git] / 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
index e931e75..b1eef4d 100644 (file)
--- a/0.4.x/test/html2comic_0.1.html
+++ b/0.4.x/test/html2comic_0.1.html
@@ -16,27 +16,27 @@
                                \r
 /*  PettanR Comic\r
 --------------------------------------------------------------------------------------*/\r
-.pettanr-comic-wrapper {\r
+.test_pettanr-comic-wrapper {\r
        margin:                                 1em auto;\r
 }\r
-       .pettanr-comic-panel {\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
-               .pettanr-comic-panel img {\r
+               .test_pettanr-comic-panel img {\r
                        position:                               absolute;\r
                }\r
-               .pettanr-comic-balloon {\r
+               .test_pettanr-comic-balloon {\r
                        position:                               absolute;\r
                }\r
-                       .pettanr-comic-balloon img {\r
+                       .test_pettanr-comic-balloon img {\r
                                width:                                  100%;\r
                                height:                                 100%;                           \r
                        }\r
-                       .pettanr-comic-balloon p {\r
+                       .test_pettanr-comic-balloon p {\r
                                margin:                                 0 !important;\r
                                padding:                                0 !important;                           \r
                                display:                                table;\r
@@ -49,12 +49,12 @@
                                *top:                                   50% !important;\r
                                \r
                        }\r
-                               .pettanr-comic-balloon p span,\r
-                               .pettanr-comic-balloon p strong,\r
-                               .pettanr-comic-balloon p em,\r
-                               .pettanr-comic-balloon p i,\r
-                               .pettanr-comic-balloon p samp,\r
-                               .pettanr-comic-balloon p code {\r
+                               .test_pettanr-comic-balloon p span,\r
+                               .test_pettanr-comic-balloon p strong,\r
+                               .test_pettanr-comic-balloon p em,\r
+                               .test_pettanr-comic-balloon p i,\r
+                               .test_pettanr-comic-balloon p samp,\r
+                               .test_pettanr-comic-balloon p code {\r
                                        vertical-align:                 middle;\r
                                        text-align:                             center;\r
                                        font-size:                              14px; /* opera6 で使用 13px は不可 */\r
@@ -64,30 +64,30 @@
                                        *position:                              relative;\r
                                        *top:                                   -50%;\r
                                }\r
-                               .pettanr-comic-balloon p strong {\r
+                               .test_pettanr-comic-balloon p strong {\r
                                        font-weight:                    bold;\r
                                }\r
-                               .pettanr-comic-balloon p em,\r
-                               .pettanr-comic-balloon p i {\r
+                               .test_pettanr-comic-balloon p em,\r
+                               .test_pettanr-comic-balloon p i {\r
                                        font-style:                             italic;\r
                                }\r
-                               .pettanr-comic-balloon p samp,\r
-                               .pettanr-comic-balloon p code {\r
+                               .test_pettanr-comic-balloon p samp,\r
+                               .test_pettanr-comic-balloon p code {\r
                                        font-family:                    monospace;\r
                                }       \r
                                \r
-       .show-border .pettanr-comic-balloon {\r
+       .show-border .test_pettanr-comic-balloon {\r
                border:                                 1px solid green;\r
        }               \r
-       .show-border .pettanr-comic-balloon p {\r
+       .show-border .test_pettanr-comic-balloon p {\r
                border:                                 1px solid red;\r
        }\r
-       .show-border .pettanr-comic-balloon p span,\r
-       .show-border .pettanr-comic-balloon p strong,\r
-       .show-border .pettanr-comic-balloon p em,\r
-       .show-border .pettanr-comic-balloon p i,\r
-       .show-border .pettanr-comic-balloon p samp,\r
-       .show-border .pettanr-comic-balloon p code {\r
+       .show-border .test_pettanr-comic-balloon p span,\r
+       .show-border .test_pettanr-comic-balloon p strong,\r
+       .show-border .test_pettanr-comic-balloon p em,\r
+       .show-border .test_pettanr-comic-balloon p i,\r
+       .show-border .test_pettanr-comic-balloon p samp,\r
+       .show-border .test_pettanr-comic-balloon p code {\r
                border:                                 1px solid blue;\r
        }\r
        </style>\r
@@ -136,20 +136,20 @@
                                        <div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
                                        \r
                                        <div id="html2comic">\r
-                                               <div class="pettanr-comic-wrapper" style="width: 400px;">\r
-                                                       <div class="pettanr-comic-panel" style="border-width: 2px; height: 235px;">\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
                                                                        width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
                                                                >\r
-                                                               <div class="pettanr-comic-balloon"\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
                                                                        <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
                                                                </div>\r
-                                                               <div class="pettanr-comic-balloon"\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
@@ -185,20 +185,20 @@
                                        <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
                                        <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;p&gt; と &lt;span&gt; からなる．</p>\r
                                        <pre class="brush: xml;">\r
-&lt;div class=&quot;pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
-       &lt;div class=&quot;pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
+&lt;div class=&quot;test_pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
+       &lt;div class=&quot;test_pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
                &lt;img src=&quot;../resource_pictures/1.png&quot;\r
                        alt=&quot;目の血走ったペンギンが拳を握り締めている&quot;\r
                        title=&quot;キャラクター名:キンイチ, 絵師:yas&quot;\r
                        width=&quot;166&quot; height=&quot;272&quot; style=&quot;left: 148px; top: -2px; z-index: 0;&quot;\r
                &gt;\r
-               &lt;div class=&quot;pettanr-comic-balloon&quot;\r
+               &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
                        style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;\r
                &gt;\r
                        &lt;img src=&quot;../system_pictures/_w5.gif&quot; alt=&quot;ペンギン曰く&quot;&gt;\r
                        &lt;p&gt;&lt;span&gt;ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？&lt;/span&gt;&lt;/p&gt;\r
                &lt;/div&gt;\r
-               &lt;div class=&quot;pettanr-comic-balloon&quot;\r
+               &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
                        style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;\r
                &gt;\r
                        &lt;img src=&quot;../system_pictures/_w19.gif&quot; alt=&quot;ペンギン一息ついて&quot;&gt;\r
@@ -211,27 +211,27 @@
                                        <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
-.pettanr-comic-wrapper {\r
+.test_pettanr-comic-wrapper {\r
        margin:                                 1em auto;\r
 }\r
-       .pettanr-comic-panel {\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
-               .pettanr-comic-panel img {\r
+               .test_pettanr-comic-panel img {\r
                        position:                               absolute;\r
                }\r
-               .pettanr-comic-balloon {\r
+               .test_pettanr-comic-balloon {\r
                        position:                               absolute;\r
                }\r
-                       .pettanr-comic-balloon img {\r
+                       .test_pettanr-comic-balloon img {\r
                                width:                                  100%;\r
                                height:                                 100%;                           \r
                        }\r
-                       .pettanr-comic-balloon p {\r
+                       .test_pettanr-comic-balloon p {\r
                                margin:                                 0 !important;\r
                                padding:                                0 !important;                           \r
                                display:                                table;\r
@@ -244,12 +244,12 @@
                                *top:                                   50% !important;\r
                                \r
                        }\r
-                               .pettanr-comic-balloon p span,\r
-                               .pettanr-comic-balloon p strong,\r
-                               .pettanr-comic-balloon p em,\r
-                               .pettanr-comic-balloon p i,\r
-                               .pettanr-comic-balloon p samp,\r
-                               .pettanr-comic-balloon p code {\r
+                               .test_pettanr-comic-balloon p span,\r
+                               .test_pettanr-comic-balloon p strong,\r
+                               .test_pettanr-comic-balloon p em,\r
+                               .test_pettanr-comic-balloon p i,\r
+                               .test_pettanr-comic-balloon p samp,\r
+                               .test_pettanr-comic-balloon p code {\r
                                        vertical-align:                 middle;\r
                                        text-align:                             center;\r
                                        font-size:                              14px; /* opera6 で使用 13px は不可 */\r
@@ -259,15 +259,15 @@
                                        *position:                              relative;\r
                                        *top:                                   -50%;\r
                                }\r
-                               .pettanr-comic-balloon p strong {\r
+                               .test_pettanr-comic-balloon p strong {\r
                                        font-weight:                    bold;\r
                                }\r
-                               .pettanr-comic-balloon p em,\r
-                               .pettanr-comic-balloon p i {\r
+                               .test_pettanr-comic-balloon p em,\r
+                               .test_pettanr-comic-balloon p i {\r
                                        font-style:                             italic;\r
                                }\r
-                               .pettanr-comic-balloon p samp,\r
-                               .pettanr-comic-balloon p code {\r
+                               .test_pettanr-comic-balloon p samp,\r
+                               .test_pettanr-comic-balloon p code {\r
                                        font-family:                    monospace;\r
                                }       \r
                                        </pre>\r