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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-28-2018, 05:01 AM   #1
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Best Way for Drop Caps

I created a method for Drop Caps.

Formula: font-size = (The height of all the lines together em) / 0.8em (line-height)

I hope it helps someone!


/* You have to use line-height on your <p> element, it changes The height of all the lines together em */

body{line-height:1.2;}
body *{line-height:inherit;}

/* 2 Lines(2.333em) Drop Caps for line-height 1.2 Example */

span.dropcaps{
float:left;
font-size:2.91625em;
height:0.8em;
line-height:0.8em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}

/* 3 Lines(3.5em) Drop Caps for line-height 1.2 Example */

span.dropcaps{
float:left;
font-size:4.375em;
height:0.8em;
line-height:0.8em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}

/* 4 Lines(4.667em) Drop Caps for line-height 1.2 Example */

span.dropcaps{
float:left;
font-size:5.83375em;
height:0.8em;
line-height:0.8em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}

HTML:

<p><span class="dropcaps">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a nunc ac nibh venenatis aliquet. Cras posuere, dolor eget aliquet lobortis, lorem quam viverra purus, non pretium urna tortor ac neque. Fusce iaculis justo eget luctus mattis. Pellentesque finibus nisi eu aliquam porta. Nam ut pharetra ligula, eget venenatis ex. Ut vel urna elementum, tincidunt quam at, auctor ipsum. Suspendisse sagittis metus non ante ultrices lacinia. Morbi quis orci erat. Mauris sed sapien maximus, aliquam mauris sed, ornare ante. Donec in ultricies sapien, sed aliquam est. Vivamus tristique sapien a dolor tincidunt tempor. Cras pretium sagittis nulla, in suscipit libero feugiat auctor. In ac dui id velit porta aliquam eget vitae eros.</p>
Wlan is offline   Reply With Quote
Old 06-28-2018, 05:15 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: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Some people would object to having a line height imposed on them by the publisher.

Until the ePub standard or Amazon introduce semantic coding for drop caps, I think they'll always be a bit hit and miss.
pdurrant is offline   Reply With Quote
Advert
Old 06-28-2018, 05:34 AM   #3
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by pdurrant View Post
Some people would object to having a line height imposed on them by the publisher.

Until the ePub standard or Amazon introduce semantic coding for drop caps, I think they'll always be a bit hit and miss.
pdurrant,

If you add an explicit line-height to elements, your CSS may break Kindle’s and Kobo’s user setting. By adding it to body and letting elements inherit from it, this problem is solved.

source: https://friendsofepub.github.io/eBookTricks/
Wlan is offline   Reply With Quote
Old 06-28-2018, 05:34 AM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,660
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
The problem with drop caps is they are very font specific. I can use different fonts with different default line heights. Also, with a Kobo Reader, people can change the line height as they want with the line height slider. So unless rop caps can be written so they adjust, the solution is to not use them.
JSWolf is offline   Reply With Quote
Old 06-28-2018, 05:42 AM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,660
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Wlan View Post
pdurrant,

If you add an explicit line-height to elements, your CSS may break Kindle’s and Kobo’s user setting. By adding it to body and letting elements inherit from it, this problem is solved.

source: https://friendsofepub.github.io/eBookTricks/
No, the problem is not solved. The problem is made even worse. I don't want a forced line height when I read ePub. I want to use a line height I like. With Kobo Readers, you can change the line height as long as the lien height is not forced in CSS.

As is said many times, don't bother with drop caps, they don't work well enough often enough. Also, if I was to change the font, it's quite possible that could botch up the drop caps as well.
JSWolf is offline   Reply With Quote
Advert
Old 06-28-2018, 05:55 AM   #6
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by JSWolf View Post
The problem with drop caps is they are very font specific. I can use different fonts with different default line heights. Also, with a Kobo Reader, people can change the line height as they want with the line height slider. So unless rop caps can be written so they adjust, the solution is to not use them.
JSWolf,

I'm not saying that this is a definitive solution, just a better way to use Drop Caps.

You're right to say that each font has a different height and a different line-heigth.

According to Apple, line-height corresponds to a maximum of 80% of the font size, which is why I used line-height: 0.8em.
Wlan is offline   Reply With Quote
Old 06-28-2018, 06:07 AM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,660
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Wlan View Post
JSWolf,

I'm not saying that this is a definitive solution, just a better way to use Drop Caps.

You're right to say that each font has a different height and a different line-heigth.

According to Apple, line-height corresponds to a maximum of 80% of the font size, which is why I used line-height: 0.8em.
I don't mind the line height for the drop cap. What I object to is using a line height for the main text to force it to work with the drop cap. I use a tight line height and a lot of drop caps don't work with that. Most require a larger line height.

