Html outline formatting
-
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
andcounter
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?
-
Try setting theli:before
pseudo element todisplay: 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.
-
Oh, I see. The problem is the paragraph tags are display block. The number is getting inserted like
<li>(1)<p>
...
-
Maybe instead ofli::before
tryli > p:first-child::before
....No, that fucks up the numbering...
-
I hate abusing
float
but it seems like the best option here.float: left;
-
Not my proudest hack:
ol.level4 > li:before { float: left; counter-increment: list; content: "(" counter(list, decimal) ")\A0"; }
\A0
is the CSS equivalent of
-
@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.
-
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.
-
@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.
-
@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.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) ")"; }
-
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".
-
@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!
-
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
li
s (i.e., don't let my ignorance lead you down the wrong path here)?
-
@boomzilla If you're looking to have the images hang down below the text, that's quite simple
-