Homepage
Login
Profile
BookClubs
dmBox
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?
Free books android app tbrJar TBR JAR Read Free books online gutenberg
(2)More posts by @Sandra
2 Comments
Sorted by latest first Latest Oldest Best
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
Free books android app tbrJar TBR JAR Read Free books online gutenberg
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.
Free books android app tbrJar TBR JAR Read Free books online gutenberg