Mobileread
Centered initial caps?
#1  nabsltd 08-12-2017, 03:12 AM
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?
CenteredInitialCaps.jpg 
Reply 

#2  JSWolf 08-12-2017, 05:12 AM
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.
Reply 

#3  nabsltd 08-12-2017, 02:46 PM
Quote 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.
Reply 

#4  JSWolf 08-12-2017, 03:09 PM
Quote 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.
Reply 

#5  Hitch 08-12-2017, 06:12 PM
Quote 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?

Quote
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
Reply 

#6  Turtle91 08-12-2017, 06:16 PM
Have you tried this?

Code
<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
font15.JPG font29.JPG font45.JPG 
Reply 

#7  Hitch 08-12-2017, 07:08 PM
Quote 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
Reply 

#8  Turtle91 08-12-2017, 07:22 PM
Yeah, sorry, my screen hadn't refreshed before I posted ... didn't see your comments about the date.
Reply 

#9  Hitch 08-12-2017, 07:29 PM
Quote 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
Reply 

#10  Turtle91 08-12-2017, 07:55 PM
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:

Code
<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??
font30.JPG 
Reply 

  Next »  Last »  (1/7)
Today's Posts | Search this Thread | Login | Register