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, 06:30 PM   #31
RbnJrg
Guru
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: 885
Karma: 3273785
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.
Attached Files
File Type: epub DropCap for all eReaders.epub (3.4 KB, 20 views)
RbnJrg is online now   Reply With Quote
Old 06-28-2018, 06:30 PM   #32
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: 6,782
Karma: 62512628
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 Wlan View Post
For those who want to test, this code should work on the vast majority of devices

CSS:

@charset "utf-8";
*{margin:0%;padding:0%;border-width:0;}
html{height:100%;}
body{height:100%;line-height:1.2;}
body *{line-height:inherit;}
p{text-align:justify;text-indent:6.4mm;}
.removeti{text-indent:0%;}

/* 2 Lines(2.333em) Drop Caps for line-height 1.2 Example */
span.dropcaps2{
float:left;
font-size:1.944166666666667em;
height:1.2em;
line-height:1.2em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}

/* 3 Lines(3.5em) Drop Caps for line-height 1.2 Example */
span.dropcaps3{
float:left;
font-size:2.916666666666667em;
height:1.2em;
line-height:1.2em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}

/* 4 Lines(4.667em) Drop Caps for line-height 1.2 Example */
span.dropcaps4{
float:left;
font-size:3.889166666666667em;
height:1.2em;
line-height:1.2em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}

<snippage>
Am I hallucinating, or do I see the very exact same line-height CSS, on the Body tag, that Kindlegen removed, from the test MOBI?

Hitch
Hitch is online now   Reply With Quote
Advert
Old 06-28-2018, 06:55 PM   #33
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,646
Karma: 11766398
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
...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
&lt;span&gt; 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>
Attached Thumbnails
Click image for larger version

Name:	drop.PNG
Views:	46
Size:	16.7 KB
ID:	164719  

Last edited by Turtle91; 06-28-2018 at 07:01 PM.
Turtle91 is offline   Reply With Quote
Old 06-28-2018, 10:10 PM   #34
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by RbnJrg View Post
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.
Thanks!

Nice contribution to those who need it.
Wlan is offline   Reply With Quote
Old 06-28-2018, 10:18 PM   #35
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by Turtle91 View Post
...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
&lt;span&gt; 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>
Yes, thats is much better. I just tried to keep the maximum compatibility possible.
Wlan is offline   Reply With Quote
Advert
Old 06-29-2018, 09:15 AM   #36
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: 6,782
Karma: 62512628
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
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
Hitch is online now   Reply With Quote
Old 06-29-2018, 12:22 PM   #37
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
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!!!
Wlan is offline   Reply With Quote
Old 06-29-2018, 02:03 PM   #38
RbnJrg
Guru
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: 885
Karma: 3273785
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Hitch View Post
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
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
RbnJrg is online now   Reply With Quote
Old 06-29-2018, 02:09 PM   #39
RbnJrg
Guru
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: 885
Karma: 3273785
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Wlan View Post
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

Code:
<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

Code:
@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!!!
I'm afraid that
Code:
html, body{height:100%;}
is not supported by several ereaders (and I'm speaking by experience because I wrote many solutions based on those properties). For example Sony and Nook have troubles with them; but works fine with Kindle (the devices that support .kf8 and upper).
RbnJrg is online now   Reply With Quote
Old 06-29-2018, 02:38 PM   #40
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by RbnJrg View Post
I'm afraid that
Code:
html, body{height:100%;}
is not supported by several ereaders (and I'm speaking by experience because I wrote many solutions based on those properties). For example Sony and Nook have troubles with them; but works fine with Kindle (the devices that support .kf8 and upper).
This is just a default code that I use, you can delete, it will not change anything for this Drop Caps solution.
Wlan is offline   Reply With Quote
Old 06-29-2018, 02:52 PM   #41
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: 6,782
Karma: 62512628
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 RbnJrg View Post
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
Ruben:

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
Hitch is online now   Reply With Quote
Old 06-29-2018, 05:27 PM   #42
st_albert
Guru
st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.st_albert has top level security clearance to Area 51.
 
Posts: 657
Karma: 94420
Join Date: Feb 2010
Device: none
Quote:
Originally Posted by Hitch View Post
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
Is there a way to code real drop-caps for KF7? I've always been under the impression that the best I could do was "Up-caps," Kind of like Reuben's fall-back for the svg solution except with a larger capital.

Albert
st_albert is offline   Reply With Quote
Old 06-29-2018, 08:36 PM   #43
RbnJrg
Guru
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: 885
Karma: 3273785
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by st_albert View Post
Is there a way to code real drop-caps for KF7? I've always been under the impression that the best I could do was "Up-caps," Kind of like Reuben's fall-back for the svg solution except with a larger capital.

Albert
For KF7? Maybe Hitch (she is the major expert about .mobi files in this forum) knows a way to have Drop Caps in K7 but to me, only is possible raised caps and by means of .gif images. Watch:

Click image for larger version

Name:	Image1.png
Views:	59
Size:	105.4 KB
ID:	164738

Below you can check the respective epub.

Regards
Rubén
Attached Files
File Type: epub Raised Cap for K7.epub (3.8 KB, 15 views)

Last edited by RbnJrg; 06-29-2018 at 08:56 PM.
RbnJrg is online now   Reply With Quote
Old 06-30-2018, 10:12 AM   #44
jackie_w
Wizard
jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.
 
Posts: 4,380
Karma: 9575501
Join Date: Sep 2009
Location: UK
Device: Sony PRS-350, Kobo AuraHD/Aura6"/H2O/GloHD/KA1/ClaraHD
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
jackie_w is offline   Reply With Quote
Old 06-30-2018, 11:28 AM   #45
RbnJrg
Guru
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: 885
Karma: 3273785
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by jackie_w View Post
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
This solution is ONLY for older Kindle devices. Does Kindle 2 (or Kindle DX) have text-to-speech? If they don't, then you won't worry
RbnJrg is online now   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 01:30 PM.


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