Centered initial caps?

[nabsltd]

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.

<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:

<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?

[JSWolf]

I know a center initial cap is what you want, but to me, that just looks wrong and if it was an eBook I was reading, I'd have to fix that and move it back to the left.

[nabsltd]

Originally Posted by JSWolf

I know a center initial cap is what you want, but to me, that just looks wrong and if it was an eBook I was reading, I'd have to fix that and move it back to the left.

I'm trying to duplicate the original hardcover formatting, and that's the way it was. It's a fairly common format in printed books.

It's nice that we can change the base font so that it is most readable on our device, but other than that, I try to keep the original styling of the first-edition hardcover, since that's usually where the most thought went about how the author and publisher wanted it to look.

Also, if you move it to the left, you force the dateline to move up, instead of being on the same line. That's also a very nice bit of styling, and losing it would really make the book much less unique. Having every book styled exactly the same makes them bland.

[JSWolf]

Originally Posted by nabsltd

I'm trying to duplicate the original hardcover formatting, and that's the way it was. It's a fairly common format in printed books.

It's nice that we can change the base font so that it is most readable on our device, but other than that, I try to keep the original styling of the first-edition hardcover, since that's usually where the most thought went about how the author and publisher wanted it to look.

Also, if you move it to the left, you force the dateline to move up, instead of being on the same line. That's also a very nice bit of styling, and losing it would really make the book much less unique. Having every book styled exactly the same makes them bland.

It won't work in all cases because you are missing something very important. What you are missing is that some people need or want a large font size. It's possible that the large font size could cause this not to work. eBooks are not pBooks where everything is fixed at a fixed size. You need to take into account the fact that the font could be changed, the font size could be changed, the margins could be changed, and the line height could be changed. You have to make an eBook work as an eBook and the styling used in the hardcover doesn't work for an eBook. I know for sure that my Kobo Aura H2O's font size settings can be set large enough that this formatting will fail. That and it does look awful. Whoever designed the formatting didn't take into account aesthetics.

[Hitch]

Originally Posted by nabsltd

Is there any way to create a centered initial cap that is 100% portable?

Depending on how much you want, or don't want, to drag this out: no. Not if you are talking about a book headed for commercial or even free, but wide, distribution. I mean, you said it yourself:

"...knowing my reader width, reading font and size I read at..."

...which you shan't know for ANYONE else. Right?

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.

<snippage>

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:

<more snippage>

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?

For what it's worth, just as an FYI, what you're doing isn't a drop cap. It's actually called a Raised Initial. That midline layout, though--not going to lie, I don't think I've seen that used in this century, and not for most of the last half of the last century. I see that the book you're doing talks about a 727, but...I'd guess that's what, 50 years old, or so?

Unlike Jon, I'm not opposed to Drops, RIs or even BFLs, but what you're trying to do is sort of pushing a chain up a hill. I'm unclear about why your 47% isn't working--it should be. I mean...where is it NOT working, that you know of?

The date and the E aren't on the same line--not at all. That's simply an optical illusion, created by the vertical height of the E. That's part of the problem you're having. If you are really thinking, instead of just saying, that those are on the same line, that explains why you're fighting with it. Of course, the date will "move" if you move the E to the left--you're not shrinking a distance, between two elements, horizontally; you're messing with it vertically, as well, due to the line-height needed for the Raised Initial.

And while our friend Jon is a bit strident (ahem, Jon!), he's not wrong about the fact that nobody, but nobody, reads at the designated default font size. Younger people read at a smaller size, older at a much larger size. You're really pushing a chain up a hill.

Why not just leave the date where it is, put the Raised initial at the left-margin, and call it a win? Or hell, make different incipits, like a line of bold, or smallcaps, something that will play nicely, with an eBook reader? Just because the original book was that way doesn't mean that the new one has to be. I'm not saying that they all have to be vanilla--that's not how we roll, at my shop--but there's no law that says you have to reinvent text styling that is, well, outmoded. If you were doing a manuscript from the 1700s, I wouldn't expect you to put it in handwriting calligraphy, either, y'know?

Hitch

[Turtle91]

Have you tried this?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
p            {text-indent:1.2em; margin:0; padding:0; line-height:1}
p.first      {display:inline; padding-left:50%; text-indent:0}
p.first span {font-size:3em; font-family:serif}
</style>

</head>
<body>
<p class="first"><span>E</span>nter all ye who would... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>

<p>And pay heed to those who are...</p>
</body>
</html>

It seems to do what you want - at least within Sigil.

Cheers,

edit:pictures added

[Hitch]

Originally Posted by Turtle91

Have you tried this?



It seems to do what you want - at least within Sigil.

Cheers,

edit:pictures added

Ignoring the date thing, yeah. That seems to be the ticket. :-)

Hitch

[Turtle91]

