HtmlAndCss2 - ぺったんR Wiki - ぺったんR

Html + css2.1

ぺったんR は、html4.01 + css2.1 をサポートするブラウザで作者の意図したとおりのコンテンツの表示を目指す．
しかしこれは最低限の環境であるため、必ずしも、ぺったんR が用意するすべての機能の恩恵を享けられるわけではない．

テストページ・資料ページ等

• ぺったんR html 実証サンプル version 0.1 http://pettanr.sourceforge.jp/test/html2comic_0.1.html
• html から コミックへ、html構造について http://sourceforge.jp/forum/forum.php?thread_id=32085&forum_id=27899

  html とうまく付き合って コミックっぽい表現を行う．それが ぺったん 及び ぺったんR の肝なわけです．[[BR]]
  それが可能なことはすでに ぺったん が実証していますが、より高い表現力、よりよい html 構造、アクセサビリティ、プログレッシブ・エンハンスト（≒クロスブラウザ）を目指してもう一度練り直してみます．
  

• マンガ状コンテンツを表示するための html + css の調査 http://pettanr.sourceforge.jp/test/comic-html-structure.html
• 上下中央配置テスト http://pettanr.sourceforge.jp/test/vertical-center.html
• Webブラウザのバージョンアップ年表も参考に StudyOfWebBrowser

マンガの表示に使用する css プロパティ

• overflow:hidden
  • コマの外にはみ出してしまう部分を隠す．コマの枠となる div に指定．
  • http://www5e.biglobe.ne.jp/~access_r/hp/css/css_look_001.html
• position:absolute & relative, left, top
  • コミック要素（画像や吹きだし）の配置に使用．
  • http://www5e.biglobe.ne.jp/~access_r/hp/css/css_property.html#position
• z-index
  • html要素の順を無視して、コミック要素の重ね順を変更するときに使用．
  • html要素は意味順（時系列順）に並ぶが、コミックでは演出によって、最後に起こったことが奥に行くことも手前に来ることもある．
  • http://www5e.biglobe.ne.jp/~access_r/hp/css/css_position_003.html
• display:table, display:teble-cell
  • 吹きだし内テキストの上下中央配置に使用を考えたが、、、ぺったんでは、table 要素を使用していた．
  • http://www5e.biglobe.ne.jp/~access_r/hp/css/css_look_003.html
  • 下記サポート状況をみると、table がいいのかも．

対応ブラウザ

プロパティ	ie	NN	firefox	khtml	safari	chrome	opera
overflow:hidden	5+	6+	1+		?	1+	6+ 7+
position:absolute, top, left	position&top:4+, left:5+	4+	1+		?	1+	6+
z-index	4+	4+	1+		4+	1+	6+
display:table,table-cell	8+	6+ 7+	2+		2+	1+	9+ 6+

ie のみ table でレイアウトする場合のメモ

ie7 以下については、条件付コメントで、tableタグを使用．

html中

<!--[if lte IE 7]><a href="#"><table><tr><td><![endif]-->
 <span>Hello</span>
<!--[if lte IE 7]></td></tr></table></a><![endif]-->

xsl中で使うと

<xsl:comment><![CDATA[[if lte IE 7]><table><tr><td><![endif]]]></xsl:comment>
　<span><xsl:apply-templates/></span>
<xsl:comment><![CDATA[[if lte IE 7]></td></tr></table><![endif]]]></xsl:comment>

firefox3.5 について、display:table 周りのバグが報告されている

Project IE: Firefox 3.5 の display: table;(table-row; table-cell;) 関連の挙動について
http://ie-style.blogspot.com/2009/08/firefox-35-display-tabletable-row-table.html
CSSで display: table-cell; を指定してマルチカラムレイアウトを行っている場合に Firefox 3.5 だとまれにカラム落ちしてしまうという現象が起きてしまいます。

記事によると、display:table-cell に対して、display:table でなく、display:table-row を使っておくのがいいそうだ．

標準モードと後方互換モード

