開発日記

XSS/バグ修正 -- ぱんだ

リストの位置あわせをclass指定で -- ぱんだ

見てくれはcssに任せるためにその1。

例を交えて書いているので、読みにくいのはご容赦ください。

classにスペースで区切って複数のクラスを指定する書き方は、WindowsのIE6/NN7でしか試していません。他のブラウザでうまくいくかどうか知らないんですが。

現状、default.ini.phpなどで以下のような設定をして、

/////////////////////////////////////////////////
// リスト構造の左マージン
$_ul_left_margin = 0;   // リストと画面左端との間隔(px)
$_ul_margin = 16;       // リストの階層間の間隔(px)
$_ol_left_margin = 0;   // リストと画面左端との間隔(px)
$_ol_margin = 16;       // リストの階層間の間隔(px)
$_dl_left_margin = 0;   // リストと画面左端との間隔(px)
$_dl_margin = 16;        // リストの階層間の間隔(px)
$_list_pad_str = ' class="list%d" style="padding-left:%dpx;margin-left:%dpx"';

以下のような記述があったときに

---3
-1
---3
--2
---3

リストマークをレベルに一致させたり、マージンを合わせるために、

  • 3
  • 1
    • 3
    • 2
      • 3

このようなタグを吐く仕掛けをしてあるんですが、

<ul class="list3" style="padding-left:48px;margin-left:48px">
 <li>3</li>
</ul>
<ul class="list1" style="padding-left:16px;margin-left:16px">
 <li>1
  <ul class="list3" style="padding-left:32px;margin-left:32px">
   <li>3</li>
  </ul>
  <ul class="list2" style="padding-left:16px;margin-left:16px">
   <li>2
    <ul class="list3" style="padding-left:16px;margin-left:16px">
     <li>3</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

これを廃止して、cssに以下のような記述を追加して

ul,ol,dl { margin-left:1em; padding-left:1em; }
dd { margin-left:1em; padding-left:1em; }
/*li,dt { margin-left:0px; padding-left:0px; } */
blockquote { margin-left:1em; padding-left:1em; }

.skip1 { margin-left:2em; padding-left:2em; }
.skip2 { margin-left:3em; padding-left:3em; }

ul.list1 { list-style-type:disc; }
ul.list2 { list-style-type:circle; }
ul.list3 { list-style-type:square; }
ol.list1 { list-style-type:decimal; }
ol.list2 { list-style-type:lower-roman; }
ol.list3 { list-style-type:lower-alpha; }

以下のようなタグを吐くように変更したいんですが、

<ul class="list3 skip2">
 <li>3</li>
</ul>
<ul class="list1">
 <li>1
  <ul class="list3 skip1">
   <li>3</li>
  </ul>
  <ul class="list2">
   <li>2
    <ul class="list3">
     <li>3</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

何か問題ありますか?

たとえば、BugTrack/261での要望のように、レベルが飛んだときのマージンが不要なときは、ls2.inc.phpで以下のようなタグを吐くようにしておいて、

<div class="ls2">
 <ul class="list3 skip2">
  <li>3</li>
 </ul>
 <ul class="list2 skip1">
  <li>3</li>
 </ul>
</div>

cssに以下の定義をすればOKかなと。

