Log in / Register

Forum › How do I...?

inline list formatting

milom
I'd like to create an "inline" list format. For example, for writing a paragraph that says

"We can (i) do something, (ii) do something else, or (iii) do nothing."

Where the HTML code would be:

<p>We can <ol class="inline"><li> do something, <li> something else, or <li> do nothing.</ol></p>


Right now I'm using the following CSS:

ol.inline {
  display: inline;
  margin-left: 0;
  counter-reset: list-item
}

ol.inline li {  display: inline; }

ol.inline li::before { 
  content: "(" counter(list-item, lower-roman) ")";
}

li { counter-increment: list-item;}


The problem is that the "ol" tag seems to create a line break even when the "display: inline" is used. I could probably hack it to use span and p tags, but I really like the idea that one could change the list back and forth.

Perhaps the problem is that you're not allowed to nest a list within a paragraph?

Any thoughts on how to accomplish such an inline list?
mikeday
Your CSS is fine, the problem is as you suspected: in HTML a paragraph can't contain a list, and the parser will actually break the paragraph when it sees the <ol> tag. Your example will work in an XML/XHTML document, but to make something that works in HTML you'll need to use an inline element like <span> I'm afraid.
milom
You say this would work in XHTML. What does it take to get the document recognized as XHTML. I think my document is close to conforming to XHTML, but probably isn't strictly conforming. Does Prince drop into some sort of HTML compatibility mode?

What can I do to ensure my document is recognized as XHTML?

The DOCTYPE I'm using is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
mikeday
The XHTML doctype should be enough, or you can add an XML declaration at the start of the file:
<?xml version="1.0"?>

Or use --input=xml on the command-line. However, your file will need to be a well-formed XML document, or Prince will complain. This means that all elements need close tags, and empty elements are written like <img/> and <br/>.

As I said earlier, nesting blocks within paragraphs is not legal in HTML, even if it works in CSS, so you might get some odd behaviour if you use this with browsers or other tools.