Search code examples
htmlcssepub

styled lettered lists in epub


In an epub, I would like to style a single lettered list in this manner:

(a) Some text goes here.
(b) More text here.
(c) This line is longer. It goes on and on. And on some more. And then it
    keeps going until it wraps.
(d) Another long line. This one will wrap too, once it gets to be long
    enough. You get the idea. The text should always line up while the
    list letters hang.

The following code will do what I want on a per-list basis:

ol.alpha_list { 
  counter-reset: item;

}

ol.alpha_list > li {
    list-style: none;
    position: relative;
}

ol.alpha_list li:before {
  counter-increment: item;
  content:"(" counter(item, lower-alpha) ") ";
  position: absolute;
  left: -1.4em;
}

But this doesn't render correctly in my epub file. It comes out like this:

(a) Some text goes here.
(b) More text here.
(c) This line is longer. It goes on and on. And on some more. And then it
keeps going until it wraps.
(d) Another long line. This one will wrap too, once it gets to be long
enough. You get the idea. The text should always line up while the
list letters hang.

Is there any way to make it work like the first example?


Solution

  • try adding "list-style-position: outside;" and "margin-left: 2em;" in the li css.

    ol.alpha_list { 
      counter-reset: item;
    
    }
    
    ol.alpha_list > li {
        list-style: none;
        position: relative;
        list-style-position: outside;
        margin-left: 2em;
    }
    
    ol.alpha_list li:before {
      counter-increment: item;
      content:"(" counter(item, lower-alpha) ") ";
      position: absolute;
      left: -1.4em;
    }