[JSWolf]

Originally Posted by Turtle91

I'm not sure what you mean by 'ridiculously convoluted code'??


This is as simple as it gets:

.first::first-line {font-variant:small-caps}

 <p class="first">Betsy said, 'I love the simplicity of this first paragraph
 in a new chapter.'</p>

compared with putting spans around everything...

.first {font-size:.8em; text-transform: uppercase;}
.large {font-size:1em}
.small {font-size:.9em}


<p><span class="first"><span class="large">B</span><span class="small">etsy said, '
</span><span class="large">I</span><span class="small"> love the simplicity</span></span>
  of this first paragraph in a new chapter.'</p>

And then the length of text you want to apply the effect to is just a guess using spans...most times you only get a few words with the effect and it looks really silly. Pseudo selectors like ::first-line will automagically apply the effect to the entire first line no matter how short, or long, it is.

You don't need the text transform to uppercase. Just have the text already be uppercase. Also, it doesn't work in all cases. So it's better for compatibility to use <span>. You also don't need a .small class as <small> is already .9em.

But seriously, why do they need @media queries? At least one breaks in older RMSDK. And they are not needed anyway. Other then Kindle @media queries, I've never seen any in a novel other then from Standard eBooks.