Does anyone here know if the CSS property display: none is supported by all ereaders?

Let me explain why I'm asking...

I'm turning a 500-page book that's in the public domain into an ebook. The index is 40 pages of fine print. Now that I've finished typing it up, the hard work begins - linking all those entries, all of which are linked to page numbers in the original book.

Then I figured out a way to automate it to some extent. I simply find the place in my text where page 33 begins in the original book and change the following...

<p>California was the first...

to this...

<p><span class="PageNumber">33</span>California was the first...

I can then give class a PageNumber a style that makes it really stand out, so I can see where all the original pages begin and end.

When I'm finished with my index, I can then change the style to display: none. The page numbers will still be there, serving as anchors, but readers won't see anything at all.

I know that more advanced CSS isn't supported by all ereaders, but I think display: none is an older, more established style. I just wondered if this strategy could create problems.

  • I can't answer this for all devices, but with epub files on my Kobo Glo "display:none" works as expected; anyway, why do you need page numbers in an ebook, that basically don't have "pages"? And why do you need an index when ebooks are searchable? – Sekhemty Mar 4 '17 at 14:44
  • Good questions. I seriously considered ditching the index for the reasons you cite. However, this is a classic reference, and I'd kind of like to preserve the index. I even thought about just inserting it as a static index, without links. However, I thought it might be nice to go the extra mile and include links. Also, there are certain subjects that are a little hard to search for. – WordBear Mar 5 '17 at 2:11
  • 1
    I have to wonder whether using anchors (with the A tag) where the id is the page number isn't easier to do. I can't answer your question, but I'd worry about extra space being created within a span tag. – idiotprogrammer Mar 5 '17 at 18:17
  • Stupid me, I complete spaced out the ID's, though it was a pretty quick fix. My code now looks like this: <span class="PageNumber" id="236">236</span> Is that what you meant? Also, I was worried that extra spaces between my span and the following text would show up as an extra space in the epub, but that doesn't appear to be happening. – WordBear Mar 5 '17 at 23:20

Would inserting a visible-for-production page number

<p><b>33</b><a id="p33"/>California was the first...

and removing the bold page num with a regular expression find/replace at completion work for you?

  • Yes, that could be a cool way to do this. Would you by chance know the regular expression that removes the bold numeral. (I work mostly in Dreamweaver and BBEdit.) – WordBear Mar 9 '17 at 0:07
  • long time since used BBEdit, but i would start with <b>(\d+)</b> – jorourke Dec 18 '17 at 2:14

Try to use anchor tag as shown below and link these id in your index page.


<p><a id=”p33” />California was the first...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.