とりあえず公開 。

ボチボチ増やしていく予定。

そういえば 動画になっていた 。

というか、地図とアイコンをチマチマ描いていたのがもう5年前とかですか。

olだとリストマーカー周りがコントロールしづらいので。

こいつもjQueryで (JavaScriptの後半とCSSは これ と同じ)。

サンプル

$ (function () {
  $ ("ol").each (function () {
    $ ("<ul class='order'></ul>").insertAfter (this).append ($.each ($ (this).children (), function (i) {
      return $ (this).prepend ("<span class='marker'>" + (i + 1) + ".</span> ");
    }));
    $ (this).remove ();
  });
  $ ("span.marker").parent ().parent ().each (function () {
    var marker = $ (this).children ().children ("span.marker");
    var width = 0;
    marker.each (function () {
      width = Math.max (width, $ (this).css ("display", "inline").width () - parseInt ($ (this).css ("text-indent")));
    });
    var margin = (parseInt (marker.eq (0).css ("margin-right")) + width) + "px";
    $ (this).css ("margin-left", margin);
    marker.width (width).css ("margin-left", "-" + margin);
  });
});

続きを読む

要するに、heightとmarginを足したものがline-heightと同じになっていればいい。

というわけで、jQueryでいい感じに (expressionでもいいけど)。

$ (function () {
  if ($.browser.msie && $.browser.version < 7) {
    $ ("img.icon").each (function () {
      var margin = Math.max (0, (parseInt ($ (this).css ("line-height")) - $ (this).height ()) / 2);
      $ (this).css ({ marginBottom : Math.ceil (margin) + "px", marginTop : Math.floor (margin) + "px" });
    });
  }
});

img.icon {
  vertical-align: middle;
}

ほげほげほげほげほげ<img class="icon" ... />

あるいは突き出しインデント。

「注1) ～」に合わせてtext-indentを決め打ちしたはいいが「注10) ～」で破綻したり、「注10) ～」に合わせてmargin-leftやwidthを決め打ちしたはいいが「※ ～」のときスカスカ、なんていうのはみっともない。

というわけで、jQueryでいい感じに。

サンプル

$ (function () {
  $ ("span.marker").parent ().parent ().each (function () {
    var marker = $ (this).children ().children ("span.marker");
    var width = 0;
    marker.each (function () {
      width = Math.max (width, $ (this).css ("display", "inline").width () - parseInt ($ (this).css ("text-indent")));
    });
    var margin = (parseInt (marker.eq (0).css ("margin-right")) + width) + "px";
    $ (this).css ("margin-left", margin);
    marker.width (width).css ("margin-left", "-" + margin);
  });
});

続きを読む

暇つぶしにまたやってみる。