9 kinds of TALLcaps/DROPcaps - Page 2

thiago.eec · 03-03-2020, 07:31 PM

Quote:

Originally Posted by 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!

If we think of real books, it is common to see a certain pattern for headings. So, you could use something like this to create dropcaps, without using classes:

Code:

h1 + p::first-letter {
  font-size: 3.5em;
  float: left;
  line-height: 1em;
  margin-bottom: -0.284em;
  margin-right: 0.05em;
  margin-top: -0.16em;
}

If you have something else after the h1, maybe an hr, or an img, just add it:

Code:

h1 + hr + p::first-letter {
  css code here
}

This would work on multiple h2 on a single file either, as long as they all follow the pattern.

rjwse@aol.com · 03-03-2020, 09:44 PM

I find it very easy to use Regex to find and replace all first letters at the beginning of each chapter.
................
That sounds good. Can you share?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Would these dropcaps work for Kindle formats?	Klip	Kindle Formats	0	04-11-2014 03:30 AM
Alphabet for DropCaps	crutledge	Workshop	23	12-05-2013 04:34 PM
AZW3 and dropcaps	Jeff L	Conversion	9	01-21-2013 10:12 PM
Dropcaps code wanted	JSWolf	ePub	22	09-19-2012 03:31 AM
CSS / dropcaps	Oldpilot	Sigil	49	09-17-2012 10:44 AM

03-03-2020, 09:44 PM	#17
rjwse@aol.com Addict Posts: 337 Karma: 2267708 Join Date: Dec 2013 Location: LaVernia, Texas Device: kindle epub readers on android	I find it very easy to use Regex to find and replace all first letters at the beginning of each chapter. ................ That sounds good. Can you share?

Advert