06-28-2018, 05:01 AM | #1 |
Enthusiast
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> |
06-28-2018, 05:15 AM | #2 |
The Grand Mouse 高貴的老鼠
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. |
Advert | |
|
06-28-2018, 05:34 AM | #3 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
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/ |
|
06-28-2018, 05:34 AM | #4 |
Resident Curmudgeon
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.
|
06-28-2018, 05:42 AM | #5 | |
Resident Curmudgeon
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:
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. |
|
Advert | |
|
06-28-2018, 05:55 AM | #6 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
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. |
|
06-28-2018, 06:07 AM | #7 | |
Resident Curmudgeon
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:
Last edited by JSWolf; 06-28-2018 at 06:10 AM. |
|
06-28-2018, 06:25 AM | #8 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
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. |
|
06-28-2018, 06:30 AM | #9 |
The Grand Mouse 高貴的老鼠
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. |
06-28-2018, 06:41 AM | #10 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
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. |
|
06-28-2018, 08:05 AM | #11 | |
The Grand Mouse 高貴的老鼠
Posts: 71,406
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
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%. |
|
06-28-2018, 09:13 AM | #12 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
|
|
06-28-2018, 09:33 AM | #13 | |
Bookmaker & Cat Slave
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:
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... |
|
06-28-2018, 09:45 AM | #14 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
It would be great to take a test to prove the effectiveness, I do not have these devices. |
|
06-28-2018, 10:01 AM | #15 | |
Bookmaker & Cat Slave
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:
Hitch |
|
Tags |
css, drop caps |
Thread Tools | Search this Thread |
|
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 |