9 kinds of TALLcaps/DROPcaps

[rjwse@aol.com]

I have been interested for a long time in the best ways to visually enhance epubs by adding CSS code. I have 9 different ways of making DROPcaps and here is the first. I put in all nine of them in my snippet file and can call them up in the stylesheet.css with the trigger followed by ctrl-j to expand. This first one is one of my favorite. It requires you to put class="h" in every H tag first, but lets you mix in more than a single H tag within xhtml chunks. This one lets you follow any H tag with as many as 3 other things before the P tag. Add float:left to convert TALLcap to DROPcap.

/*
NOTE: can put any number of h tags in any single xhtml segment, but every h tag MUST have class="h"
NAME: dropcap (snippet 'dc4' into stylesheet) (put class=h in all H tabs) (can put up to 3 not(p) tags between .h & p)
TRIGGER: dc4
*/

dropcapdc4,
.h+p, 
.h+:not(p)+p,
.h+:not(p)+:not(p)+p,
.h+:not(p)+:not(p)+:not(p)+p
{text-indent:0}
dropcapdc4,
.h+p:first-letter, 
.h+:not(p)+p:first-letter,
.h+:not(p)+:not(p)+p:first-letter,
.h+:not(p)+:not(p)+:not(p)+p:first-letter
{color: red;
font-size: 2em; line-height: 0.7em; float: ;}

Best regards, Pop

[stumped]

my fav type of DROPcap is having NONE at ALL

1 reason I learned some html & CSS was so that I could effciently remove them before reading.
they add nothing to the reading experience, IMHO.

they are almost as useless as a dedication page

[rjwse@aol.com]

/*
NAME: dropcap (snippet 'dc1' into stylesheet, then type class="dc" in xhtml) (use ANYTIME for single-instance SINGLE-LETTER dc, usually after p in <p>)
TRIGGER: dc1
*/

dropcapsnippetdc1, .dc:first-letter {color:red; display: inline; font-weight:; font-size: 2em; line-height: .7; float:none;}
dropcapsnippetdc1, .dc{text-indent:0}

This one can be used one at a time anywhere, includes quotes, but is limited to single-letter. Best regards, Pop

[rjwse@aol.com]

style="text-indent:0"><span style="font-size:2em;line-height:.7;float:none;color:red">$1</span>

This lets you make multi-letter dropcaps by adding the style command to any p tag. Best regards, Pop

[JSWolf]

You aren't showing us dropcaps. You are showing us a larger first letter. And your code doesn't work well on a Kindle. Also, your code won't work on some ePub reading software when used for section breaks if the section break happens at the end/beginning of the screen.

[JSWolf]

Originally Posted by rjwse@aol.com

style="text-indent:0"><span style="font-size:2em;line-height:.7;float:none;color:red">$1</span>

This lets you make multi-letter dropcaps by adding the style command to any p tag. Best regards, Pop

That looks awful.

[rjwse@aol.com]

/*
NAME: dropcap (snippet 'dc3' into stylesheet) (put class="h" in every header tag) (dc appears in EVERY <p> not preceeded by <p>) (see dc4 to exclude intervening tags)
TRIGGER: dc3
*/

dropcapsnippetdc3, .h+p {text-indent:0}
dropcapsnippetdc3, .h+p:first-letter {color: red; font-size: 2em; line-height: 0.7em;  float: ;}

NAME: dropcap (snippet 'dc5' into stylesheet) (1st letter dc in EVERY <p> not preceeded by <p>) (includes quotes, excludes superscripts)
TRIGGER: dc5

dropcapsnippetdc5, :not(p)+p{text-indent: 0;}
dropcapsnippetdc5, :not(p) +p:first-letter{ color: red; font-size: 2em; line-height: 0.7em; float: ;}

NAME: dropcap (snippet 'dc6' into stylesheet) (works for h1 & h2 even if h1 & h2 mixed inside of one xhtml)
TRIGGER: dc6

