Hi,

How can I set up CSS to create a hierarchial list in the same way that Word does? This means that:

- Outer elements are numbered with digits, inner elements with lower case roman.
- The whole paragraph is indented based on its list level, but the counters appear inside the indent.

Start with nested ol/li elements:

<ol>
  <li><p>Paragraph!</p></li>
  <li>
    <ol>
      <li><p>Paragraph!</p></li>
      <li><p>Paragraph!</p></li>
    </ol>
  </li>
  <li><p>Paragraph!</p></li>
</ol>

Add some CSS styling for nested lists:

ol ol { list-style-type: lower-roman }

Is that getting close?

Hi,

Sorry, I should have clarified that I meant in XML.

Currently I have..

@page {
    size: A4 portrait;
    margin: 0.98in;   
    
    @top-left {
        content: "Camel";
        font: normal normal normal 12pt arial;
    }
}


exam {
   display: block;
   font: normal normal normal 12pt Arial;
   text-align: justify;
   line-height: 150%;
}

p {
    display: block;
}

question {
    display: list-item;
    list-style-type: decimal;
}

part {
    display: list-item;
    list-style-type: lower-roman;
}

The problem with this is that questions are not indented at all and parts are treated as part of the same list level (in other words, a question with two parts has the numbering go 1, ii, iii, all at the same level, rather than 1, i, ii).

Also when viewed in PDF the text appears to come out in bold Arial, thus the "normal normal normal" specifiers to see if I could prevent that.

("Camel" is placeholder text of course but I wasn't sure how to fetch a value from the document to include in the content attribute in XML..)

Edited 14 Oct 2013 by hyphz

You can indent with margin-left or padding-left. This is how HTML lists are indented.

How is the markup nested?

Which operating system are you running on? The font should not turn bold unless explicitly requested.

Hi,

Margin-left and padding-left do create margins as appropriate, but they don't seem to create the situation there is in word where the numbering floats inside the margin and the main text has a straight right edge. Also the numbering does not reset.

The markup nesting is quite simple: exam holds question+, question holds part+.

The operating system is Windows. However I checked within Acrobat and the font is not actually set bold, it just looks bolder than Arial usually does in Office!

I'm really sorry to bump but does anyone know anything further about this? It's causing some problems on a project. Is there really no way in XML to make a nested list or to make an equivalent to the ol tag?

Sorry for leaving you waiting! To get the same behaviour as ol you will need to reset the list-item counter on the outer scope. For example, you might want something like this:

exam { counter-reset: list-item }
question { counter-reset: list-item }

Then you can use the counters() function to access multiple scoped list-item counters, eg. 1.1, 1.2, and so on.

However, it might be simpler if you define two counters, one for questions and one for parts, like this:

exam { counter-reset: question }

question {
    counter-increment: question;
    counter-reset: part
}

question::before { content: "Question " counter(question) }

part { counter-increment: part }

part::before { content: "Part " counter(part) }