Re: [css3-lists] Proposal: list-style-position inside-hanging

On Mon, Jun 7, 2010 at 11:31 PM, Patrick Garies <pgaries@fastmail.us> wrote:
> On 2010-06-07 11:10 AM, Brad Kemper wrote:
>>
>> Using the ::marker pseudo-element, this may be possible, once that
>> CSS3 list stuff[1] is actually implemented (AFAIK, it hasn't, but I
>> might be mistaken). For instance:
>>
>> UL { padding:3em; } LI { list-style-position: inside; } LI::marker {
>> margin-left: -3em; }
>
> I was just having this problem a week or two ago, so I'll chime in here:
>
> An issue with your method of creating a hang is that I can't see any way to
> set a hang that's (A) exactly the width of the marker *and* (B) starts
> exactly where text would normally start in a block box. Presumably, I could
> use something like...
>
> *::marker {
>        content: "✔ ";
>        display: inline-block; /* to apply margin */
>        margin-left: -100%; /* left offset: width of the marker */
>        white-space: pre; /* keep marker space */
> }
>
> However, while the above would solve (A), it does not meet the (B)
> requirement since, as far as I know, there is no way to set a left
> padding-/margin-length on an ancestor such that it's the exact width of a
> text marker.

Correct; this is only useful as an approximation.  Usable in most
cases, but not perfectly general.

I've used this sort of effect before, though without ::marker - I just
adjusted the padding on the parent so that the children's bullets
visually lined up with the text column.

~TJ

Received on Tuesday, 8 June 2010 15:53:56 UTC