06-28-2018, 06:30 PM | #31 |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Best method for Drop Caps?
Sometime ago (about two and a half years) I had developed a method for Drop Caps for "all e-readers" (epub and mobi). With that method, no matter the font-size or the font family choosen by the reader, the Drop Cap would be consistent. Since I don't have all kind of ereaders, I had tested the respective epub with ADE (2, 3 & 4), Kindle Previewer (2.9x), Kindle for Android and my own Kindle device with very good results. All of you can check the respective epub below (attached to this post).
Recently, because of my issue with Drop Caps (Drop Caps with a symbol before) with the new Amazon format (.kfx) I went back to test that method with Kindle Previewer 3.2x. Again, the results were good, BUT KP3 -with that method- didn't generate "enhanced typesetting". And I wanted enhanced typesetting After a lot of trial and error, very recently I could develop a new method, again based in .svg images, that WORKS with kfx and enhanced typesetting. I don't know if my experiments are representative, but IMHO and FWIW, it's not possible to have consistent results by working only with .css properties to handle Drop Caps. The only way I found was to use images, and for this case, svg images. |
06-28-2018, 06:30 PM | #32 | |
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:
Hitch |
|
Advert | |
|
06-28-2018, 06:55 PM | #33 |
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
|
...FWIW...just throwing in my .02 cents.
If you are using a newer device then it'll likely support pseudo-elements. This makes the CSS and tags much simpler - see below. Of course you can adjust the CSS as desired for your preferences and it sometimes isn't supported by older devices. Also, IMHO, it doesn't treat leading punctuation as well as I'd like. Leading punctuation follows the same styling as the initial letter itself. eg. An open quote symbol would be 3 times as large (font-size:3em) /bold/italic etc as the first letter. I'm used to it, but it would be nice to have a built-in styling option for that frequent occurrence. Code:
/* First Para in lieu of Drop Caps */ p.first {text-indent:0; font-size:1em; line-height:1; clear:both} p.first::first-letter {font-family:serif; font-size:3em; font-weight:bold; float:left; margin:-.1em .05em -.1em .1em} p.first::first-line {font-variant:small-caps; font-size:1.15em} HTML: <p class="first">Just type a normal first paragraph without the requirement to add <span> tags. The device will automagically adjust formatting to apply only to the first-letter and first-line of the paragraph - no matter how wide the display is, only the first line is small caps.</p> Last edited by Turtle91; 06-28-2018 at 07:01 PM. |
06-28-2018, 10:10 PM | #34 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
Nice contribution to those who need it. |
|
06-28-2018, 10:18 PM | #35 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
|
|
Advert | |
|
06-29-2018, 09:15 AM | #36 |
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
|
Last comment:
Both Turtle's and Ruben's solutions are good, but never forget that you have to create fallback coding for the KF7 and older devices, which of course, support NONE of this. Hitch |
06-29-2018, 12:22 PM | #37 |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Definitive Solution??? without using line-height
I've found a way to make it work for any line-height the user specify on their device
Here's an example for 3 lines: HTML <p><span class="dropcaps"><br/><span class="three">L</span></span><br/>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> CSS @charset "utf-8"; *{margin:0%;padding:0%;border-width:0;} html, body{height:100%;} body *{line-height:inherit;} p{text-align:justify;} .dropcaps{ float:left; } .three{ font-size:2.916666666666667em; } Come on, people of the world! Let's find out together how to make this Drop Caps work on all devices!!! |
06-29-2018, 02:03 PM | #38 |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Ahhh! For this time I was a step ahead of you Did you open my epub with Kindle DX or Kindle 2? When you do that, you'll be surprised because this time I took in count the K7 format and I wrote the fallback coding
|
06-29-2018, 02:09 PM | #39 | |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
html, body{height:100%;} |
|
06-29-2018, 02:38 PM | #40 | |
Enthusiast
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
|
Quote:
|
|
06-29-2018, 02:52 PM | #41 | |
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:
I know that YOU did. I was simply reminding the others that they need to, as well. :-) You always SAY "all" Ruben, and I know you don't mean to, but it's a teeny weeny bit misleading, for newbs. Hitch |
|
06-29-2018, 05:27 PM | #42 | |
Guru
Posts: 696
Karma: 150000
Join Date: Feb 2010
Device: none
|
Quote:
Albert |
|
06-29-2018, 08:36 PM | #43 | |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Below you can check the respective epub. Regards Rubén Last edited by RbnJrg; 06-29-2018 at 08:56 PM. |
|
06-30-2018, 10:12 AM | #44 |
Grand Sorcerer
Posts: 6,206
Karma: 16228558
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
As a frequent user of text-to-speech on most of my epubs, I'm afraid using images to replace text is a big thumbs-down from me
|
06-30-2018, 11:28 AM | #45 |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
Tags |
css, drop caps |
|
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 |