div.ls2 ul.skip1 { margin-left:1em; padding-left:1em; }
div.ls2 ul.skip2 { margin-left:1em; padding-left:1em; }
  • これは以前からそうなんですが、ul、olに対するmarginとliに対するmargin、dlに対するmarginとdt及びdlに対するmarginを混同しているのでは? ul、ol、dlに対する左マージンだけを調整しても、liの左マージンを考慮していないと、期待した通りの出力にはなりません(とくにdlの場合は)。具体的には、$_ul_left_marginや$_ul_marginなどの値を異なる数値にしたり、ulとol、dlの混在やblockquote内でのul、ol、dlなど、いろいろ試してみればわかります。 -- reimy 2003-03-29 (土) 16:52:24
    • そのため、うちではさまざまな組み合わせに対応するように、cssファイル(filedefault.css)の中で定義して多少回避しています(サンプル)。まだ完全には回避し切れていませんが。 -- reimy 2003-03-29 (土) 16:56:18
    • うう…よくわかっていません。 さまざまな組み合わせとはいったい… XD -- ぱんだ 2003-03-29 (土) 17:05:45
      • 上のサンプルを見てもらえばわかるように、blockquote内でのリスト構造の表示をblockquote外でのリスト構造と同じmargin(+blockquoteのmargin)で表示されています。このようにするためには添付したcssファイルのように、調整してやらないとうまく表示されません。 -- reimy 2003-03-29 (土) 17:07:53
      • dlのネストについても同様です。たまたまdefault.ini.phpのデフォルト値で$_dl_left_marginや$_dl_marginに同じ値が設定されているため気付きにくいですが、異なる値を設定したときに、明らかにおかしいことに気付くと思います。-- reimy 2003-03-29 (土) 17:15:00
  • :test?に同じものを書いてみました。 んーむ。 -- ぱんだ 2003-03-29 (土) 17:15:32
    • dl(dt)の左マージンがblockquote内とblockquote外で異なってしまってますよね。 -- reimy 2003-03-29 (土) 17:42:31
      • $_dl_left_marginや$_dl_marginに異なる値を設定するとさらに問題が拡大します。 -- reimy 2003-03-29 (土) 17:51:03
  • ちょっと試してきました。(filetest.html *1 ) 機械的に合わせるとしたら、こんな感じでどうでしょう。 -- ぱんだ 2003-03-29 (土) 20:44:34

    ul,ol,dl,dd,blockquoteでmargin-left + padding-leftの合計値を常に一致させておけば、うまくいくような気がします。

    liやdtのマージン/パディングはデフォルトのまま0pxとしています。

    ul,ol,dl { margin-left:1em; padding-left:1em; }
    dd { margin-left:1em; padding-left:1em; }
    /*li,dt { margin-left:0px; padding-left:0px; } */
    blockquote { margin-left:1em; padding-left:1em; }
    たとえば、blockquoteの枠はもう少し狭くしたい、というのであれば
    blockquote { margin-left:1.5em; padding-left:0.5em }
    としてみたり。

    そして、レベルが飛んだときのマージン調整用に、マージン/パディングが2倍、3倍のクラス

    .skip1 { margin-left:2em; padding-left:2em; }
    .skip2 { margin-left:3em; padding-left:3em; }
    があればいいのではないかと。
    • ことはそれほど単純にはいかなくって、blockquote内でのリスト出力には$_ul_left_marginを出力してしまうと左マージンが大きくなりすぎるのです。-- reimy 2003-03-29 (土) 21:46:09
    • あぁ…第1レベルにだけmargin-leftを少し上乗せする、というような記述は簡単にはできなくなりますね。それこそ組み合わせすべてをcssに列挙するか…どうしよう。 -- ぱんだ 2003-03-29 (土) 22:09:37
  • 表示位置に拘らない人は、cssから上記margin-left/padding-leftや.skip?の記述をばっさり切ってしまえばOK :) 少なくとも、ソース(.php)をいじる必要はなくなるはずです。 -- ぱんだ 2003-03-29 (土) 21:13:17
  • :config/plugin/attach/mime-type にhtmlが設定されていないのでdownloadになってしまうようです(IEを除く)。 -- reimy 2003-03-29 (土) 21:41:16
    • text/htmlにしました。 -- ぱんだ 2003-03-29 (土) 22:10:10
    • 違うdefault.cssをアップしてた(^^;; 添付し直しました。これで正しく表示されるはずです。filedefault.css -- reimy 2003-03-29 (土) 22:22:03
  • たとえば、pukiwiki.skin.ja.phpで$bodyを出力しているところを
    - <div><?php echo $body ?></div>
    + <div id="body"><?php echo $body ?></div>
    として、cssに
     div#body > ul { margin-left:3em; padding-left:3em; }
     div#body > ol { margin-left:3em; padding-left:3em; }
     div#body > dl { margin-left:3em; padding-left:3em; }
     div#body > blockquote { margin-left:3em; padding-left:3em; }
    と書くのは反則ですか? -- ぱんだ 2003-03-29 (土) 23:12:48
    • ありゃ。IEではこれ効かないのか… -- ぱんだ 2003-03-29 (土) 23:32:30
      • そういうこと。サポートしているブラウザは一部だけ。しかも、必ずしも期待通りにならないという… -- reimy 2003-03-29 (土) 23:43:58
      • 厳しいっすね… -- ぱんだ 2003-03-29 (土) 23:45:36
    • 結局、添付したdefault.cssのようにいろんな組み合わせに対するmarginを設定するしかなさそうです。 -- reimy 2003-03-29 (土) 23:55:18
  • a > b { } の形のセレクタが主要なブラウザでサポートされるまでの間、convert_html()でトップレベルのリスト要素を囲む<div class="toplevel"></div>を吐くようにする、ってのは…だめっすか。 -- ぱんだ 2003-03-30 (日) 01:04:42
    .toplevel { margin-left: 2em; } 
    
    <div class="toplevel">     <--
     <ul class="list3 skip2">
      <li>3</li>
     </ul>
     <ul class="list1">
      <li>1
       <ul class="list3 skip1">
        <li>3</li>
       </ul>
       <ul class="list2">
        <li>2
         <ul class="list3">
          <li>3</li>
         </ul>
        </li>
       </ul>
      </li>
     </ul>
    </div>                     <--
  • 複数のclass指定ですが、IE5.5及びIE6は不完全にしか対応していません。classセレクタに合致しないというバグがあります。 -- reimy 2003-03-30 (日) 02:23:07
    • これまでにもclassセレクタをcssファイルの中で使用している人は多いと思うので、複数のclass指定を認めると、IEとMozilla/Netscapeなど両方で同じように表示されるようにするためには、大幅な書き換え(場合によっては書き換え不能になる場合も?)が必要になります。 -- reimy 2003-03-30 (日) 02:49:54
    • なお、複数のclass指定に対応しているのはWindows版IEの場合、IE5からです。Mac版は…いつからだろう? -- reimy 2003-03-30 (日) 02:32:54
  • class="toplevel"ですが、$_ul_left_marginの値ということでしょうか? ul、olのときとdlのときで、その値が同じだと困ります。 -- reimy 2003-03-30 (日) 02:37:50
    • class="ultoplevel"、class="oltoplevel"、class="dltoplevel"というようにそれぞれ分離してるのならいいですが。そのかわり繁雑になるので、あまりclass化の意味がないかも。 -- reimy 2003-03-30 (日) 02:41:24
  • とりあえず今後の課題ということで保留します。 XD -- ぱんだ 2003-04-01 (火) 17:35:11
  • BugTrack2/126 -- 2005-11-26 (土) 19:08:56
  • BugTrack2/188 -- 2008-01-10 (木) 20:03:54

*1 微妙~に頭がずれて見えるのは、borderの1pxのせいです。

添付ファイル: filedefault.css 626件 [詳細] filetest.html 700件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-06-15 (日) 06:35:58
Site admin: PukiWiki Development Team

PukiWiki 1.5.2+ © 2001-2019 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u7. HTML convert time: 0.412 sec.

OSDN