Is there any way to create a centered initial cap that is 100% portable?
What I did to create the attached sample is based on knowing my reader width, reading font and size I read at, and picking a text-indent that works for most letters.
Code:
<p class="para-chapterFirst"><span class="text-dropcap">E</span>ntering</p>
.para-chapterFirst {
text-indent: 47%;
text-align: justify;
margin-bottom: 0.1em;
}
.text-dropcap {
font-size: 4.6em;
font-weight: bold;
}
But, if somebody reads with larger/smaller window, a different base font, or changes the base font size up or down more than just a little, that throws of the "centering". Likewise, if I tweak the indent for perfect centering for individual letters, it still has the same issues.
I ran into the same sort of problems setting the initial cap in a separate paragraph and then using a negative margin-top on the next paragraph:
Code:
<p class="para-dropcap">E</p>
<p class="para-chapterFirst">ntering</p>
.para-dropcap {
text-align: center;
font-size: 4.6em;
font-weight: bold;
}
.para-chapterFirst {
text-indent: 55%;
text-align: justify;
margin-top: -1em;
margin-bottom: 0.1em;
}
Now, it's the indent of the next paragraph that needs to be changed to make the spacing between the initial cap and the rest of the sentence correct. In this case, I could tweak for each different letter, but that still breaks if the text size changes.
Is there anything like a float that can be centered, allowing the rest of the opening sentence to end up where it belongs?