Drop cap with Small Caps first word & CMS

[iknowdavehouse]

So I can manually do this – http://codepen.io/iknowdavehouse/pen/vpfxz

Using – p:nth-of-type(1):first-letter for the drop cap and a span for small caps but how would I deal with this within a CMS?

Ideally I’d need to detect the length of the first word and apply the styling of the span from character 2 until the end of the first word. Possible?

[Paulie_D]

Could you not wrap the whole first word in a span and then use `first-letter` on the span?

[Paulie_D]

Found this on Stack Overflow

http://stackoverflow.com/questions/5458605/first-word-selector

Dunno if it will help.

[chrisburton]

Fake small caps using Georgia with Arial as a drop cap? Please, no.

But as a side note, you know you can use `column-count` to get that paragraph separated effect, right?

[iknowdavehouse]

Definitely a solution in there somewhere yes – got the first word sorted from that but it doesn’t like the drop cap. Very helpful though, thanks…

[iknowdavehouse]

Hey Chris, don’t worry – that was just for a quick mockup, looks nice with the web fonts I’m using (that I can’t link to in code pen)

Paragraph effect was also just a quick visual to show that I need it to only apply to the first letter / word of the first paragraph without the user having to add any spans in manually.

Thanks though, I haven’t actually used column-count before…

[chrisburton]

Which webfonts? I’m having a hard time thinking that a sans-serif drop cap with a serif as the main text type would have any sort of typographic appeal.

[iknowdavehouse]

It was actually inspired by the drop caps in “Type Matters”. I quite like it…

[Photo](http://www.creativereview.co.uk/images/uploads/2012/02/raised_drop_caps_0.jpg “”)

[chrisburton]

That’s clearly what matters.

Good luck, Dave.

[Author]

Posts