dvschultz / 99problems

99 Problems and e-reader rendering are all of them
60 stars 3 forks source link

iBooks epub:type="noteref" + img, target without epub:type="footnote" => dead link #14

Open pettarin opened 10 years ago

pettarin commented 10 years ago

In iBooks 3.2 (iOS 7.1):

<a class="box" href="#x" epub:type="noteref"><span class="iconContainer"><img class="icon active" src="y.png"/></span></a>

(with the CSS workaround of issue #13 ), if the target does NOT have epub:type="footnote", as in:

<div id="x" class="z">
...
</div>

the popup does not appear (ok, that's reasonable), but also the <a> seems dead, that is, the window.location is not changed to the target x. (The target is visible.)

After touching the image contained in the <a>, a gray flash appears behind the image, as if some event is triggered, but after that nothing happens.

teytag commented 10 years ago

Hi... I have two solutions for this topic First: A Element

<a epub:type="noteref" href="#n1">.</a>

CSS

a[href*="#"]:after{font-family:Helvetica,Arial,sans-serif;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAwFBMVEXi4uLp6enl5eXn5+fh4eHc3Nz/ZADt0Lze3t709PTv7+/5+fnd3d3f39/s1sja2try8vLb29vj4+P/ZgPr4NnvwqTk5OTuyrLq5OH19fXs1cXx8fH8dyHzrH72mFr+ZwXg4ODq5uTt08Ps2c79bxP+bA7o6Oj9chn3k1Lr29Dyson1n2jw8PDytY/1o27ytIz0pHD7fy/r6+vvw6fs7OzysYbzqnvp3tf8dR71oWvvxarq6ur29vbm5ub39/f7fSwmeObQAAAA+UlEQVR4Xk3RRZJDMQxFUT3J9kcIM3OamWH/u2o5rqRzZzoT2SXKDqWduKrq8fcwjAetFdawvAoba5KjPtVJgNaoBQjZNOhDnaHduEtobK+81gIup25aBk5UC4Jv55zbwUeNjFIratFz02njSFVsQg3Tnty7/34nbQOyvN+687Z7nlElKFdnuBpAYq+I1idcR4DkB0W36ULNLlRjyll17o7NVdlQx6iWJ12omg0NrQAfJ30EJE8oMwRc6+6X5VjfcgEQ648Ty7h7u+gB6N2O3sHxl2qWWh7g2ILzWqbqmQQhoVhRVes3/C1E2OT8kwX1JZtZURTmsx/GP/gEEwMHT/7PAAAAAElFTkSuQmCC) no-repeat;content:"";color:transparent;padding:2px 25px 3px 10px;margin:-5px 0 0 0px;font-weight:bolder;font-size:60%;width:50px;position:relative}

img_1699

Second: A Element

<a epub:type="noteref" href="#n1">Fiorentina</a>

CSS

a[href*="#"]:after{
font-family:Helvetica,Arial,sans-serif;
background:blue;
content:"N";
color:white;
padding:2px 5px 3px 5px;
margin:-5px 0 0 4px;
font-weight:bolder;
font-size:60%;
}

img_1697

img_1698

makeBetterEBooks commented 10 years ago

Does the same thing happen with rearnote? I would assume so but haven't tested.

teytag commented 10 years ago

EDUPUB Structural Semantics: Draft Specification 28 May 2014 http://www.idpf.org/epub/profiles/edu/structure/#h.8shjyltt6biq