07-08-2011, 11:09 PM | #1 |
Grand Sorcerer
Posts: 27,546
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Superscript best practices?
I'm probably being a little persnickety, but does anyone have some CSS that consistently produces desirable superscript results across a variety of readers/applications? Superscript links for endnotes is where I'm ultimately going with this.
Just from an html standpoint, I tend to use the following CSS applied to a <span> element: Code:
/* End note superscript style */ .end-note { font-size: .80em; vertical-align: baseline; position: relative; bottom: .6em; } Code:
<span class="end-note"><a href="../Text/EN3.xhtml" id="EN3">3</a></span> Code:
/* End note superscript style */ .end-note { font-size: .80em; vertical-align: .6em; } Last edited by DiapDealer; 07-08-2011 at 11:13 PM. |
07-09-2011, 03:43 AM | #2 |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
I use simply:
Code:
a.note { font-size: 75%; vertical-align: text-top; /* doesn't affect line height */ } <a class="note" href="../Text/EN3.xhtml" id="EN3">3</a> Code:
sup { /* this is already rendered as superscript */ font-variant: normal; /* for use in smallcapped text */ line-height: 0; /* do not alter the line separation */ } M<sup>me</sup> de Bellière |
Advert | |
|
07-09-2011, 06:34 AM | #3 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
Since it depends on each reader there is no way to show superscripts easily across a variety of devices. Some people, myself included, tend to show them as bracketed numbers [1].
But that gets awkward when the text includes them and refers to them, as it did in a recent book I worked on. Those viewing epubs on bigger screens can get away with smaller superscripts. They require a microscope on my Sony Reader. |
07-09-2011, 08:14 AM | #4 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
The method I use is outlined here. This prevents ugly variations in line spacing in ADE and allows you to alter the vertical position of the superscript by changing the line-height.
Obviously, the reader application should really handle superscripts properly without having to resort to tricks to avoid irregular line-spacing, but this is the result of a fault in CSS2 itself. The readers are merely applying the (defective) standard. Last edited by charleski; 07-09-2011 at 08:20 AM. |
07-09-2011, 10:53 AM | #5 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Hi
This is another problem people using LibreOffice and Writer2xhtml do not have to worry with. They select either Style/superscript or Insert/endnote while textprocessing to write (nothing really unusual) and when they export to EPUB, this is how the end result looks like: (This is a Sigil view extract, text on top, code lower) Of course, if you are not happy with the style you can modify character styles or endnotes characteristics in LibO like you wish to suit your needs. |
Advert | |
|
07-09-2011, 12:08 PM | #6 |
Grand Sorcerer
Posts: 27,546
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Thanks guys!
Jelby's second example is the one that works the best for me. Thanks for the suggestion Roger, but I since I'm going to end up in a code editor before the ebook is done anyway... I prefer to just start in a code editor from the get go. Using a word processor, then exporting (or using a plugin), and then tweaking the resulting code just isn't my cup of tea. |
07-10-2011, 02:20 AM | #7 | |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Quote:
I will just comment, if I may, in a general way because I also had the opportunity to produce some books and like you, I do not like to tweak the resulting code and I limit it to the utmost. My point is that, with a reasonably complex book, you can now make an EPUB without tweaking the resulting code. What's a reasonably complex book ? One including any text using styles, lots of notes, tables, ordered lists, TOCs, meta-data, images of nearly any kind, including floating images, adding custom style sheets, embedding fonts and more. You just have to use LibreOffice with the standard odt format. I sincerely says it covers 99% of ebook production needs though I did not do any statistical study of any kind. My feeling. This can be produced within LibreOffice and exported straightaway as an EPUB within LibreOffice using its extension writer2xhtml. It's very comfortable indeed. Why are people using code editors then? This is a puzzling question. I would say there are always exceptions to any rule *, that not everybody produces text in odt format and that diversity is the salt of mankind. * For the time being, for example drop-caps are one of them, but that may change soon. PS: Here is an example where I made use of another feature, automatic style-mapping of style attributes. Last edited by roger64; 07-10-2011 at 03:40 AM. Reason: example |
|
07-10-2011, 04:20 AM | #8 | |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Quote:
What is more, I like to have control over the code. I have some standards regarding to the code and things I want and don't want. Even if I would use a plugin like this, I still would manually check and alter the code. For what it is worth, I tried working with LibreOffice, OpenOffice, StarOffice and so on, but I did not like it... The wordprocessor is reasonable, but the rest was not up to par for me. |
|
07-10-2011, 05:09 AM | #9 | |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Hi Toxaris,
I heard about Word users and their lingering html conversion problems. True, if you do not like LibreOffice, there is nothing it can do for you. But this is your choice. Fair enough. But... Quote:
I can tell you that, provided the user made a clean work out of his odt file, his EPUB code will be spotless clean too. The main point is easy to remember, it's to use styles throughout in the odt. The user has total control over it. Furthermore, you also can customize automatic style-mapping options (for styles or style attributes) to suit your tastes. If an odt file is a mess though, with a lot of "hard formatting" for example, well, then probably the garbage in, garbage out rule will apply... It makes really very clean work but does not perform any miracles yet. Last edited by roger64; 07-10-2011 at 05:38 AM. Reason: so many mistakes |
|
07-10-2011, 06:29 AM | #10 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
roger64: The epub you posted produces exactly the sort of ugly variation in line spacing that must be avoided. It does this in both ADE and calibre's reader, because that's what's specified in the css standard. The sup tag needs to be modified in the css to reduce the line-height in order to prevent this. See my earlier post for an example of what superscripts should look like. Jellby's method and mine are essentially the same, though mine allows a bit more control over vertical positioning.
Last edited by charleski; 07-10-2011 at 06:32 AM. |
07-10-2011, 09:55 AM | #11 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Hi Charleski
One of the pleasures of MR is that we may have constructive threads. Thanks all of you for your insight and research on this field. To be honest, I really did not dig so deep in superscript. To sum it up for my point: Writer2xhtml produces an xhtml code which is very respectful of standards. One of its advantages is to drastically reduce the necessity of code tweaking. The latter remains necessary at times, for example for drop-caps and nicely customized superscript tags. Somebody disagrees? Last edited by roger64; 07-10-2011 at 09:59 AM. |
07-10-2011, 11:20 AM | #12 | |
Grand Sorcerer
Posts: 27,546
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Quote:
The problem is, LibreOffice and the Writer2xhtml plugin, just don't have anything to do with my original question. I wasn't looking for a program to do something for me. I was looking for some in depth, behind the scenes, code-level details on how to get superscripts to behave in a consistent manner across a variety of ereaders and applications. I got those details from Jelby and charleski's examples. It seemed like I only got an advertisement/endorsement from your post. And in fact, Writer2xhtml will generate the same line-spacing issues (with superscripts) that prompted me to ask my question in the first place! Nothing wrong with a little advertising, but make sure it meets someone's needs before you do it. |
|
07-10-2011, 12:39 PM | #13 | |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Quote:
I am referring to my own standards. As an example, the example you gave earlier in the thread would not pass my standard. I tend to avoid attributes in spans and alike. I would transfer that always to a CSS stylesheet. I find it is ugly code. It is correct code, but not for me. |
|
07-10-2011, 04:42 PM | #14 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Writer2xhtml is open source, so it could be modified to produce epubs using the correct css to prevent the line-spacing issue. It's highly modular, though, and the css generation used for ePub export is part of the more general style generation package, so I'm not sure if the author would want to modify it globally or just for epubs.
|
07-21-2011, 12:20 AM | #15 |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
I've just attempted my first endnotes using Jellby's rule above:
a.note { font-size: 75%; vertical-align: text-top; /* doesn't affect line height */ } Although mine reads: span.endnote-ref { font-size : 75%; vertical-align : text-top; } This works great in the main body-copy, but in my smaller indented quotes, the endnote references actually come out larger than they do in the body-copy, when I was hoping they would appear smaller than the quotation paragraph style, which is: p.quote { font-family : Georgia, serif; font-weight : normal; font-style : normal; font-size : 0.83em; text-decoration : none; font-variant : normal; line-height : 1.2; text-align : left; color : #000000; text-indent : 0px; margin : 16px 32px; } How can I make the rule for "font-size: 75%;" apply to the paragraph style it is relevant to? |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Best Practices for TOC in Mobi | ldespain | Kindle Formats | 11 | 09-25-2010 08:54 PM |
Superscript and Subscript | ramjet1953 | Sigil | 1 | 06-13-2010 07:15 AM |
Superscript in titles | paulpeer | Sigil | 5 | 01-20-2010 08:37 AM |
DTBook - best practices | Nate the great | Workshop | 6 | 05-15-2009 04:06 AM |
EPUB best practices guide | Bob Russell | ePub | 25 | 04-01-2008 08:36 AM |