0

Is it possible to create an initial (first big letter of a paragraph) using CSS 2 (so that it would work in EPUB 2)? If yes, how?

I tried creating it in CSS 3 (for EPUB 3) and it works, except it creates indent not just before, but also after the initial and I never found out a way to fix it.

<html>
<head>
<title></title>
<style>
p {
    margin: 0;
    text-align: justify;
    text-indent: 2em;
}
p.initial::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 0.1em;
    margin-top: 0.1em;
    line-height: 0.8em;
}
</style>
</head>
<body>
<p class="initial">First paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Second paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

So what I want is 1) make initial in CSS 2 and 2) fix this code in CSS 3, so there is no indent after initial.

[P.S. none of the other proposed topics answer my questions. My question is specifically about making it in CSS 2. Additional question is about fixing indent in CSS 3 version of the code. None of these questions is answered there.]

0 Answers0