Hidden headings/links don't work in iBooks?

[Psymon]

Well, this is odd. In one of the books I'm working on, I have all my chapters set up as separate files, and the links in my ToC all work fine to go there, but I also wanted links to certain poems within each chapter. The poems don't have actual titles, though -- otherwise I would just mark those up as <h2> or whatever -- so it's basically the first line of each poem that they're "named" by. So I did those up with hidden <h2> coding, like this...

<h2 class="hidden" id="eastern">“Low in the eastern sky”</h2>

<p class="poem">Low in the eastern sky</p>

<p class="poem">Is set thy glancing eye;</p>

etc...

My ebook validates just fine (in case you're wondering), and all the links work just fine in ADE, taking you right to the poem in question, but in iBooks you're taken instead to just the beginning of the chapter (whichever chapter the poem in question is in).

Does iBooks have an issue with the "hidden" attribute, that anyone knows of? And is there a workaround for this? I've never seen this issue with anything similar that wasn't "hidden", so I can only assume it must have something to do with that.

[GrannyGrump]

What happens if, instead of using the "hidden" attribute [ visibility: hidden;]
you try display: none

I seem to remember discussion that the "hidden" attribute is not always reliable.

[Jellby]

It depends on what the "hidden" class does. I guess you have defined it with "display: none". In that case the behaviour is not unexpected. "display: none" removes the title from the flow, so the anchor is nowhere.

I'm not sure what the spec says about this, and it seems other renderers can access anchors with "display:none", but I wouldn't rely on that.

Since the title is probably only being used to create an automatic TOC, you can remove it once the TOC has been created (and put the id in some other element). Or you can try to make sure the title is not displayed, without using "display: none" (try "visibility: hidden", plus removing all height and margins, but this is not a required property in ePub 2 renderers).

[Hitch]

Originally Posted by Jellby

It depends on what the "hidden" class does. I guess you have defined it with "display: none". In that case the behaviour is not unexpected. "display: none" removes the title from the flow, so the anchor is nowhere.

I'm not sure what the spec says about this, and it seems other renderers can access anchors with "display:none", but I wouldn't rely on that.

Since the title is probably only being used to create an automatic TOC, you can remove it once the TOC has been created (and put the id in some other element). Or you can try to make sure the title is not displayed, without using "display: none" (try "visibility: hidden", plus removing all height and margins, but this is not a required property in ePub 2 renderers).

Without seeing the relevant CSS, we're air-punching here.

Hitch

[Psymon]

Originally Posted by Jellby

It depends on what the "hidden" class does. I guess you have defined it with "display: none". In that case the behaviour is not unexpected. "display: none" removes the title from the flow, so the anchor is nowhere.

Oh, my apologies -- indeed that was what that class was, nothing more than "display: none".

Or you can try to make sure the title is not displayed, without using "display: none" (try "visibility: hidden", plus removing all height and margins, but this is not a required property in ePub 2 renderers).

That seems to have worked! I made a new class...

.hidhead {
	visibility: hidden;
	margin: 0;
	line-height:0;
}

...and now all my links work just fine in iBooks (as they did before in ADE) -- except now in both iBooks and ADE, despite my setting margins and line height at zero, they both inadvertently add in extra space where that hidden <h2> is, i.e. like a blank line added in there (I even just added in "padding:0", too, and that doesn't help any).

[Psymon]

I figured out a solution!

First, I thought that maybe -- who knows -- that adding in "font-size:0" might do something. Well, rather interestingly, what that accomplished was to actually create negative line height, i.e. not only was that line not hidden, but instead it decreased the space between the poem and the paragraph before it! I can't imagine why, but that's what it accomplished.

So then -- for lack of anything else to do -- I changed that to "font-size:1" (without specifying what "1" was measured in, i.e. em or px or whatever), and although that seemed to do the trick for ADE, I was back to where I was before with iBooks (with an extra blank line added).

So then I changed that to "font-size:1px", and that seems to have done the trick! Seems to work out just fine in both ADE and iBooks, and if there's a 1px line added in there, I can't really see it at all.

So I guess I solved this -- but thank you for pointing me in the right direction, of course! I guess I should really say that "we" solved this, together.

[Jellby]

Don't touch the font-size or the line-height. Instead just use "height: 0; margin: 0; padding: 0".

There may be other rules affecting the spacing.

[Psymon]

Originally Posted by Jellby

Don't touch the font-size or the line-height. Instead just use "height: 0; margin: 0; padding: 0".

There may be other rules affecting the spacing.

If there is, I don't know what it is -- everything was fine before, when I was using "display: none" (or if I just take out that entire line of <h2> code completely).

[Psymon]

Originally Posted by Jellby

Don't touch the font-size or the line-height. Instead just use "height: 0; margin: 0; padding: 0".

There may be other rules affecting the spacing.

I haven't got a clue what might be affecting it. Just spent the last hour or so poring over my CSS, and I can't see what might be affecting it. :/

What's wrong with adding in that font-size:1px, if it fixes the problem and gets things to display how they're supposed to both in ADE and iBooks?

[roger64]

mistake

[Jellby]

Originally Posted by Psymon

I haven't got a clue what might be affecting it. Just spent the last hour or so poring over my CSS, and I can't see what might be affecting it. :/

If you post a sample showing the problem, I or someone else can have a look.

What's wrong with adding in that font-size:1px, if it fixes the problem and gets things to display how they're supposed to both in ADE and iBooks?

Well, 1 is not 0, to start with (you probably can write 0.0001px too). And it looks hackish But mainly, you got something that works but you don't know why, which means it can bite you in the back any time.

[Psymon]

Originally Posted by Jellby

If you post a sample showing the problem, I or someone else can have a look.

Here you go, I threw together a snippet of my book that should illustrate the problem (I included my full stylesheet, if there's something else in there that's causing the problem -- I haven't got a clue what it might be!). :/

Well, 1 is not 0, to start with (you probably can write 0.0001px too). And it looks hackish But mainly, you got something that works but you don't know why, which means it can bite you in the back any time.

Yeah, I do agree, it would naturally be nice if I could get this right. Thanks so much for your help, Jellby!

[Jellby]

Somehow ADE (at least 1.7, which is what I can try), is discarding the bottom margin of p.text if you assign "height: 0" (or "line-height: 0") to .hidhead, even without the visibility/display tricks. I've seen ADE doing similar things before, so I'd suggest "height: 0.0001px", or, to be safe:

.hidhead {
        visibility: hidden;
        margin: 0;
        padding: 0;
        /* work around ADE's dislike for "0" */
        height: 0.0001;
        overflow: hidden;
}

[Psymon]

Thanks, Jellby! I haven't tried it yet, but I'm sure that'll do the trick! Interesting about the overflow:hidden addition -- I've never used "overflow" (of any kind) before, and you got me reading up a bit about it and I can see that it makes sense to have that in there.

Right on

[Jellby]

Mind you, neither "visibility" nor "overflow" are in the required CSS set for ePub 2.0.1, so there could be a spec-compliant reader which ignores them both, and then your h2 would be visible.