Noob preparing Mobi kindle books

[GMcG]

Correction:

Sample 1 shows what I meant about shifting lines.
But dgatwood is right when saying it's possible with steady margins. After trying several relations between font-size, line-height and margin-bottom I found this for the second example:

.dropcap {
display: block;
float: left;
font-size: 2.2em;
font-weight: bold;
line-height: 1.2em;
margin-bottom: -0.2em;
margin-top: 0em;
width: 1em (better 1.1em for serifs)
}

This seems to be acceptable.
Sorry for the confusion.

George

[RbnJrg]

The following class, it seems to work fine with any font-size:

.dropcap {
float: left;
font-size: 4em;
font-weight: bold;
margin-top: -0.2em;
margin-bottom: -0.2em;
margin-right: 5px;
}

The curious thing is that in Kindle Previewer looks ugly but in the devices (I have K4NT) looks great.

[GMcG]

@ RbnJrg: If you use the float style for an element you normally need a value for the width of this element. Perhaps the Kindle Previewer is missing it and the devices accept it?
And if this is right you don't need the margin-right attribute because this is defined by the width of it.

George

[Doitsu]

Originally Posted by GMcG

Correction:

Sample 1 shows what I meant about shifting lines.
But dgatwood is right when saying it's possible with steady margins. After trying several relations between font-size, line-height and margin-bottom I found this for the second example:

.dropcap {
display: block;
float: left;
font-size: 2.2em;
font-weight: bold;
line-height: 1.2em;
margin-bottom: -0.2em;
margin-top: 0em;
width: 1em (better 1.1em for serifs)
}

I tested your style, but was unable to reproduce your results. Can you please post your actual test file?

(@RbnJrg's style worked fine without any modifications.)

[GMcG]

The class in this example is .calibre1.

George

[Doitsu]

Originally Posted by GMcG

The class in this example is .calibre1.
George

Thanks! I just tested it, and it works fine.

[RbnJrg]

Originally Posted by GMcG

@ RbnJrg: If you use the float style for an element you normally need a value for the width of this element. Perhaps the Kindle Previewer is missing it and the devices accept it?
And if this is right you don't need the margin-right attribute because this is defined by the width of it.

George

Hi George:

The main difference between your solution and mine is that while you use the property "width", I use the property "margin-right" (also I use a negative "margin-top").

Why am I using the property "margin" instead of "width"?

Because -with the property "width"- the gap between the dropcap and the sorrounding text varies according with the dropcap letter. Is not the same if the letter is "I" or "E" or "M" o "W". By using the property margin-right (in pixels) that issue is not present. The following pictures shows better what I want to say. The first picture use your solution and the second picture, my solution.

I know that "technically", with the property "float" the normal is to assign a "width" and you are proceeding according the rules. But with the .kf8 format it seems that with "dropcaps" is better not to assign a width.

Best regards
Rubén

[GMcG]

Hello Rubén,

you are right. I have copied some of your features, modified the sizes and now it looks fine.
Thank you.

George

[RbnJrg]

Originally Posted by GMcG

Hello Rubén,

you are right. I have copied some of your features, modified the sizes and now it looks fine.
Thank you.

George

You're welcome!

[GrannyGrump]

Hey, some good discussion has been happening while my back was turned!
Thank you to everybody who has been posting, I'm learning some very good tricks.