: Re: How to set the font sizes of two text sections to be relative to each other? I am editing an ebook, trying to mimic the original format of its text. In the book, footnotes are written in

@Jamie

Vote Up Vote Down   0 Reactions

Login to give Reaction!

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

(0)

Login to post a comment!