1

How can I have the number on its separate line? I need this because I want to export the HTML to an EPUB and the screen space is limited, especially when I have four digit numbers it takes up horizontal space on the line.

All the items are English phrases with their phonetic transcription. So I have two paragraphs in each list item, one is the phrase itself and the other paragraph is the phonetic transcription.

<ol> <li> <p>Phrase</p> <p>Phonetic transcription</p> </li> <li> <p>Phrase</p> <p>Phonetic transcription</p> </li> </ol>

enter image description here

I was wondering if it would be possible to put the number in a box, like specifying the four borders on it 1px solid #000; to make it look a little bit more stylish.

I think the easier path would be to not use an ordered list but in that case I need to insert the number manually and in case a phrase or two gets deleted updating the numbers will be hell. So, in my case an unordered list would work better. Right?

I would be grateful for any help.

Improve this question

1 Answer 1

Reset to default
2

With the use of counter you don't have to insert the numbers manually, here is the code:

<ul> <li> <p>Phrase</p> <p>Phonetic transcription</p> </li> <li> <p>Phrase</p> <p>Phonetic transcription</p> </li> </ul> 
ul { counter-reset: item; list-style-type: none; } li::before { content: counter(item); counter-increment: item; border: 1px solid black; }

EDIT: Counters don't work in EPUB. You have to write numbers manually:

<ul> <li> <span class="number">1</span> <p>Phrase</p> <p>Phonetic transcription</p> </li> <li> <span class="number">2</span> <p>Phrase</p> <p>Phonetic transcription</p> </li> </ul> 
ul { list-style-type: none; } .number { border: 1px solid black; }
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

The question is if the counter is understood by ebook readers. I'll see how it works and report back. Thank you. If I create a new ul is it possible to start the counter from a specific number? I will split up my EPUB in multiple chapters but the counting will continue as left off in the previous chapter.
Also, what is the point of using counter? I mean the ol does what I need. When I meant manually I meant to use something like <div>1</div>, <div>2</div>
@ZoltanKing Yes, you can set counter to number you want with: counter-set: name number
@ZoltanKing As far as I know it's impossible to style numbers in ol so you have to use counter to add numbers and style them, you can change ul to ol if you want, it won't change anything.
Thank you. I tried something like <ul start="10"> in the second list but it doesn't work. I would like to have multiple lists but each one to continue where the previous left off. I need to split the EPUB into chapters that's why.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.