0.5.x/test/html2comic_0.1.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/site.css">\r
  11         <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">\r
  12         <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">\r
  13         <!-- InstanceBeginEditable name="doctitle" -->\r
  14         <title>ぺったんR html 実証サンプル version 0.1 | pettanR</title>\r
  15         <!-- InstanceEndEditable -->\r
  16         <!-- InstanceBeginEditable name="head" -->\r
  17         <style type="text/css">                 \r
  18                                 \r
  19 /*  PettanR Comic\r
  20 --------------------------------------------------------------------------------------*/\r
  21 .test_pettanr-comic-wrapper {\r
  22         margin:                                 1em auto;\r
  23 }\r
  24         .test_pettanr-comic-panel {\r
  25                 border-style:                   solid;\r
  26                 border-color:                   #111;\r
  27                 position:                               relative;\r
  28                 margin:                                 1em 0;\r
  29                 overflow:                               hidden;\r
  30         }\r
  31                 .test_pettanr-comic-panel img {\r
  32                         position:                               absolute;\r
  33                 }\r
  34                 .test_pettanr-comic-balloon {\r
  35                         position:                               absolute;\r
  36                 }\r
  37                         .test_pettanr-comic-balloon img {\r
  38                                 width:                                  100%;\r
  39                                 height:                                 100%;                           \r
  40                         }\r
  41                         .test_pettanr-comic-balloon p {\r
  42                                 margin:                                 0 !important;\r
  43                                 padding:                                0 !important;                           \r
  44                                 display:                                table;\r
  45                                 display:                                -moz-table; /* NN6 */\r
  46                                 position:                               absolute;\r
  47                                 top:                                    0;\r
  48                                 left:                                   16.6%;\r
  49                                 width:                                  66.6%;\r
  50                                 height:                                 100%;\r
  51                                 *height:                                auto;\r
  52                                 *top:                                   50% !important;\r
  53                                 \r
  54                         }\r
  55                                 .test_pettanr-comic-balloon p span,\r
  56                                 .test_pettanr-comic-balloon p strong,\r
  57                                 .test_pettanr-comic-balloon p em,\r
  58                                 .test_pettanr-comic-balloon p i,\r
  59                                 .test_pettanr-comic-balloon p samp,\r
  60                                 .test_pettanr-comic-balloon p code {\r
  61                                         vertical-align:                 middle;\r
  62                                         text-align:                             center;\r
  63                                         font-size:                              14px; /* opera6 で使用 13px は不可 */\r
  64                                         display:                                table-cell;\r
  65                                         display:                                -moz-table-cell; /* NN6 */\r
  66                                         *display:                               block;\r
  67                                         zoom:                                   1;\r
  68                                         *position:                              relative;\r
  69                                         *top:                                   -50%;\r
  70                                 }\r
  71                                 .test_pettanr-comic-balloon p strong {\r
  72                                         font-weight:                    bold;\r
  73                                 }\r
  74                                 .test_pettanr-comic-balloon p em,\r
  75                                 .test_pettanr-comic-balloon p i {\r
  76                                         font-style:                             italic;\r
  77                                 }\r
  78                                 .test_pettanr-comic-balloon p samp,\r
  79                                 .test_pettanr-comic-balloon p code {\r
  80                                         font-family:                    monospace;\r
  81                                 }       \r
  82                                 \r
  83         .show-border .test_pettanr-comic-balloon {\r
  84                 border:                                 1px solid green;\r
  85         }               \r
  86         .show-border .test_pettanr-comic-balloon p {\r
  87                 border:                                 1px solid red;\r
  88         }\r
  89         .show-border .test_pettanr-comic-balloon p span,\r
  90         .show-border .test_pettanr-comic-balloon p strong,\r
  91         .show-border .test_pettanr-comic-balloon p em,\r
  92         .show-border .test_pettanr-comic-balloon p i,\r
  93         .show-border .test_pettanr-comic-balloon p samp,\r
  94         .show-border .test_pettanr-comic-balloon p code {\r
  95                 border:                                 1px solid blue;\r
  96         }\r
  97         </style>\r
  98         <!-- InstanceEndEditable -->\r
  99 </head>\r
 100 \r
 101 <body>\r
 102     <div id="general-content">\r
 103         <div id="outer-wrapper">\r
 104             \r
 105             <div id="header">\r
 106                 <div class="base-content-width" style="position:relative;">\r
 107                     <h1><a href="../index.html">pettanR</a></h1>\r
 108                 <!-- global navi -->\r
 109                     <div id="global-navi">\r
 110                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
 111                     </div>\r
 112                 </div>\r
 113             </div>\r
 114             \r
 115             <div id="inner-wrapper" class="base-content-width">\r
 116                                 <!-- InstanceBeginEditable name="main_content" -->\r
 117                                 <div id="main">\r
 118                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; ぺったんR html 実証サンプル version 0.1</div>\r
 119                                         <h2>ぺったんR html 実証サンプル version 0.1.x　2012.05.04 ～</h2>\r
 120                                         <h3>はじめに</h3>\r
 121                                         <p>html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．</p>\r
 122                                         <p>この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．</p>\r
 123                                         <p>また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．</p>\r
 124                                         <p>この文書で示された html 構造は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．</p>\r
 125                                         \r
 126                                         <h3>アップデート履歴</h3>\r
 127                                         <h4>version 0.1.1 2012.08.19</h4>\r
 128                                         <pre>\r
 129         display:         -moz-table;\r
 130         display:         -moz-table-cell;</pre>\r
 131 \r
 132                                         <p>上記 css の追記により対応ブラウザが <del>NN7.2+</del> ⇒ <ins>NN6.2+</ins> となる．</p>\r
 133                                         <p>ie5.01 ( winXP ) での正常表示を確認．</p>\r
 134                                         \r
 135                                         <h3>機能一覧</h3>\r
 136                                         <dl class="dl-table clearfix">\r
 137                                                 <dt>正常動作確認済みブラウザ</dt>\r
 138                                                 <dd>ie5.01+, NN6.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5</dd>\r
 139                                                 <dt>吹きだしの語調</dt>\r
 140                                                 <dd>通常の語調のほかに、強調、コンピュータの合成音声</dd>\r
 141                                                 <dt>吹きだし内テキストのレイアウト</dt>\r
 142                                                 <dd>センタリング<del>、右より、左より</del></dd>\r
 143                                         </dl>\r
 144                                         <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本テストでは扱わない．</p>\r
 145                                         \r
 146                                         <h3>表示サンプル</h3>\r
 147                                         <p>表示サンプルは今後充実していくこととする．</p>\r
 148                                         \r
 149                                         <div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
 150                                         \r
 151                                         <div id="html2comic">\r
 152                                                 <div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
 153                                                         <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 154                                                                 <img src="../resource_pictures/1.png"\r
 155                                                                         alt="目の血走ったペンギンが拳を握り締めている"\r
 156                                                                         title="キャラクター名:キンイチ, 絵師:yas"\r
 157                                                                         width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
 158                                                                 >\r
 159                                                                 <div class="test_pettanr-comic-balloon"\r
 160                                                                         style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
 161                                                                 >\r
 162                                                                         <img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
 163                                                                         <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
 164                                                                 </div>\r
 165                                                                 <div class="test_pettanr-comic-balloon"\r
 166                                                                         style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
 167                                                                 >\r
 168                                                                         <img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
 169                                                                         <p><strong>さて？</strong></p>\r
 170                                                                 </div>\r
 171                                                         </div>\r
 172                                                 </div>\r
 173                                         </div>\r
 174                                         \r
 175                                         <h3>画像や css に対応しない Web ブラウザでの表示</h3>\r
 176                                         <p>マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．</p>\r
 177                                         <p>テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．</p>\r
 178                                         <p>同様の着眼で代替テキストを用意する．</p>\r
 179                                         <h4>テキストブラウザでの表示イメージ</h4>\r
 180                                         <pre><samp>\r
 181 目の血走ったペンギンが拳を握り締めている\r
 182 ペンギン曰く\r
 183 ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？\r
 184 ペンギン一息ついて\r
 185 さて？\r
 186                                         </samp></pre>\r
 187                                         \r
 188                                         <h3>ブラウザ検証</h3>\r
 189                                         <h4>対応ブラウザ</h4>\r
 190                                         <h5>Windows</h5>\r
 191                                         <p>ie5.01+, NN6+, firefox3.6, Safari3.2, Iron5, opera7+, Konqueror4.8</p>\r
 192                                         <h5>Mac</h5>\r
 193                                         <h5>Linux</h5>\r
 194                                         <h4>準対応ブラウザ</h4>\r
 195                                         <h5>Windows</h5>\r
 196                                         <p>opera6( <code>overflow:hidden</code> が孫要素に対して利かず（？）要素がパネルをはみ出す )</p>\r
 197                                         <h5>Mac</h5>\r
 198                                         <h5>Linux</h5>\r
 199                                         <h4>非対応ブラウザ</h4>\r
 200                                         <h5>Windows</h5>\r
 201                                         <p><del>NN6(テキスト表示位置がずれる),</del> opera5(　日本語に非対応で文字化けする )</p>\r
 202                                         <h5>Mac</h5>\r
 203                                         <h5>Linux</h5>\r
 204                                         <h3>ソースコード</h3>\r
 205                                         <h4>html 部分</h4>\r
 206                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 207                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;p&gt; と &lt;span&gt; からなる．</p>\r
 208                                         <pre class="brush: xml;">\r
 209 &lt;div class=&quot;test_pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
 210         &lt;div class=&quot;test_pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
 211                 &lt;img src=&quot;../resource_pictures/1.png&quot;\r
 212                         alt=&quot;目の血走ったペンギンが拳を握り締めている&quot;\r
 213                         title=&quot;キャラクター名:キンイチ, 絵師:yas&quot;\r
 214                         width=&quot;166&quot; height=&quot;272&quot; style=&quot;left: 148px; top: -2px; z-index: 0;&quot;\r
 215                 &gt;\r
 216                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 217                         style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;\r
 218                 &gt;\r
 219                         &lt;img src=&quot;../system_pictures/_w5.gif&quot; alt=&quot;ペンギン曰く&quot;&gt;\r
 220                         &lt;p&gt;&lt;span&gt;ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？&lt;/span&gt;&lt;/p&gt;\r
 221                 &lt;/div&gt;\r
 222                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 223                         style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;\r
 224                 &gt;\r
 225                         &lt;img src=&quot;../system_pictures/_w19.gif&quot; alt=&quot;ペンギン一息ついて&quot;&gt;\r
 226                         &lt;p&gt;&lt;strong&gt;さて？&lt;/strong&gt;&lt;/p&gt;\r
 227                 &lt;/div&gt;\r
 228         &lt;/div&gt;\r
 229 &lt;/div&gt;\r
 230                                 </pre>\r
 231                                         <h4>css 部分</h4>\r
 232                                         <p>css2 の <code>display: table, display: table-cell</code> を使って吹き出し内のテキストの上下中央配置を行う．</p>\r
 233                                         <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
 234                                         <pre class="brush: css;">\r
 235 .test_pettanr-comic-wrapper {\r
 236         margin:                                 1em auto;\r
 237 }\r
 238         .test_pettanr-comic-panel {\r
 239                 border-style:                   solid;\r
 240                 border-color:                   #111;\r
 241                 position:                               relative;\r
 242                 margin:                                 1em 0;\r
 243                 overflow:                               hidden;\r
 244         }\r
 245                 .test_pettanr-comic-panel img {\r
 246                         position:                               absolute;\r
 247                 }\r
 248                 .test_pettanr-comic-balloon {\r
 249                         position:                               absolute;\r
 250                 }\r
 251                         .test_pettanr-comic-balloon img {\r
 252                                 width:                                  100%;\r
 253                                 height:                                 100%;                           \r
 254                         }\r
 255                         .test_pettanr-comic-balloon p {\r
 256                                 margin:                                 0 !important;\r
 257                                 padding:                                0 !important;                           \r
 258                                 display:                                table;\r
 259                                 display:                                -moz-table; /* NN6 */\r
 260                                 position:                               absolute;\r
 261                                 top:                                    0;\r
 262                                 left:                                   16.6%;\r
 263                                 width:                                  66.6%;\r
 264                                 height:                                 100%;\r
 265                                 *height:                                auto;\r
 266                                 *top:                                   50% !important;\r
 267                                 \r
 268                         }\r
 269                                 .test_pettanr-comic-balloon p span,\r
 270                                 .test_pettanr-comic-balloon p strong,\r
 271                                 .test_pettanr-comic-balloon p em,\r
 272                                 .test_pettanr-comic-balloon p i,\r
 273                                 .test_pettanr-comic-balloon p samp,\r
 274                                 .test_pettanr-comic-balloon p code {\r
 275                                         vertical-align:                 middle;\r
 276                                         text-align:                             center;\r
 277                                         font-size:                              14px; /* opera6 で使用 13px は不可 */\r
 278                                         display:                                table-cell;\r
 279                                         display:                                -moz-table-cell; /* NN6 */\r
 280                                         *display:                               block;\r
 281                                         zoom:                                   1;\r
 282                                         *position:                              relative;\r
 283                                         *top:                                   -50%;\r
 284                                 }\r
 285                                 .test_pettanr-comic-balloon p strong {\r
 286                                         font-weight:                    bold;\r
 287                                 }\r
 288                                 .test_pettanr-comic-balloon p em,\r
 289                                 .test_pettanr-comic-balloon p i {\r
 290                                         font-style:                             italic;\r
 291                                 }\r
 292                                 .test_pettanr-comic-balloon p samp,\r
 293                                 .test_pettanr-comic-balloon p code {\r
 294                                         font-family:                    monospace;\r
 295                                 }       \r
 296                                         </pre>\r
 297                                         \r
 298                                 </div>\r
 299                                 <!-- InstanceEndEditable -->\r
 300             </div>\r
 301         </div>\r
 302     </div>\r
 303     \r
 304     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 305 \r
 306         <div id="footer">\r
 307             <div id="footer-item-container" class="base-content-width clearfix">\r
 308                 <div class="footer-item-wrapper">\r
 309                     <div class="footer-item">\r
 310                         <h2>ぺったんR にようこそ</h2>\r
 311                         <ul>\r
 312                             <li>サンプル</li>\r
 313                             <li>ぺったんRの特徴</li>\r
 314                             <li>沿革</li>\r
 315                         </ul>\r
 316                         <h2>Test</h2>\r
 317                         <ul>\r
 318                             <li><a href="index.html">Test Index</a></li>\r
 319                         </ul>\r
 320                     </div>\r
 321                 </div>\r
 322                 <div class="footer-item-wrapper">\r
 323                     <div class="footer-item">\r
 324                         <h2>ドキュメント</h2>\r
 325                         <ul>\r
 326                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 327                             <li>絵師向けドキュメント</li>                                                     \r
 328                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 329                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 330                         </ul>\r
 331                     </div>\r
 332                 </div>\r
 333                 <div class="footer-item-wrapper">\r
 334                     <div class="footer-item">\r
 335                         <h2>プロトタイプ</h2>\r
 336                         <ul>\r
 337                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 338                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 339                         </ul>\r
 340                         <h2>Ajax contents</h2>\r
 341                         <ul>\r
 342                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 343                         </ul>\r
 344                     </div>\r
 345                 </div>\r
 346                 <div class="footer-item-wrapper" style="width:170px;">\r
 347                     <div class="footer-item" style="padding-right:0;">\r
 348                         <h2>ぺったんRチーム</h2>\r
 349                         <ul>\r
 350                             <li>わたしたちについて</li>\r
 351                             <li>ミッション</li>\r
 352                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 353                             <li>個人情報保護方針</li>\r
 354                             <li>作品の取り扱い</li>\r
 355                             <li>お問い合わせ</li>\r
 356                         </ul>\r
 357                     </div>\r
 358                 </div>\r
 359             </div>\r
 360             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 361         </div><!-- #EndLibraryItem -->\r
 362         </div>\r
 363         <script type="text/javascript">\r
 364                 var has_server_support = false;\r
 365         </script>\r
 366 <!-- InstanceBeginEditable name="script" -->\r
 367         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>\r
 368         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>\r
 369         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js"></script>\r
 370         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js"></script>\r
 371         <link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">\r
 372         <script type="text/javascript">\r
 373                 SyntaxHighlighter.all();\r
 374                 \r
 375                 var btn = document.getElementById( 'swbutton' );\r
 376                 var elm = document.getElementById( 'html2comic' );\r
 377                 var cls = 'show-border';\r
 378                 var val = btn.firstChild.data\r
 379                 \r
 380                 function switchBorder(){\r
 381                         var current = elm.className;\r
 382                         elm.className = cls === current ? '' : cls;\r
 383                         btn.firstChild.data = cls === current ? val: 'hide border';\r
 384                 }\r
 385         </script>\r
 386 <!-- InstanceEndEditable -->\r
 387 </body>\r
 388 <!-- InstanceEnd --></html>\r