I'd like to replicate what my designer was doing for me with an initial drop cap for chapter opens. This is relatively easy in the simple case, with CSS like what is below. However, it fails for the case where the text starts with an opening quote. In that case, the first-letter selector makes both the quote and the alphabetic letter large. The quote should be small. An example of the right way to do it is here: http://theworldsgreatestbook.com/book-design-part-6/

I tried using a span instead to select the first alphabetic character, but I ending up with it floating left of the opening quote.

Any suggestions?

p.first-paragraph:first-letter {
float: left;
font-weight: 500;
font-size: 34pt;
line-height: 30pt;
padding-top: 1pt;
padding-right: 1pt;
padding-left: 0pt;
}

I have a solution that requires preprocessing the HTML to detect the opening code and wrap in a span.

Sample post-processed HTML:

<p class="first-paragraph"><span class="opening-quote">“</span><span class="drop-cap letter-h">H</span>ow’s the project going?” David asked.</p>

Relevant CSS:
span.drop-cap {
float: left;
font-weight: 500;
font-size: 36pt;
line-height: 30pt;
padding-top: 2pt;
padding-right: 1pt;
padding-left: 0pt;
}

span.opening-quote {
float: left;
font-weight: 500;
font-size: 18pt;
padding-top: 1pt;
}

Edited 30 Jul 2014 by hertling

Right, that looks like the best approach for now.