Forum How do I...?

Nested Ordered List Question

jhoweaa
I'm having some trouble getting Prince to render my ordered lists the way I would like to see them. They render fine when I look at the HTML content in a browser, but not when a PDF is produced. I have two basic problems. I'm using Prince 10.

Problem #1 - Nested List Items aren't numbering correctly

I have HTML which looks like this:

   <ol type="1">
       <li>List Item 1</li>
       <ol type="a">
             <li>Sub item a</li>
             <li>Sub item b</li>
             <li>Sub item c</li>
       </ol>
       <li>List item 2</li>
       <li>List item 3</li>
</ol>


I'm trying to get something which looks like this:

1. List Item 1
    a. Sub item a
    b. Sub item b
    c. Sub item c
2. List Item 2
3. List Item 3


Instead, Prince gives me this:

1. List item 1
b. Sub item a
c. Sub item b
d. Sub item c
5. List item 2
6. List item 3


I'm using the following CSS

    ol {
        list-style-position: inside;
        li {
            list-style-type: decimal;
            font-weight: bold;
        }
    }
    ol ol {
        counter-reset: li;
        li {
            list-style-type: lower-latin;
            font-weight: normal;
        }
    }


I've tried a couple other variations but nothing works. The code above, however will display correctly in Chrome.

My other problem has to do with the formatting of the items themselves. In Chrome, the numbers are indented from the rest of the content, and the sub-level OL is indented further. In Prince, the numbers all appear outside of the margin, and the inner OL is displayed at the same level as the outer OL. My guess is there is some style setting that the browser is using by default that I'm not using and the Prince style sheet is doing something different with the positioning.

Any pointers on how to get this to lay out correctly in both HTML and PDF would be greatly appreciated.

Thanks!

Jim
mikeday
Currently the nested <ol> needs to be inside an <li>, you can't nest lists inside other lists.
jhoweaa
If I put the inner <ol> inside of a <li> tag I end up with this

1. List item 1
2.
c. Sub item a
d. Sub item b
e. Sub item c
6. List item 2
7. List item 3


For the time being, and the fact that I only have a few of these types of lists, I think I'll just use <p> and <span> tags to create what I need. Is this something that will be fixed in a future version of Prince?

Thanks.

Jim
dauwhe
This works as expected with the default stylesheet:

<ol type="1">
       <li>List Item 1
       <ol type="a">
             <li>Sub item a</li>
             <li>Sub item b</li>
             <li>Sub item c</li>
       </ol>
       </li>
       <li>List item 2</li>
       <li>List item 3</li>
</ol>
jhoweaa
I copied over the ol/li styles from the Prince style sheet and I can get close to what I want using the html listed above (not including the sub ol inside of an li). My only problem now is that I get this:

1. List item 1
    a. Sub item a
    b. Sub item b
    c. Sub item c
4. List item 2
5. List item 3


I must be missing some style that controls the numbering better.

If you say it works, with proper numbering, then I must be overlooking some other style setting.

Jim
jhoweaa
Ok, I found what seems to be a hack, but it works. I can now do this:

<ol type="1">
   <li>List Item 1</li>
   <ol type="a">
      <li>Sub Item a</li>
      <li>Sub item b</li>
      <li>Sub item c</li>
   </ol>
   <li value="2">List Item 2</li>
   <li>List Item 3</li>
</ol>


and get this:

1. List Item 1
    a. Sub Item a
    b. Sub Item b
    c. Sub Item c
2. List item 2
3. List item 3


I was also able to get the indenting to work correctly as well. I must have had some other 'resets' of the OL and LI tags that were messing things up. Copying stuff over from the Prince xhtml.css style sheet into a place in my style sheet specific to where I was using these lists seemed to fix the problem.

Thanks!

Jim