2

I am editing an ebook, trying to mimic the original format of its text. In the book, footnotes are written in a smaller font with respect to normal text, and so are quotations; this means that a quotation inside a footnote is even smaller.

I used an inline style

<div style="font-size:smaller;">text</div>

which works well for footnote and quotations. (Actually, the directive is incorporated in their style) It work also for quotations inside footnotes, but in this case the size of the text is really small. I wouldn't want to dictate a font size; but I would like to have something like "use a font 1 pt smaller than the inherited one". Is it possible?

3

I eventually found out that I can use

style="font-size:90%;"

which is not exactly what I wanted but is sufficients for my needs.

0

If I understand correctly what you want to do, you will need three different font sizes, one for the main body text, one for the footnote, and another for the quotations.

As you correctly guessed, using a relative CSS unit1 is the way to go, but I think that in this case it is more correct to use em or rem instead of %, since it these are units directly referencing font sizes.

I also advise you to use classes and set the actual styling on an external CSS file, in order to have a cleaner and more manageable code.

Example

HTML file:

<div class="footnotes">

    <p>Lorem ipsum dolor sit amet[...]</p>

    <blockquote>Lorem ipsum dolor sit amet[...]</blockquote>

    <p>Lorem ipsum dolor sit amet[...]</p>

</div>

CSS file:

.footnotes p {
    font-size: 0.9rem;
}

.footnotes blockquote {
    font-size: 0.8rem;
}

What we do here is wrapping the footnotes with a <div> and giving it a footnotes class, in order to easily select it in the CSS file; inside it, we have standard <p> paragraphs, that we set to have a font size 90% of the standard body text (by using rem units); then we used the <blockquote> HTML tag to wrap and style the quotations, and in this case we set the font size to be 80% of the body text.


1. Here is a reference to CSS units; please note that not all of them are pertinent or useful for epub use

  • Well, I actually used an external style in my ebook :-) As for using absolute sizes, I am not sure if they can be easily overridden by a standard reader (in the sense of program): this is why I settled for a relative size. – mau Mar 3 at 18:12

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.