05-16-2019, 04:14 AM | #1 |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Formula for calculating drop caps
I've found many drop caps examples on the Internet, but none of the authors explained how they arrived at the values that they used and often the examples only worked with the fonts that they used in their examples.
IMHO, there must be a way to calculate the perfect values for font size, padding, margins etc. for any given font if the cap and line heights are known. |
05-16-2019, 04:35 AM | #2 |
The Grand Mouse 高貴的老鼠
Posts: 71,504
Karma: 306214458
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
When rendering ebooks, the line height is variable, as is the font. So it's only possible for the rendering engine to get drop caps right, and the ePub spec doesn't have any way to specify the information needed for an ePub rendering engine to know that drop caps are intended.
I believe that KFX has some explicit drop cap coding, which is why Amazon can get drop caps right in KFX. But also bear in mind that some caps have descenders (e.g. Q) which makes doing generic drop caps even more tricky. |
05-16-2019, 01:41 PM | #3 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
There is no such formula. Why? Because you not only have to deal with font-family and css but also with different rendering engine. It's known that -for example- ADE displays the things in a different way than WebKit. And you can't control that because a formula for ADE won't work for WebKit. Your best bet is to float a square/rectangle and enclose the letter inside it. Sometime ago I posted about that: https://www.mobileread.com/forums/sh...1&postcount=31 https://www.mobileread.com/forums/sh...2&postcount=55 https://www.mobileread.com/forums/sh...0&postcount=17 In the first link, I deal with the "tricky" Q to show that the method is the same no matter the letter. Regards Rubén |
|
05-16-2019, 09:35 PM | #4 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
We've spent a small fortune developing "perfect" dropcap coding for given fonts--and each and every one is custom-coded, for the base font in a given size parameter against the dropcap font. EVERY single one, each letter has its own coding. Not the entire alphabet, each letter. It's a lotta, lotta work. Not to mention, ever try to determine the x-height of a font? Or find a font with a "tall x-height?" Easier said than done, brother. Font metrics are a whole other rant of mine...lol Hitch |
|
05-17-2019, 09:42 AM | #5 | |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
That's actually relatively easy. What I've still haven't figured out is how to optimize drop caps css rules for specific fonts based on these values. |
|
05-17-2019, 10:24 AM | #6 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Without going through gyrations, I tend to use Typograf to get fast/easy font metrics, but for example, do any of my other FIVE font managers have that info? Nooooooo, and try to explain to the font manager softare companies WHY it matters, having comparable metrics for fonts. Try to explain what happens if you put a small font in the same line, as a tall font, and it's viewed in MOBI 7, without embedded fonts. It's like the whole "eyes glazed over" thing. /grump. Hitch |
|
05-17-2019, 11:04 AM | #7 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
But regarding to float a square, you can get practically the same output under ADE, WebKit, Readium, etc. Of that way the problem is reduced about how to center horizontal and vertically the letter inside that square. Last edited by RbnJrg; 05-17-2019 at 05:30 PM. |
|
05-18-2019, 02:32 PM | #8 | |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
For example: Spoiler:
However, I've found only one app that actually supports this new rule: iBooks. EDIT: Gitden Reader also supports initial-letter, but not ADEPT DRM. Last edited by Doitsu; 05-18-2019 at 03:58 PM. |
|
05-18-2019, 11:43 PM | #9 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
05-19-2019, 01:09 AM | #10 | |
Bibliophagist
Posts: 35,356
Karma: 145435140
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
<h1 class="whatever">Prologue</h1> <p class="dateline">London, Sept. 17, 1940</p> <p>As the air raid sirens screamed, Martin headed down the stairs to the cellar.</p> |
|
05-19-2019, 03:15 AM | #11 |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
I haven't got the faintest idea how to do this, I merely adapted the website code for epub3 books. (I won't use drop caps CSS, until initial-letter becomes widely adopted.)
I didn't mention this issue, because I assumed that it'd be obvious to ebook designers familiar with pseudo selectors. |
05-19-2019, 07:58 AM | #12 | |
Grand Sorcerer
Posts: 6,496
Karma: 84420419
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
Quote:
dropcap_chars: 1, dropcap_lines: 3, Where dropcap_chars indicates how many initial characters of the paragraph should be drop caps and dropcap_lines indicates how many lines high to make it. The drop cap automatically adjusts to the font, font size, line height, etc. (Do you have any idea whether initial-letter is on a track to being standardized? The article that you linked is over three years old.) Last edited by jhowell; 05-19-2019 at 03:37 PM. |
|
05-19-2019, 08:09 AM | #13 | ||
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
Quote:
|
||
05-19-2019, 12:49 PM | #14 | |
A Hairy Wizard
Posts: 3,094
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
|
Quote:
p.first::first-letter {...} <h1>Chapter Title</h1> <p class="dateline">London, Sept. 17, 1940</p> <p class="first">First paragraph, or any paragraph that you want the drop-cap</p> |
|
05-19-2019, 01:00 PM | #15 | |
curly᷂͓̫̙᷊̥̮̾ͯͤͭͬͦͨ ʎʌɹnɔ
Posts: 3,002
Karma: 50506927
Join Date: Dec 2010
Location: ♁ ᴺ₄₅°₃₀' ᵂ₇₃°₃₇' ±₆₀"
Device: K3₃.₄.₃ PW3&4₅.₁₃.₃
|
Quote:
And seemingly not even on Safari 5.1.7, the outdated last version for Windows. |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Best Way for Drop Caps | Wlan | ePub | 62 | 07-03-2018 07:11 PM |
Drop caps | RandyK | Conversion | 2 | 05-18-2014 09:13 PM |
Is there a way to strip drop caps? | ficbot | Calibre | 2 | 08-30-2013 11:06 AM |
drop caps in paperwhite? | morrow | Kindle Formats | 7 | 12-11-2012 12:10 PM |
Drop caps | huebi | ePub | 8 | 03-04-2012 06:25 AM |