Html outline formatting

boomzilla

This one is for me. Swear.

We generate a PDF document by creating html and then using a conversion program. Part of the document is an outline, so basically a bunch of nested <ol>s. The requirement is to follow MS Word numbering styles, so:

Upper roman. I.
Upper alpha. A.
Decimal. 1.
lower alpha. a.
(Decimal). (1)
(lower alpha) (a)
(lower roman) (i)
(decimal) (i)

I figured out how to use the ::before and counter stuff in CSS, so the numbering formatting works. The numbering is set to be "outside" the <li>, so the content should effectively be indented from the number, but starting on the same line.

This works fine for the levels that don't have parentheses because I didn't have to use the counter stuff there. But when I need to have the parentheses the numbering is effectively "inside" the <li>

https://jsfiddle.net/aq5pL0z2/

Code...

<style>
    ol.level0 {list-style-type: upper-roman;}
    ol.level1 {list-style-type: upper-alpha;}
    ol.level2 {list-style-type: decimal;}
    ol.level3 {list-style-type: lower-alpha;}
    ol.level4, ol.level5, ol.level6, ol.level7, ol.level8 {
        counter-reset: list;
        list-style: none;
        list-style-position: outside;
    }

    ol.level4 > li:before {
        counter-increment: list;
        content: "(" counter(list, decimal) ")";
    }

    ol.level5 > li:before {
        counter-increment: list;
        content: "(" counter(list, lower-alpha ) ")";
    }
    ol.level6 > li:before {
        counter-increment: list;
        content: "(" counter(list, lower-roman ) ")";
    }
    ol.level7 > li:before {
        counter-increment: list;
        content: "(" counter(list, decimal ) ")";
    }
</style>

<ol class="level0">
    <li><p>Level 0 - Upper Roman.</p></li>
    <ol class="level1">
        <li><p>Level 1 - Upper Alpha.</p></li>
        <ol class="level2">
            <li><p>Level 2 - Decimal.</p></li>
            <ol class="level3">
                <li><p>Level 3 - lower alpha.</p></li>
                <ol class="level4">
                    <li><p>Level 4 - (decimal)</p></li>
                    <ol class="level5">
                        <li><p>Level 5 - (lower alpha)</p></li>
                        <ol class="level6">
                            <li><p>Level 6 - (lower roman)</p></li>
                            <ol class="level7">
                                <li><p>Level 7 - (decimal)</p></li>
                            </ol>
                        </ol>
                    </ol>
                </ol>
            </ol>
        </ol>
    </ol>
</ol>

And this is what it looks like:

You can see that Level 4 down isn't right. Is there a way to fix that?

error

~~Try setting the li:before pseudo element to display: inline-block? If it's display block it will take its own line.~~

Edit: just noticed your fiddle. I'll try to make a reproducible solution.

error

Oh, I see. The problem is the paragraph tags are display block. The number is getting inserted like <li>(1)<p>...

error

~~Maybe instead of li::before try li > p:first-child::before....~~

No, that fucks up the numbering...

error

I hate abusing float but it seems like the best option here. float: left;

error

Not my proudest hack:

    ol.level4 > li:before {
        float: left;
        counter-increment: list;
        content: "(" counter(list, decimal) ")\A0";
    }

\A0 is the CSS equivalent of  

boomzilla

@error I will try that. Based on a stack overflow answer, I tried this:

ol.level4 {
counter-reset: list;
margin: 0;
}

ol.level4 > li {
list-style: none;
position: relative;
}
ol.level4 > li:before {
counter-increment: list;
content: "(" counter(list, decimal) ")";
position: absolute;
left: -1.5em;
}

It seems to work when I look at the html in chrome and FF but apparently the PDF generator (Prince) doesn't care about that.

hungrier

Apparently, there's also a ::marker pseudo-element that you could try, although based on the fact I've never heard of it before, I think it's likely that it won't be compatible.

https://codepen.io/rachelandrew/pen/PoqPdRb

error

@hungrier said in Html outline formatting:

it's likely that it won't be compatible

Uh, yeah. That's why I posted a seemingly inferior solution. Of course.

boomzilla

@hungrier said in Html outline formatting:

Apparently, there's also a ::marker pseudo-element that you could try, although based on the fact I've never heard of it before, I think it's likely that it won't be compatible.

https://codepen.io/rachelandrew/pen/PoqPdRb

That was what I needed. Altogether, to get the counters to work correctly:

ol.level4 {counter-reset: list; }

ol.level4 > li {
    list-style-position: outside;
    counter-increment: list 1;
}
ol.level4 > li::marker { content: "(" counter(list, decimal) ")"; }

error

I think I fell for the "try to make the OP's kludgy solution work" trap rather than "look at the OP's problem and find an appropriate solution".

Pounding A Nail: Old Shoe or Glass Bottle?

dkf

@error said in Html outline formatting:

I think I fell for the "try to make the OP's kludgy solution work" trap

Ah, webdev. Aww, bless you!

boomzilla

New twist! How to adjust the vertical alignment of the markers? The issue is that they normally display at the top. Unless there's an image, and then it shows down at the bottom, because I guess that's the baseline for the first line.

https://jsfiddle.net/gwpz98q3/1/

Maybe I need to style the images, not the markers or the lis (i.e., don't let my ignorance lead you down the wrong path here)?

hungrier

@boomzilla If you're looking to have the images hang down below the text, that's quite simple

JBert

@hungrier said in Html outline formatting:

quite simple

This is CSS we're talking about here.

uncompletable_jigsaw_ring_tumblr_nichebOfDK1qb5gkjo1_400.gif