08-12-2017, 02:12 AM | #1 |
Evangelist
Posts: 417
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; } 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; } Is there anything like a float that can be centered, allowing the rest of the opening sentence to end up where it belongs? |
08-12-2017, 04:12 AM | #2 |
Resident Curmudgeon
Posts: 73,887
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
08-12-2017, 01:46 PM | #3 | |
Evangelist
Posts: 417
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
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. |
|
08-12-2017, 02:09 PM | #4 | |
Resident Curmudgeon
Posts: 73,887
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
08-12-2017, 05:12 PM | #5 | ||
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
"...knowing my reader width, reading font and size I read at..." ...which you shan't know for ANYONE else. Right? Quote:
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 |
||
08-12-2017, 05:16 PM | #6 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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> Cheers, edit:pictures added Last edited by Turtle91; 08-12-2017 at 05:23 PM. |
08-12-2017, 06:08 PM | #7 |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
08-12-2017, 06:22 PM | #8 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Yeah, sorry, my screen hadn't refreshed before I posted ... didn't see your comments about the date.
|
08-12-2017, 06:29 PM | #9 |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
08-12-2017, 06:55 PM | #10 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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?? Last edited by Turtle91; 08-12-2017 at 06:59 PM. |
08-12-2017, 06:58 PM | #11 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
doh! ninja'd again!!
Nothing like forum fencing on a Saturday night...such is my life! |
08-12-2017, 07:44 PM | #12 |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
08-13-2017, 02:17 AM | #13 | ||
Evangelist
Posts: 417
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
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. Quote:
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. |
||
08-13-2017, 02:26 AM | #14 | |||
Evangelist
Posts: 417
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
Quote:
Quote:
Not even close. That "E" isn't centered: 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} 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> Last edited by nabsltd; 08-13-2017 at 02:32 AM. |
|||
08-13-2017, 03:08 AM | #15 |
Evangelist
Posts: 417
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Here's code for the "cap on separate para" version:
Code:
<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> Since this causes text-to-speech to break while not completely fixing the formatting, I picked the way that kept TTS functional. |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
RegEx Question: H1 ALL CAPS to All Caps | phossler | Sigil | 21 | 02-06-2014 02:44 PM |
Interesting PW bug, everything centered | twowheels | Amazon Kindle | 1 | 02-01-2013 12:27 PM |
Centered but left align? | mtrahan | ePub | 15 | 04-01-2012 03:56 PM |
would like toc to be centered | alansplace | Kindle Formats | 9 | 11-20-2011 11:47 AM |
mobi toc centered | alansplace | Conversion | 1 | 11-19-2011 07:45 PM |