CSS - "hanging indent" attempts

[Jason Harrop <jharrop@speedlegal.com>]

Hi

Please find attached various attempts to get hanging indents to work 
using CSS2 stuff.

Apparently, example 3 works in Internet Explorer (6?), though I don't 
have IE running on this computer.

None of them work well enough in Mozilla 1.2.1 to amount to a 
presentable "presentation format", although some of them come close.

cheers,

Jason
P
    {margin-left:10pt;    
    margin-top:10pt;
    margin-bottom:10pt;
    display:block;}

ListItem
    {margin-left:80pt;       
    display:block;}
    

body1:before
{ content: attr(number) "     ";
    white-space: pre;
    margin-left:-40pt;               
    display:marker;
    marker-offset: 140pt;
    width: 50pt;}

body1
    {margin-left:80pt;       
    display:block;}

Number
    {margin-left:-40pt;                   
    display:inline;}

body2
    {margin-left:40pt;       
    display:inline;}

ListItem3
    {margin-left:80pt;
     text-indent:-40pt;
    display:block;}
    
Number3
    {display:inline;}

body3
    {margin-left:40pt;
    display:inline;}
    
Number4
    {width: 20pt;
    display:compact;}

body4
    {margin-left: 80 pt;
    display:block;}
    
Number5
    {width: 20pt;
    float: left;}

body5
    {margin-left: 120 pt;
    display:block;}

ListItem6
    {position: relative;      
    display:block;}

    
Number6
    {    position: absolute; 
    top: 0pt; left: 10pt; 
    width: 100pt; }

body6
    {position: absolute; 
    top: 0pt; left: 100pt; 
}
    
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href='list_test.css'?>
<Examples>
<P>This document contains examples of trying to get 'hanging-indents' right.  </P>

    <Example>
        <P>Example 1: Using before pseudo-element, and content.  The content comes from the number attribute. Marker can get the text from @number; but in Mozilla, it doesn't seem to matter whether display:inline or display:marker (marker-offset doesn't work). Remember to use white-space:pre and then laboriously insert enough space.  </P>
        <List>
            <ListItem>
                <!--Number>1</Number-->
                <body1 number="1.4">  Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body1>
            </ListItem>
            <ListItem>
                <!--Number>1</Number-->
                <body1 number="1.9">Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body1>
            </ListItem>
        </List>
    </Example>
    <Example>
        <P>Example 2: Using 2 inline elements, margin-left with a negative value on the first,
        and a positive value on the second.  Almost works in Mozilla. But how to get the spacing correct?</P>
        <List>
            <ListItem>
                <Number>1</Number>
                <body2>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body2>
            </ListItem>
            <ListItem>
                <Number>2</Number>
                <body2>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body2>
            </ListItem>
        </List>
    </Example>
    <Example>
        <P>Example 3: On containing block, use text-indent with a negative value  and margin-left with a positive value.  Almost works in Mozilla. But how to get the spacing correct?</P>
        <List>
            <ListItem3>
                <Number3>1</Number3>
                <body3>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body3>
            </ListItem3>
            <ListItem3>
                <Number3>2</Number3>
                <body3>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body3>
            </ListItem3>
        </List>
    </Example>
    <Example>
        <P>Example 4: Using display: compact.  Should all appear on a single line, but it doesn't.</P>
        <List>
            <ListItem>
                <Number4>1</Number4>
                <body4>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body4>
            </ListItem>
            <ListItem>
                <Number4>2</Number4>
                <body4>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body4>
            </ListItem>
        </List>
    </Example>
    <Example>
        <P>Example 5: float.  No joy.</P>
        <List>
            <ListItem>
                <Number5>1</Number5>
                <body5>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body5>
            </ListItem>
            <ListItem>
                <Number5>2</Number5>
                <body5>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body5>
            </ListItem>
        </List>
    </Example>
    <Example>
        <P>Example 6: Absolute positioning. Some potential, but buggy, since list items overwrite one another.</P>
        <List>
            <ListItem6>
                <Number6>1</Number6>
                <body6>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body6>
            </ListItem6>
            <ListItem6>
                <Number6>2</Number6>
                <body6>Here is the text. Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.Here is the text.</body6>
            </ListItem6>
        </List>
    </Example>
        
</Examples>