Best Way for Drop Caps

[RbnJrg]

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.

[Hitch]

Originally Posted by Wlan

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

[Turtle91]

...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.

/* 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>

[Wlan]

Originally Posted by RbnJrg

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]

Originally Posted by Turtle91

...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.

/* 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.

[Hitch]

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

[Wlan]

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!!!

[RbnJrg]

Originally Posted by Hitch

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]

Originally Posted by Wlan

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!!!

I'm afraid that

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).

[Wlan]

Originally Posted by RbnJrg

I'm afraid that

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.

[Hitch]

Originally Posted by RbnJrg

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

[st_albert]

Originally Posted by Hitch

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

[RbnJrg]

Originally Posted by st_albert

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:



Below you can check the respective epub.

Regards
Rubén

[jackie_w]

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

[RbnJrg]

Originally Posted by jackie_w

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