Yeah, sorry, my screen hadn't refreshed before I posted ... didn't see your comments about the date.

[Hitch]

Originally Posted by Turtle91

Yeah, sorry, my screen hadn't refreshed before I posted ... didn't see your comments about the date.

Dude, I wasn't commenting on that, not at all. I was simply clarifying, for the guy. That's all. Nice code. :-)

H

[Turtle91]

Lining up the date and the top of the raised initial should just be a matter of giving the date a negative bottom margin - such as:

<style>
p            {text-indent:1.2em; margin:0; padding:0; line-height:1}
p.date       {text-indent:0; margin-bottom:-1.5em; letter-spacing:.1em;
              font-style:italic; font-family:serif}
p.first      {display:inline; padding-left:50%; text-indent:0}
p.first span {font-size:3em; font-family:serif}
</style>

</head>
<body>
<p class="date">APRIL 8</p>
<p class="first"><span>E</span>nter all ye who would... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>

<p>And pay heed to those who are...</p>

...although I think Amazon barfs on negative margins??

[Turtle91]

doh! ninja'd again!!

Nothing like forum fencing on a Saturday night...such is my life!

[Hitch]

Originally Posted by Turtle91

doh! ninja'd again!!

Nothing like forum fencing on a Saturday night...such is my life!

Hitch

[nabsltd]

Originally Posted by JSWolf

It won't work in all cases because you are missing something very important. What you are missing is that some people need or want a large font size.

No, that was exactly my point...I want a portable way to make this work.

If I had Javascript available, it would be trivial to do using my second formatting, then tweaking the first line indent with Javascript to work with the width of the character of the initial cap. With that, the initial cap would be centered, the top of the dateline would be in line with the top of the initial cap, and the text would smoothly flow from the initial cap.

And, it would reflow perfectly regardless of font choices or font sizes. Sure, it might look silly with really big fonts, but even a flush left initial cap will start to do that. And, even my current hack will do everything fine at any font size except have the initial cap perfectly centered.

That and it does look awful. Whoever designed the formatting didn't take into account aesthetics.

That's purely your opinion. I like the left dateline and the centered cap. Also, I did snip the chapter number and image, which are both centered and draw the eye to the cap.

What got me asking the question is that I have another book with a similar format, but a smaller initial cap, so I had to tinker with the percentages. The attached sample image shows just how good a centered cap can look. The crosshair draws the eye straight to the cap, which is really good design, and is much better aesthetically than a left cap would be.

[nabsltd]

Originally Posted by Hitch

I'm unclear about why your 47% isn't working--it should be. I mean...where is it NOT working, that you know of?

Wide and narrow letters. "W" is noticeably left of center and "I" is right.

The date and the E aren't on the same line--not at all. That's simply an optical illusion, created by the vertical height of the E.

Well, yeah, I know they are different paragraphs, but you need to use negative margin to get the top of the date to line with the top of the cap, and that's the way it was in the original book (Michael Palmer's Extreme Measures, from 1991).

For what it's worth, just as an FYI, what you're doing isn't a drop cap. It's actually called a Raised Initial.

I only use the "text-dropcap" name for the style because I use that for all initial caps, regardless of whether they are raised, drop, even floated outside the text.

Originally Posted by Turtle91

It seems to do what you want - at least within Sigil.

Not even close. That "E" isn't centered:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
p            {text-indent:1.2em; margin:0; padding:0; line-height:1}
p.first      {display:inline; padding-left:50%; text-indent:0}
p.first span {font-size:3em; font-family:serif}
p.center {text-align: center; font-size:3em;}
</style>

</head>
<body>
<p class="center">I</p>
<p class="first"><span>E</span>nter all ye who would... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>

<p>And pay heed to those who are...</p>
</body>
</html>

[nabsltd]

Here's code for the "cap on separate para" version:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
p            {margin:0; padding:0;}

.para-dropcap {
	text-align: center;
	font-size: 4.6em;
	font-weight: bold;
	line-height: 1;
}
.para-chapterFirst {
	text-indent: 54.5%;
	text-align: justify;
	margin-top: -1.75em;
	margin-bottom: 0.1em;
}
</style>

</head>
<body>

<p class="para-dropcap">E</p>
<p class="para-chapterFirst">nter all ye who would ... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>
<p class="para-dropcap">W</p>
<p class="para-chapterFirst">est of ... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>
<p class="para-dropcap">T</p>
<p class="para-chapterFirst">esting the centering ... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>
<p class="para-dropcap">I</p>
<p class="para-chapterFirst">n the still ... yadda yadda
 yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
 yadda yadda yadda yadda yadda</p>
</body>
</html>

You can see that the "E" looks good, the "W" is OK, the "T" is bad, and the "I" is terrible.

Since this causes text-to-speech to break while not completely fixing the formatting, I picked the way that kept TTS functional.