注釈リストとかのハンギングインデントをいい感じに
あるいは突き出しインデント。
「注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); }); });
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
こんにちは、上山根 祐輔 (かみやまね ゆうすけ) です。東京を拠点に活動しているフリーランスのデザイナー、デベロッパー、あと何でも屋です。
というか、Fugue Icons の作者、と言ったら分かりやすいかも。