dropcapsnippetdc6, 
h1+p, 
h1+:not(p) +p, 
h1+:not(p) +:not(p) +p,
h1+:not(p) +:not(p) +:not(p) +p,
h2+p, 
h2+:not(p) +p, 
h2+:not(p) +:not(p) +p,
h2+:not(p) +:not(p) +:not(p) +p {text-indent: 0;}  
dropcapsnippetdc6, 
h1+p:first-letter, 
h1+:not(p) +p:first-letter, 
h1+:not(p) +:not(p) +p:first-letter,
h1+:not(p) +:not(p) +:not(p) +p:first-letter,
h2+p:first-letter, 
h2+:not(p) +p:first-letter, 
h2+:not(p) +:not(p) +p:first-letter,
h2+:not(p) +:not(p) +:not(p) +p:first-letter{ color: red; font-size: 2em; line-height: 0.7em; float: ;}

/*
NOTE: similar to dc4 without requiring class="h" in h tags; only works for h1 and h2
NAME: dropcap (snippet 'dc7' into stylesheet) (can put as many as 3 non-p-tags between H tag and P)
TRIGGER: dc7
*/

dropcapdsnippetdc7,
h1~p:first-of-type,
h2+p, 
h2+:not(p) +p, 
h2+:not(p) +:not(p) +p,
h2+:not(p) +:not(p) +:not(p) +p {text-indent: 0;}
dropcapsnippetdc7, /*1st-of-type:1st-letter for h1; 1st-letter lists for h2*/ 
h1~p:first-of-type:first-letter, 
h2+p:first-letter, 
h2+:not(p) +p:first-letter, 
h2+:not(p) +:not(p) +p:first-letter,
h2+:not(p) +:not(p) +:not(p) +p:first-letter{ color: red; font-size: 2em; line-height: 0.7em; float: ;}

/*
NAME: dropcap (snippet 'dc8' into stylesheet) (only 1 <h?> tags allowed per xhtml) (not affected by intervening tags between <h?> and first <p>)(for h1, h2, & h3)
TRIGGER: dc8
*/

dropcapsnippetdc8, h1~p:first-of-type, h2~p:first-of-type, h3~p:first-of-type {text-indent: 0;}
dropcapsnippetdc8,h1~p:first-letter, h2~p:first-letter, h3~p:first-letter {color: red; font-size: 2em; line-height: 0.7em; float: ;}