Last edited by JSWolf; 06-28-2018 at 06:10 AM.
JSWolf is offline   Reply With Quote
Old 06-28-2018, 06:25 AM   #8
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by JSWolf View Post
I don't mind the line height for the drop cap. What I object to is using a line height for the main text to force it to work with the drop cap. I use a tight line height and a lot of drop caps don't work with that. Most require a larger line height.
I get it.

I tested this code with several different fonts and it worked, if you want to test it was the best solution I found.

Also, I used the Element Inspector to find The height of all the lines together em according to the number of lines I wanted based on my font-family and font-size. This ensured that the Drop Caps did not exceed the size for the amount of lines I wanted.
Wlan is offline   Reply With Quote
Old 06-28-2018, 06:30 AM   #9
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: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
It's certainly possible to have a drop cap look nice for a specific font and body-text line height.

What is not currently possible (except, perhaps, with Amazon's KFX format, I haven't checked) is to define a drop cap that is guaranteed to look good with the user's choice of font and line height.
pdurrant is offline   Reply With Quote
Old 06-28-2018, 06:41 AM   #10
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by pdurrant View Post
It's certainly possible to have a drop cap look nice for a specific font and body-text line height.

What is not currently possible (except, perhaps, with Amazon's KFX format, I haven't checked) is to define a drop cap that is guaranteed to look good with the user's choice of font and line height.
What makes this method interesting is that line-height is usually is about 20% larger than the font size.

Source: http://smad.jmu.edu/shen/webtype/lineheight.html

That is why with these calculations it will look nice with most of the fonts.

But you're right, they are still to create a definitive solution that will be compatible with all fonts and devices.
Wlan is offline   Reply With Quote
Old 06-28-2018, 08:05 AM   #11
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: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by Wlan View Post
What makes this method interesting is that line-height is usually is about 20% larger than the font size.
I agree that in printed books and on many web sites, line height is about 20% larger. e.g. 10pt on 12pt.

But when designing an ebook one should bear in mind that users can (or should be able to) set the line height to their preferred value, whether that's 100% or 200%.
pdurrant is offline   Reply With Quote
Old 06-28-2018, 09:13 AM   #12
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by pdurrant View Post
I agree that in printed books and on many web sites, line height is about 20% larger. e.g. 10pt on 12pt.

But when designing an ebook one should bear in mind that users can (or should be able to) set the line height to their preferred value, whether that's 100% or 200%.
Yes, the solution would be to find a way to change the font size of the Drop Caps based on line-height, I do not know if this is possible.
Wlan is offline   Reply With Quote
Old 06-28-2018, 09:33 AM   #13
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: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Wlan View Post
What makes this method interesting is that line-height is usually is about 20% larger than the font size.

Source: http://smad.jmu.edu/shen/webtype/lineheight.html

That is why with these calculations it will look nice with most of the fonts.

But you're right, they are still to create a definitive solution that will be compatible with all fonts and devices.
AND, what happens when you put this file on a Paperwhite, Voyage, or Oasis and change it from Publisher font, please?

ETA: And, as we all know, setting line-heights on the body is strictly verboten at Amazon, so....not sure how this would stand up. I realize it's the ePUB forum, but...{shrug}.

Hitch

Last edited by Hitch; 06-28-2018 at 09:36 AM. Reason: ETA comment about Amazon...
Hitch is offline   Reply With Quote
Old 06-28-2018, 09:45 AM   #14
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by Hitch View Post
AND, what happens when you put this file on a Paperwhite, Voyage, or Oasis and change it from Publisher font, please?

ETA: And, as we all know, setting line-heights on the body is strictly verboten at Amazon, so....not sure how this would stand up. I realize it's the ePUB forum, but...{shrug}.

Hitch
The only cases that will not work will be in the case where the font was created with the size greater than 80% of the line-height which is very rare.

It would be great to take a test to prove the effectiveness, I do not have these devices.
Wlan is offline   Reply With Quote
Old 06-28-2018, 10:01 AM   #15
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: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Wlan View Post
The only cases that will not work will be in the case where the font was created with the size greater than 80% of the line-height which is very rare.

It would be great to take a test to prove the effectiveness, I do not have these devices.
If you want to provide the file, I'll test it. The other thing I feel compelled to point out is that you should run the MOBI file through the KDP, download the resulting "preview mobi" and crack that open to see how your CSS survived the trip. I've seen mobi files undergo significant line-height modifications, at the KDP.

Hitch
Hitch is offline   Reply With Quote
Reply

Tags
css, drop caps

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Drop Caps question holdit Sigil 11 08-24-2014 08:01 AM
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 09:47 PM.


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