Quote:
Originally Posted by AS7
@Turtle91
That's gold! Thank you for posting this visual demo!
I'd definitely buy your course or your templates 
Just a question: for the line "This is the first paragraph in the chapter with a drop-cap or other special styling", how did you... hmm... well how did you form <p class="first"> to get this result? |
lol
I intentionally didn't include my formatting because I didn't want to distract from the point I was making. You'll find that there are many different opinions here on what is "the one true way" of styling your work. Some people have good points, some are just straight up opinion, or their reasons only apply to old devices that I don't particularly care about. My reading app of choice is very good about supporting the css standards, so I don't have a problem using css the way it was intended. Some devices/apps may not support css as well, so you would have to provide fallback styling and/or media queries to make sure it works on your target device(s).
I got that styling to work by using css
pseudo-elements ::first-line and ::first-letter with the following:
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:
<p class="first">This is the first paragraph in the chapter.</p>
You can obviously substitute your own styling choices as you desire.
Cheers!
Edit: One thing I don't like about use of "first-letter" is that it includes any punctuation with the first letter styling. Sometimes that can be distracting. eg
“This is the first...
I've gotten used to it, but I wish the powers that be would fix that.