5

I need a clarification regarding the link creation for <ol> list in the HTML page.

Here is the example code for reference.

<ol>
<li>test</li>
<li>test</li>
</ol>

that gives this as output:

  1. test
  2. test

I need to create the links only on the numbers preceding the actual text. Is it possible?

Sekhemty
  • 6,194
  • 5
  • 34
  • 69
vkfjs
  • 71
  • 3
  • You could look into custom list-style-type hacks. Those usually require setting the content property on the li:before pseduo-element, and I'd bet a lot of ereaders don't support that. For what you are trying to do, it would probably be easier to build out your list manually with <div>s and <p>s instead of using the list element. Then the numbers would be actual text which you could wrap with an anchor tag. – blendenzo Mar 30 '17 at 05:59

2 Answers2

2

Earlier in text: 

<a name="header1">Header 1</a>

<a name="header2">Header 2</a>

further down...

<ol>
<li><a href="#header1">item one</a></li>
<li><a href="#header2">item two</a></li>
</ol>

If you're making an EPUB book, every tag must be closed, or self-closed. idiotprogrammer had the syntax right, but the example did not work (for IDPF specs).

<img src="image1.jpg" id="image0001" title="this is self-closed" />
Bulrush
  • 367
  • 1
  • 7
  • Unfortunately, your example doesn't pass epubcheck. Also you can't use name as an attribute, you'll have to use id. –  Jun 29 '16 at 21:18
0

Here's a solution which does what you need: 

<ol>
<a href="#"><li></li></a> 
<a href="#"><li></li></a>
</ol>

(I tried putting a non-breaking space there, but it underlined the space. You could probably use css to set text-decoration: none for the a element.)

If you want the links to go anywhere, you could replace "#" with an anchor URL.

Update: Ahh, I see that the content model doesn't allow A tag underneath OL. So my answer is wrong.

idiotprogrammer
  • 4,594
  • 13
  • 26
  • That's fine, fortunately, the IDPF standard will not accept the below code while validate the HTML page. – vkfjs Jun 27 '16 at 05:32
  • This is very interesting. Any idea what the validation error is? I guess you're validating against HTML 5, so it may be stricter about empty elements.or bad href references... – idiotprogrammer Jun 29 '16 at 16:46