strange dropcap behavior with/without merged xhmtl

[rjwse@aol.com]

h1 ~ p:first-of-type, /*use for split xhtml */
h2 + p /*use for merged xhtml*/ {
text-indent: 0;
/*unindents first p following every h1*/}
h1 ~ p:first-of-type:first-letter, /*use for split xhtml*/
h2 + p:first-letter /*use for merged xhtml*/ {
color: red;
font-size: 3em;
float:none;
line-height: 0.5em;
/*float:none makes TALLcap*/}
If you split xhtml segments at every <h1> you can use the pseudo code to create dropcaps at the first letter of the first <p> following every <h1> when converting to PDF. If the xhtml segments are merged into a single file (to avoid page breaks before <h1>) then the pseudo code does not function and there are no dropcaps. Of course, normally, you would NOT merge the <h1> xhtml segments; I did that to prevent page breaks before every <h1>. However, if you also have <h2> subchapters you may actually want to prevent page breaks between every <h2>. If so, the above code for <h2> is a "work around" which lets you make drop caps no matter if the xhtml segments are merged or split. These are TALLcaps because dropcaps (float:left) are not well behaved. Best regards, Pop

[JSWolf]

You have at least two thing wrong here. The first is that the blue box is too close to the top of the first letter. Next is that the indent is ridiculously large.

[davidfor]

Originally Posted by JSWolf

You have at least two thing wrong here. The first is that the blue box is too close to the top of the first letter. Next is that the indent is ridiculously large.

As rjwse@aol.com is trying to work out why the drop-caps isn't working, I'd say that is part of the reason the blue box is to close to the first letter. As to the indent, that's a personal style thing and while it is bigger than I tend to use, it isn't "ridiculously large".

@rjwse@aol.com: We need to see the page code, then we can try it ourselves. Create an epub that has the code you are using in the separate pages and with merged pages. Then we can see what is actually being done and maybe experiment.

[rjwse@aol.com]

I am enclosing an epub. The epub is best looked at in the calibre editor. I also have a matching video, but cannot upload to this site, as it is MKV. Instead I uploaded the matching video to youtube. The name is "dropcapvideo" https://youtu.be/8jh8RzaF72M Best regards, Pop

[Brett Merkey]

@rjwse: Your file can challenge some machines. You reference css files which do not exist but Calibre tries to retrieve anyway. In addition, your active css file has text which you must have meant to include in comments. I'm sure this also made Calibre work a bit hard.

I eliminated most of your code and split on H1 tags. Then I merged. I see what you mean. At least I probably expected the behavior you did. However, I did not find in the W3C spec that this :first-of-type behavior is wrong.

I tested this by changing the H1 tags to H2, beginning at the end of the file. I also changed the rule in the css file to H2. No dropcaps until I had changed the very first H1 to H2 (!) Apparently the structure is interpreted to mean the first-of-type of ALL p siblings, not just those related to any particular OTHER sibling. This appears to agree with W3C specs, even tho they are somewhat vague on this.

As I understand it, the definition of :first-of-type trumped your use of the general sibling combinator.

[kovidgoyal]

Basically the problem is that :first-of-type applies to the entire CSS selector, that is (h1 ~ p) so it only applies to the first h1 in the file. Which is why splitting the file works, as it means there is only one h1 in each file.

The simplest solution is to simply wrap the content after each h1 in a <div>. Something like,

<h1>Title</h1>
<div>
<img><img>blah blah
<p>Drop caps</p>
<p> other para</p>
</div>

Then use a adjacent combinator, something like

h1 + div p:first-of-type { color: red }

The trick here is that first of type now only applies to the p not to the h1 + div (at least if I remember my CSS operator precedence rules correctly, try it and see)

[kovidgoyal]

Here's a full example:

<h1>title</h1><div><span>xx</span><p>magic</p><p>other</p>
<h1>title</h1><div><span>xx</span><p>magic</p><p>other</p>

h1 + div p:first-of-type {
  color: red;
}

this should result in *both* magic words being red, and only those.

[rjwse@aol.com]

I cannot thank you enough for that explanation. This is the code I used:
h1 + div p:first-of-type {
text-indent: 0;}
h1+ div p:first-of-type:first-letter {
font-size: 3em;
float: none;
line-height: 0.5em;}
However, there is still a tiny problem. If I use float:none TALLcaps are produced (in correct locations). If I use float:left DROPcaps will wander away from the correct location if they are behind half-width images.

[rjwse@aol.com]

Thank you for that information. I did not know first-of-type took precedence.

[JSWolf]

With the new revised code, how does it work with ADE 2.0.1?

[rjwse@aol.com]

I am not familiar with ADE 2.0.1and am only using CSS and xhtml inside of the editor of calibre.

[deback]

If you don't care if the first capital letter drops or not, here is a simple .css code for dropcap:

.dropcap {
display: inline;
font-weight: bold;
font-size: 1.66667em;
line-height: 1.2;
}

It works every time, looks nice, is simple, and never gets messed up. I use the following html code:

<p class="noindent"><span class="dropcap">M</span>text continues here...

And it's easy to add the <span class="dropcap"> and corresponding </span> using a Regex search and replace.

[rjwse@aol.com]

I tried it and it works very well! I thank you for that. I copied and pasted your code into the calibre editor "create/edit snippets" with the snippet trigger "dc" (enabled by ctrl-j) in order to use it anywhere. Could you please show me how to do "a Regex search and replace" to add in this code? Best Regards, Pop

[deback]

You're welcome!

This is how I usually use Regex to add the "dropcap" code (be sure to check the "case sensitive" box and change the class to whatever is used in your file for the first paragraph in each chapter and change the "h1" to whatever is used in your file):

Search:

</h1>\s+<p class="noindent">([A-Z])


Replace:

</h1> <p class="noindent"><span class="dropcap">\1</span>


Then I also do this (to add the beginning quotation mark, if any):

Search:

</h1>\s+<p class="noindent">([“])

Replace:

</h1> <p class="noindent"><span class="dropcap">\1</span>


Then click the "Beautify Files" icon to arrange all the codes in the file to be spaced nicely.

I'm sure someone probably has a better way to do this, but I try to keep things simple. The above codes won't work if <h?> is not used for the chapter heading. In that case, you would need to do something a little different using Regex, or you might not be able to add a dropcap using Regex (as far as I know...like when "calibre1" or similar class is used for the class for every line in the file, including the chapters, etc).

[rjwse@aol.com]

Wow! That works really good. I copied and pasted it into the calibre editor in the Saved Searches box so that I don't have to reinvent the wheel each time. Thank you. Best regards, Pop