NAME:dropcap (snippet 'dc9' into stylesheet) (won't work if intervening non-p tags between <h1> and <p>)
TRIGGER:dc9
dropcapsnippetdc9, h1~p:first-of-type, h2+p {text-indent: 0;}
dropcapsnippetdc9, /*1st-of-type:1st-letter for h1; 1st-letter lists for h2*/
h1~p:first-of-type:first-letter, h2+p:first-letter {color: red; font-size: 2em; line-height: 0.7em; float: ;}

All this fun stuff helped me to understand a little bit about how to use styles, classes, css, etc. I hope it helps someone. Best regards, Pop

[rjwse@aol.com]

I just made five bucks on a bet I could get a negative/nasty withing ten minutes! But I got more than one!

[BetterRed]

Interesting, but is it specifically related to calibre, wouldn't it be better to post it, and anything similar, in the epub code snippets (html / css) thread.

BR

[deback]

The code for what you want to do can be much simpler. And I would get rid of the red for sure. If you want just a larger first letter, here is a simple CSS code to do that. I've only named it "dropcap," so I can find it easily in my template file when fixing tons of dropcaps in books that need fixing.

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

[Brett Merkey]

@rjwse:

bet I could get a negative/nasty

Sucker bet, naturally enough. Clearly you are not afraid to use advanced CSS syntax but the selectors indicate you are classing the tags (not necessary, as you know) and this leads to lots of obscure code -- and a bit too much of it. Not fun to have such options.

No reason why you cannot relax a bit and work off the irreducible and simple structural code?

<h2>Chapter Title</h2>
<p>This is the first sentence and it has a nice initial cap.</p>

Then launch with sibling selectors to hook the styles:
h2 ~ p:first-of-type {}
h2 ~ p:first-of-type::first-line {}
h2 ~ p:first-of-type::first-letter {}

Kick back and focus on one result that has the qualities you want. I like large initial caps, large enough to accept text-shadow effects. This gives a good excuse to rev up the first-line pseudo-element too. Find one good elegant style, modify from there, keeping the code simple.

Seems like more fun that way...

[rjwse@aol.com]

The code for what you want to do can be much simpler. And I would get rid of the red for sure. If you want just a larger first letter, here is a simple CSS code to do that. I've only named it "dropcap," so I can find it easily in my template file when fixing tons of dropcaps in books that need fixing.

.dropcap {
display: inline;
font-weight: bold;
font-size: 2em;
line-height: 0;
}
__________________
With several of mine you do not have to add anything into the xhtml at all. The CSS puts the dropcap after, say, every H1 and H2. Others of them will put a dropcap after headers, OL, img, etc, as you like. Mine also will pick up initial quotation (but not following superscripts). If the book has a hundred chapters, you don't have to touch the text at all. It's just automatically put in. CSS will not allow a construction such as (h1 ~ p):first-of-type nor does it do 'first-of-class'. There is a proposed code (not yet implemented) called 'initial-letter' (instead of first-letter). It calculates size and drop automatically. Until it comes out combinators rule the day! Best regards, Pop

[thiago.eec]

Originally Posted by rjwse@aol.com

CSS will not allow a construction such as (h1 ~ p):first-of-type nor does it do 'first-of-class'. There is a proposed code (not yet implemented) called 'initial-letter' (instead of first-letter). It calculates size and drop automatically. Until it comes out combinators rule the day! Best regards, Pop

You are making a mistake. All those selectors are valid. About the pseudo-elements, this is their valid scope:

first-letter, first-line - CSS 2
first-of-type - CSS 3

And, about the 'initial-letter' property, as you said, it is only proposed on a Draft for CSS 3.

You can check out other selectors here.

[rjwse@aol.com]

<body>
<h2>text</h2>
<ol>text</ol>
<p>text</p>
<h2>text</h2>
<img />
<p>text</p>
</body>

h2 ~ p:first-of-type{} will change only first p.
(h2 ~ p):first-of-type {} would change all p's (it's a 'reset') but css does not allow.
Instead, add class="h" to all H2s and
.h ~ p:first-of-type {} and this will change both p's.
no such thing as first-of-class either.
The other way to accomplish both p's being changed is to split the xhtml segment into two to isolate the H2s.

Shazam!

[deback]

Originally Posted by rjwse@aol.com

The code for what you want to do can be much simpler. And I would get rid of the red for sure. If you want just a larger first letter, here is a simple CSS code to do that. I've only named it "dropcap," so I can find it easily in my template file when fixing tons of dropcaps in books that need fixing.

.dropcap {
display: inline;
font-weight: bold;
font-size: 2em;
line-height: 0;
}
__________________
With several of mine you do not have to add anything into the xhtml at all. The CSS puts the dropcap after, say, every H1 and H2. Others of them will put a dropcap after headers, OL, img, etc, as you like. Mine also will pick up initial quotation (but not following superscripts). If the book has a hundred chapters, you don't have to touch the text at all. It's just automatically put in. CSS will not allow a construction such as (h1 ~ p):first-of-type nor does it do 'first-of-class'. There is a proposed code (not yet implemented) called 'initial-letter' (instead of first-letter). It calculates size and drop automatically. Until it comes out combinators rule the day! Best regards, Pop

You still have to enter the H1s and H2s, etc. I find it very easy to use Regex to find and replace all first letters at the beginning of each chapter. I'll keep doing it my way, since it's easier, quicker, and simpler.