Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 05-16-2019, 04:14 AM   #1
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 4,554
Karma: 14554601
Join Date: Dec 2010
Device: Kindle PW2
Question 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.

Doitsu is offline   Reply With Quote
Old 05-16-2019, 04:35 AM   #2
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 57,645
Karma: 216773454
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage, Yotaphone 2
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.
pdurrant is offline   Reply With Quote
Old 05-16-2019, 01:41 PM   #3
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,040
Karma: 3777777
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Doitsu View Post
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.
Hi Doitsu;

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
RbnJrg is offline   Reply With Quote
Old 05-16-2019, 09:35 PM   #4
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 7,622
Karma: 71909081
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by Doitsu View Post
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.

In my humble opinion, Doits, it's not possible. I wish to hell it were. We've done I-don't-know-how-many books with dropcaps, both print and eBook, and there's simply not one-size-fits all. The base font, the leading (line-height), the dropcap font, all cause variables.

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
Hitch is offline   Reply With Quote
Old 05-17-2019, 09:42 AM   #5
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 4,554
Karma: 14554601
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by RbnJrg View Post
Your best bet is to float a square/rectangle and enclose the letter inside it. Sometime ago I posted about that:
Thanks for the links! I'll check them out.

Quote:
Originally Posted by Hitch View Post
Not to mention, ever try to determine the x-height of a font?
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.
Doitsu is offline   Reply With Quote
Old 05-17-2019, 10:24 AM   #6
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 7,622
Karma: 71909081
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by Doitsu View Post
Thanks for the links! I'll check them out.


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.
When shopping for them? I find it annoying as hell. I had this one client, insisted that we had to use this font that I knew was going to be disastrous in MOBI. She INSISTED that her text had to have a tall "x-height" (because she read some "design" article someplace, telling her that that was the key to readability, of course...), and I was trying to find one that would suit her and work in MOBI. I tried to shop by winnowing, right? Yeah, as Scooby-Doo would have said, rots o'ruck.

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
Hitch is offline   Reply With Quote
Old 05-17-2019, 11:04 AM   #7
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,040
Karma: 3777777
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Doitsu View Post
What I've still haven't figured out is how to optimize drop caps css rules for specific fonts based on these values.
You can't. I tried and I couldn't. Once you have optimized the css code for ADE, it won't work for Webkit or Readium or whatever. Do the try. Sigil uses Webkit. Try finding a css code that shows perfectly the dropcap in Sigil (let's suppose that you found a formula for doing that in Sigil with any kind of font-family). Open that epub in ADE and the dropcap won't display of the same way. And you can't control that because you don't know what engine will use the ereader to display the epub.

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.
RbnJrg is offline   Reply With Quote
Old 05-18-2019, 02:32 PM   #8
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 4,554
Karma: 14554601
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Hitch View Post
In my humble opinion, Doits, it's not possible. I wish to hell it were. We've done I-don't-know-how-many books with dropcaps, both print and eBook, and there's simply not one-size-fits all.
There's a new initial-letter CSS rule that'll make creating drop caps much easier.

For example:
Spoiler:
Code:
h1 + p::first-letter {
  -webkit-initial-letter: 2;
  initial-letter: 2;
  margin-right: 0.2em;
  color: red;
}

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

Name:	iBooks.png
Views:	33
Size:	80.2 KB
ID:	171497  
Attached Files
File Type: epub initial-letter.epub (3.3 KB, 25 views)

Last edited by Doitsu; 05-18-2019 at 03:58 PM.
Doitsu is offline   Reply With Quote
Old 05-18-2019, 11:43 PM   #9
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 7,622
Karma: 71909081
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by Doitsu View Post
There's a new initial-letter CSS rule that'll make creating drop caps much easier.

For example:
Spoiler:
Code:
h1 + p::first-letter {
  -webkit-initial-letter: 2;
  initial-letter: 2;
  margin-right: 0.2em;
  color: red;
}

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.
You're basically doing a boxed letter, there, Doits, aren't you? Can you show me a different letter that isn't boxed?

Hitch
Hitch is offline   Reply With Quote
Old 05-19-2019, 01:09 AM   #10
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 5,873
Karma: 26679693
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Aura One, Aura H2O, Aura HD, Nexus 7 HD, iPad Air, Tolino epos
Quote:
Originally Posted by Doitsu View Post
There's a new initial-letter CSS rule that'll make creating drop caps much easier.

For example:
Spoiler:
Code:
h1 + p::first-letter {
  -webkit-initial-letter: 2;
  initial-letter: 2;
  margin-right: 0.2em;
  color: red;
}
One minor nit is that if you have any text between the h1 header and the paragraph where you want the drop cap, it will receive the drop cap instead.

<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>
DNSB is offline   Reply With Quote
Old 05-19-2019, 03:15 AM   #11
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 4,554
Karma: 14554601
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Hitch View Post
Can you show me a different letter that isn't boxed?
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.)

Quote:
Originally Posted by DNSB View Post
One minor nit is that if you have any text between the h1 header and the paragraph where you want the drop cap, it will receive the drop cap instead.
I didn't mention this issue, because I assumed that it'd be obvious to ebook designers familiar with pseudo selectors.
Doitsu is offline   Reply With Quote
Old 05-19-2019, 07:58 AM   #12
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 2,840
Karma: 26152793
Join Date: Nov 2011
Location: Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
Quote:
Originally Posted by Doitsu View Post
There's a new initial-letter CSS rule that'll make creating drop caps much easier.
Amazon's Enhanced Typesetting does drop caps in a similar way to initial-letter. During conversion to KFX format if the book is coded in a way that appears to be trying to produce a drop cap then kfxgen removes the original drop cap coding and replaces it with:

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.
jhowell is offline   Reply With Quote
Old 05-19-2019, 08:09 AM   #13
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 4,554
Karma: 14554601
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by jhowell View Post
Amazon's Enhanced Typesetting does drop caps in a similar way to initial-letter. During conversion to KFX format if the book is coded in a way that appears to be trying to produce a drop cap.
Do you happen to know what CSS rule(s) will trigger drop cap processing?

Quote:
Originally Posted by jhowell View Post
(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.)
AFAIK, it's only supported by Safari.
Doitsu is offline   Reply With Quote
Old 05-19-2019, 12:49 PM   #14
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 1,771
Karma: 11819190
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
Quote:
Originally Posted by DNSB View Post
One minor nit is that if you have any text between the h1 header and the paragraph where you want the drop cap, it will receive the drop cap instead.

<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>
I think that was just the example he used. You dont have to use h1 + p as the selector you could use any selector. eg:

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>
Turtle91 is offline   Reply With Quote
Old 05-19-2019, 01:00 PM   #15
PoP
 curly᷂͓̫̙᷊̥̮̾ͯͤͭͬͦͨ ʎʌɹnɔ
PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.PoP ought to be getting tired of karma fortunes by now.
 
PoP's Avatar
 
Posts: 2,476
Karma: 39499999
Join Date: Dec 2010
Location: ♁ ᴺ₄₅°₃₀' ᵂ₇₃°₃₇' ±₆₀"
Device: K3₃.₄.₂ PW3₅.₁₀.₃ PW4
Quote:
Originally Posted by Doitsu View Post
...
AFAIK, it's only supported by Safari.

And seemingly not even on Safari 5.1.7, the outdated last version for Windows.

Click image for larger version

Name:	Safari5.1.7.png
Views:	23
Size:	65.9 KB
ID:	171508
PoP is online now   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 08:13 PM.


MobileRead.com is a privately owned, operated and funded community.