script によって 外部に張り出された ぺったんR コンテンツは、その Webページ のレンダリングモードに左右されない タグ & css でなくてはならない． （ または動的に iframe を作ってその中に コミック html を書いていく手もある．親ページの css の影響を排除できるのでこちらの方が確実で手間も少ないかも ） IEでは後方互換モードの場合、BOXモデルがおかしい というバグがある．これは、一つの要素に対して width と padding, border を同時に指定しない ことで回避できる． この他に、レンダリングモードによる差異にはどんなものがあるのか？？要調査．

css の名前空間

script によって 外部に張り出された ぺったんR コンテンツは、その Webページの css が干渉するとまずい．（上記 iframe を使う場合はこの限りではない） そこで css に（疑似的な？）名前空間を設定する．class の頭に pettanr- を付ける．こんな感じ．

.pettanr-panel {}

zoom 機能

js が有効な場合、ぺったんR コンテンツは リサイズが可能になる． これにより、script によって張り出された作品は、その表示カラムに合わせて自身を縮小できる．

また、Lightbox のような オーバーレイによる拡大表示も可能となる．

ただし、ライセンス no-resize な画像が含まれている場合、この機能は働かない．

また 背景画像に対しては zoom が行えないので （css3 では可能、または imgタグを使って敷き詰める、、、）要考慮．

Position:relative と z-index で発生する ie7 以下のバグ．

ぺったんR のコマには、Position:relative が指定されるが、この指定と絡んで起こる ie のバグがある．

ぺったんR ではこのようなバグの対処法についてサイト運営者に対して周知を行う．

IE7 でposition: absolute な要素に対する z-index が正しく理解してもらえない http://d.hatena.ne.jp/tnksaigon/20110216/1297836776

HTML構造を決めるための留意事項

実際にどのような HTML 構造で コマ内部を表示していくか？実はまだ確定はしていない．HTML 構造は一度確定してしまうとあとからの修正が難しいからだ．

• HTML 文書として（あんまり）無理のないこと．
  • 適切なタグが選ばれている．
  • CSS の適用が容易．
• 多くのブラウザで（概ね）意図したとおりに表示でき、将来にわたって保障されそうなこと．
  • 対応ブラウザの確定も行う．
• タグ構造が簡潔であることが望ましい．
  • ただしクロスブラウザのために犠牲になると思われる．

サポートブラウザのランク分け

• rank 1: ぺったんR仕様のマンガ状コンテンツが表示できる．
• rank 2: ぺったんR のサイトが崩れることなく表示できる．
• rank 3: ぺったんR のログインユーザーコンソールが崩れることなく利用できる．
• 推奨ブラウザ
  • 以上を満たした上で、ベクター画像を表示できる．
  • 以上を満たした上で、反転画像をクライアント側で用意できる．
• サポート外ブラウザ
  • html4 + css2 （正確にはこの内の実際にぺったんR のコンテンツ表示に使用する部分）を未サポートまたは実装が不十分で rank 1 を達成できない．

サポートブラウザを考えるにあたって

ヨーロッパでは、まだ windows 98 のシェアが少なからざるものがある、と小耳に挟んだことがある． 実家にはじめて DOS/V が来たのも Win98 機だった．当時はインターネット元年なんて言われていて、うちもそそくさと買ってISBNを引いた．そのころのものがまだ現役で、リビングに鎮座しているのだろうか？

ヨーロッパは、日本と同程度の月収の国から、数万円というところまで様々だ．Win98 を買ってずっとそのまま、ということだって月収数万、という点だけでも十分想像はできる．

それ以前に、家電に対する考えもずいぶん違うもものの気がしている．実家にはいつの間にか巨大な薄型テレビが鎮座していたが、まだ映るテレビを廃棄してコンスタンスに廉価になった最新機種に買い換える様、そういう生活スタイルは、多分特異だ．

Opera にこだわったのは、古いPCにもやさしい（らしい）からで、IE6にこだわるのは、隣の中国・韓国でシェアが多いからだ．