View Single Post
Old 08-06-2022, 08:38 AM   #27
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,369
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Just to throw my .02 in there:

I use dropcaps almost all the time. The app I use does an admirable job following the css. I hate the idea of coding for the lowest common denominator and using hacks to make sure some ancient device can still function. Devices are not that expensive... and... I don't need to worry about selling the books I clean up.

I have css for the entire first paragraph, not just the first letter. That solves most of these issues regarding line height/float/spacing, etc.

Code:
CSS:
p.first {
  text-indent: 0;
  font-size: 1em;
  clear: both;
}

p.first::first-letter {
  font-family: serif;
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin: -.1em .1em;
}

p.first::first-line {
  font-variant: small-caps;
  font-size: 1.15em;
}

HTML:
<h3>Chapter 42 <span>This is the subtitle</span></h3>
<p class="first">This is the first paragraph in the chapter.</p>
<p>This is a normal paragraph that is much longer so I can make the point of the indent and other stuff being different.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
Of course you may need to adjust this for particular circumstances (and we all know Jon isn't going to approve of something) but this is just an example template I start with....
Attached Thumbnails
Click image for larger version

Name:	Screenshot 2022-08-06 083805.png
Views:	89
Size:	66.2 KB
ID:	195655  
Turtle91 is offline   Reply With Quote