View Single Post
Old 11-24-2018, 07:11 AM   #11
thiago.eec
Guru
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 928
Karma: 1177583
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by Doitsu View Post
iBooks also seems to ignore styles in footnote popup windows.
iBooks does ignore the CSS classes, but it honors the style attribute within the element (at least some properties, anyway).

I use this code for my footnotes:

Spoiler:
Code:
HTML:

<aside id="footnote-1" class="Note-Text" epub:type="footnote" role="doc-footnote">
  <p style="text-align:justify"><a role="doc-backlink" class="Visible" hidden="hidden" href="Chapter1.xhtml#footnote-1-backlink">1</a> Text for the footnote. Text for the footnote. Text for the footnote.</p>
</aside>
Code:
CSS:

a.Visible {
  display: inline;
}


The footnote text will be justified on iBooks pop-up.

The "hack" using display:inline associated with hidden attribute is to prevent the number of the footnote appearing in duplicity on iBooks as well. iBooks generates a number title for each footnote, but since it doesn't accept classes inside the note, the css property will be ignored, while the hidden atribute will still be honored. This way, only the number on the pop-up title will be displayed.

The "hack" above does not affect other Reading Systems (at least not the ones I've tried), because the CSS class property (display:inline) overrides* the HTML atribute (hidden).

* See: http://www.hwg.org/resources/faqs/cs...tml#precedence

Last edited by thiago.eec; 11-24-2018 at 07:35 AM.
thiago.eec is offline   Reply With Quote