[RbnJrg]

Originally Posted by Bigo2

How can it be fixed so that the numbers will be always in line with the related text when opened on any device ?

Thanks

What you want is quite easy to get with ordered list... under epub3 In theory, the method could work also under epub2 (at least, it will do with webkit) but it won't work with old ereaders based on RMSDK. Here is what you need to do:

1) In your .xhtml file write a normal ordered list (something like):

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</li>

    <li>Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus.</li>

    <li>Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</li>

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</li>
  </ol>

2) In your .css stylesheet write the following:

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: block;
  font-family: serif;
  margin-bottom: 0.5em;
  margin-left: 2em;
  text-align: justify;
}

li::before {
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  color: crimson;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

That's all. As you can see, numbers are with a different font-family than the text and another color and parenthesis. Here you can watch some screenshots:



Below you can check the respective epub. It could be possible to get something that also works under epub2 with old ereaders by using the property "display: inline-block" and creating two blocks (for example one block with a width of 5% for numbers and another block with a width of 90% for the text) but it's more complicated (although possible) to write that. For each paragraph you'll need something like:

<p><span class="block1">1)</span><span class="block2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</span></p>

<p><span class="block1">2)</span><span class="block2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</span></p>

and

p  {
  margin: 0 0 1em;
}

.block1 {
  display: inline-block;
  width: 5%;
  vertical-align: top;
  padding-right: 1em;
  text-align: right;
  font-family: sans-serif;
  color: crimson;
}

.block2 {
  display: inline-block;
  width: 90%;
  text-align: justify;
  font-family: serif;
}

Regards