Post

注釈リストとかのハンギングインデントをいい感じに

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

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

というわけで、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);
  });
});

ul.note {
  margin-left: 0;
  padding-left: 0;
}
ul.note li {
  list-style: none;
}
ul.note li span.marker {
  display: block;
  float: left;
  margin-right: 5px;
  text-align: right;
  _text-indent: -3px;
  white-space: nowrap;
}
<ul class="note">
  <li><span class="marker">※</span>ほげほげほげほげほげ...</li>
  <li><span class="marker">※</span>ほげほげほげほげほげ...</li>
</ul>
<ul class="note">
  <li><span class="marker">注1)</span>ほげほげほげほげほげ...</li>
  <li><span class="marker">注10)</span>ほげほげほげほげほげ...</li>
</ul>
<ul class="note">
  <li><span class="marker">*</span>ほげほげほげほげほげ...</li>
  <li><span class="marker">*</span>ほげほげほげほげほげ...</li>
</ul>
<ul class="note">
  <li><span class="marker">[1]</span>ほげほげほげほげほげ...</li>
  <li><span class="marker">[10]</span>ほげほげほげほげほげ...</li>
</ul>

2008/05/14 22:20 | code

Categories

Archives

About

こんにちは、上山根 祐輔 (かみやまね ゆうすけ) です。東京を拠点に活動しているフリーランスのデザイナー、デベロッパー、あと何でも屋です。

というか、Fugue Icons の作者、と言ったら分かりやすいかも。