View Single Post
Old 08-12-2017, 02:12 AM   #1
nabsltd
Evangelist
nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.
 
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
Centered initial caps?

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?
Attached Thumbnails
Click image for larger version

Name:	CenteredInitialCaps.jpg
Views:	173
Size:	15.9 KB
ID:	158399  
nabsltd is offline   Reply With Quote