Css Drop Caps does not work in an Epub on a Reader

[llasram]

Originally Posted by brewt

Gettin' close - I'll add more screen shots later......

I've got something that seems to work in all the renders I've got handy. Instead of messing around with the more esoteric "display" values I'm setting a negative "text-indent" on the paragraph containing the drop cap. Modified version of the test EPUB attached showing what I mean (although other modifications are possibly necessary, as I change the properties of the .initial class).

[Jellby]

So... negative "margin-left" causes havoc and "position: relative" is not supported.

Another "trick": negative indent for the paragraph and a correspoding marging-left for the drop cap (but I'd have to alter the code for the A and L case).

EDIT: Sorry, Llasram, I didn't see your post, being in page 2.

[brewt]

1/9 3:40 pm, llasram versions attached. Any chance of getting the drop cap to drop a smidge?

Stanza included this time for fun - hardly any formatting at all in Stanza, and no hyperlinking.

Oh, one other thing I don't understand. Calibre is missing this line:

"I — The Birth of the Prince and the Pauper"

that all the other readers seem to pick up. Any ideas as to what we're seeing?

-bjc

[zelda_pinwheel]

Originally Posted by brewt

1/9 3:40 pm, llasram versions attached. Any chance of getting the drop cap to drop a smidge?

Stanza included this time for fun - hardly any formatting at all in Stanza, and no hyperlinking.

Oh, one other thing I don't understand. Calibre is missing this line:

"I — The Birth of the Prince and the Pauper"

that all the other readers seem to pick up. Any ideas as to what we're seeing?

-bjc

that means, calibre is the only one correctly rendering the code : that line is the page header, which should either be displayed as a running page header if that is supported, or not displayed at all. so far all the other displays incorrectly interpret it and include in the flow.

[Jellby]

Originally Posted by brewt

1/9 3:40 pm, llasram versions attached. Any chance of getting the drop cap to drop a smidge?

It's easy to make it drop... but it's not quite "portable", I mean that the exact positioning and size will depend on the font, line height, etc., and what looks fine in some configuration might look terrible (the drop cap overlapping the text, or huge blank spaces) in others. These settings are a compromise, something that is kind of guaranteed that won't look terrible in any configuration, at the cost of not being "perfect" in most of them.

[mtravellerh]

Originally Posted by Jellby

It's easy to make it drop... but it's not quite "portable", I mean that the exact positioning and size will depend on the font, line height, etc., and what looks fine in some configuration might look terrible (the drop cap overlapping the text, or huge blank spaces) in others. These settings are a compromise, something that is kind of guaranteed that won't look terrible in any configuration, at the cost of not being "perfect" in most of them.

The result is good enough for me. Llasram, Jellby, do you mind much if I use that code for my books with drop caps? Of course, if you find any ameliorations, please lemme know. Thanks bunches, guys. One more solution to a problem.

[Jellby]

Originally Posted by mtravellerh

Laasram, Jellby, do you mind much if I use that code for my books with drop caps?

Not at all, it's free if you like it

[brewt]

Attached are a couple more shots, 1/9 3:40 pm, llasram version, with the largest and smallest typesize selected in ADE.

The proportionality seems consistent with the positioning of the drop cap to the rest of the paragraph. So altering the code to lower the drop cap should continue to provide consistent viewing regardless of size.

The code will have to be tweaked when a different typeface is selected. Or a different porportion of initial cap to regular type size is needed.

Have I pulled the right code out here?


css:
p {
text-indent: 1em;
margin: 0;
}
p.initial {
text-indent: -0.5em;
}
span.first {
font-variant: small-caps;
}
span.drop {
font-size: 400%;
font-weight: bold;
float: left;
margin: -0.15em 0.125em 0 0;
text-indent: 0em;
line-height: 1em;
height: 1em;
}
.afterA {
text-indent: -1em;
}
.afterL {
text-indent: -1.5em;
}

xhtml for chapter 1:
<p class="initial"><span class="first"><span class="drop">I</span>n</span> the
ancient city of London, on a certain autumn day in the second quarter of the
sixteenth century, a boy was born to a poor family of the name of Canty, who
did not want him. ...</p>


xhtml for chapter 13:
<p class="afterA"><span class="first"><span class="drop">A</span>&nbsp;
heavy</span> drowsiness presently fell upon the two comrades. The King
said&mdash;</p>



(Bad Coloring Job Mine. All Mine.)


So, if I've read this right, you've got more than 1 after-the-drop-cap-code, depending on, of course, the width of the letter (I's take up less horizontal space than W's. Err, A's).

Refresh my memory - even without scripting, doesn't css support some kind of variables that could detect the width of the letter for us, so we wouldn't have to hand-tweak the after-spacing on every drop cap? (ever the lazy one, I am).


-bjc

[mtravellerh]

Originally Posted by brewt

Attached are a couple more shots, 1/9 3:40 pm, llasram version, with the largest and smallest typesize selected in ADE.

The proportionality seems consistent with the positioning of the drop cap to the rest of the paragraph. So altering the code to lower the drop cap should continue to provide consistent viewing regardless of size.

The code will have to be tweaked when a different typeface is selected. Or a different porportion of initial cap to regular type size is needed.

Have I pulled the right code out here?


css:
p {
text-indent: 1em;
margin: 0;
}
p.initial {
text-indent: -0.5em;
}
span.first {
font-variant: small-caps;
}
span.drop {
font-size: 400%;
font-weight: bold;
float: left;
margin: -0.15em 0.125em 0 0;
text-indent: 0em;
line-height: 1em;
height: 1em;
}
.afterA {
text-indent: -1em;
}
.afterL {
text-indent: -1.5em;
}

xhtml for chapter 1:
<p class="initial"><span class="first"><span class="drop">I</span>n</span> the
ancient city of London, on a certain autumn day in the second quarter of the
sixteenth century, a boy was born to a poor family of the name of Canty, who
did not want him. ...</p>


xhtml for chapter 13:
<p class="afterA"><span class="first"><span class="drop">A</span>&nbsp;
heavy</span> drowsiness presently fell upon the two comrades. The King
said&mdash;</p>



(Bad Coloring Job Mine. All Mine.)


So, if I've read this right, you've got more than 1 after-the-drop-cap-code, depending on, of course, the width of the letter (I's take up less horizontal space than W's. Err, A's).

Refresh my memory - even without scripting, doesn't css support some kind of variables that could detect the width of the letter for us, so we wouldn't have to hand-tweak the after-spacing on every drop cap? (ever the lazy one, I am).


-bjc

Being lazy myself, how does it look like if one inserts the space on pure principle? Would the I look so bad for that? I'll have to try that, but finally I'll just have to check the practical usage in a book.

I think the
p {
text-indent: 1em;
margin: 0;
}

won't work for me. I will have to define a special p class for the first paragraph as I use points to define my indent, normally (15pt) (works better for mobi making). Or could I use the points for defining the indent? Or do I have to completely rewrite my code for those drop caps, thus having to make 2 source files?

[Jellby]

Originally Posted by brewt

The proportionality seems consistent with the positioning of the drop cap to the rest of the paragraph. So altering the code to lower the drop cap should continue to provide consistent viewing regardless of size.

Yes, that's what I expected. Since the lengths are given in ems, there should be no problem changing the font size, but changing the typeface or the line spacing (which different devices may allow, or have different defaults) could be different.

So, if I've read this right, you've got more than 1 after-the-drop-cap-code, depending on, of course, the width of the letter (I's take up less horizontal space than W's. Err, A's).

More than the width of the letter, it's about the shape of the letter. If the letter does not quite reach the top right corner, I add some negative spacing for the rest of the line, otherwise the flow is a bit strange, a sort of kerning. This happens for A and L. If the drop cap would not drop, i.e, if it would extend above the first line, but not below, I would use special code for letters that don't reach the bottom right corner, like T and W.

Another thing. In my tests, with a browser, the drop cap position was affected by the negative indent (it was displaced to the left), so I had to add a matching margin-left to the span.drop definition, and that would need to be changed in the .afterA and .afterL cases... I don't know if this behavior is normal or a "bug" in my browser, tough.

[Jellby]

Originally Posted by mtravellerh

Being lazy myself, how does it look like if one inserts the space on pure principle? Would the I look so bad for that? I'll have to try that, but finally I'll just have to check the practical usage in a book.

I don't know if I follow you... There is a default spacing for all caps defined, only A and L have something "special", because of their shape.

I think the
p {
text-indent: 1em;
margin: 0;
}

won't work for me. I will have to define a special p class for the first paragraph as I use points to define my indent, normally (15pt) (works better for mobi making). Or could I use the points for defining the indent? Or do I have to completely rewrite my code for those drop caps, thus having to make 2 source files?

That is the definition for normal paragraphs, you can have whatever you want there ("text-indent: 15pt"), yes, you can use "pt" or "px" as units, I just prefer using relative units when possible, but it's true that maybe the indent should be defined in relation to the page width something like 3%, maybe? The special class for the first paragraph is already there: p.initial.

[brewt]

Hmmm. don't think we're done yet.

The Evil Empire has a surprisingly elegant solution to the drop cap problem: It's a menu item in Word, and it creates a 1-celled table with the letter (or word) larger, with text wrapping around it to the right. It's undoable/redoable, and it manages all the drop caps' typeface etc with a style.

It works ok in output html, in the epub built by and read in calibre, but not in ADE.

#########################

Here's the code, attached is a pic and the epub:

<html>

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 11 (filtered)">
<title>I</title>
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
text-indent:.2in;
font-size:12.0pt;
font-family:"Times New Roman";}
p.MsoBodyText, li.MsoBodyText, div.MsoBodyText
{margin-top:0in;
margin-right:0in;
margin-bottom:6.0pt;
margin-left:0in;
text-indent:.2in;
line-height:115%;
font-size:12.0pt;
font-family:"Times New Roman";}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>

</head>

<body lang=EN-US>

<div class=Section1>

<div>

<table cellspacing=0 cellpadding=0 hspace=0 vspace=0 align=left>
<tr>
<td valign=top align=left style='padding-top:0in;padding-right:0in;
padding-bottom:0in;padding-left:0in'>
<p class=MsoNormal style='line-height:38.55pt;page-break-after:avoid;
vertical-align:baseline'><span style='font-size:46.0pt;font-family:Arial;
color:black'>I</span></p>
</td>
</tr>
</table>

</div>

<p class=MsoNormal style='text-indent:0in'><span style='font-size:10.0pt;
font-family:Arial;color:black'>n the beginning God created the heaven and the
earth.* And the earth was without form, and void; and darkness was upon the
face of the deep. And the Spirit of God moved upon the face of the waters.* And
God said, Let there be light: and there was light. And God saw the light, that
it was good: and God divided the light from the darkness.* And God called the
light Day, and the darkness he called Night. And the evening and the morning
were the first day.</span></p>

</div>

</body>

</html>

Ideas?

#########################

Open Office's solution works more like a real css, but the code it produces isn't modifiable from within Writer, and each one is a modification of the style on-the-fly, so if you were to use it, you'd have to hack the file every place you did it, and the default makes a bad drop cap (in both the html and resultant epub) anyway.

#########################

............Lazy-boy here wants something he doesn't have to hand code......

-bjc

[llasram]

Originally Posted by brewt

The Evil Empire has a surprisingly elegant solution to the drop cap problem: It's a menu item in Word, and it creates a 1-celled table with the letter (or word) larger, with text wrapping around it to the right.

Ewwwwwww. Simple rule for if things should be a table in HTML: is the content actually a table? If no, then no. It appears MSWord creates a table here so that they can set the HTML 3.2-ish "align" attribute to "left," which has the same result as setting the CSS property "float" to "left" on a block-level element in any contemporary renderer. In other words, it achieves the same thing that all the basic previous drop-cap content does, only with 300% (or so) more evil.

[zelda_pinwheel]

Originally Posted by llasram

Ewwwwwww. Simple rule for if things should be a table in HTML: is the content actually a table? If no, then no. It appears MSWord creates a table here so that they can set the HTML 3.2-ish "align" attribute to "left," which has the same result as setting the CSS property "float" to "left" on a block-level element in any contemporary renderer. In other words, it achieves the same thing that all the basic previous drop-cap content does, only with 300% (or so) more evil.

MS Word : now with 300% more evil !!

[Jellby]

I wonder if there is a way to have reader-specific CSS code, some rules that would be applied only by ADE, or only by Calibre... that would allow to work around known bugs or limitations.