とりあえず公開 。

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

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

というか、地図とアイコンをチマチマ描いていたのがもう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);
  });
});

続きを読む

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