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?
Could you not wrap the whole first word in a span and then use `first-letter` on the span?
Found this on Stack Overflow
Dunno if it will help.
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?
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…
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…
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.
It was actually inspired by the drop caps in “Type Matters”. I quite like it…
…and nothing wrong with doing so. Funny thing is, design is subject, and different people prefer different styles.
That’s clearly what matters.
Good luck, Dave.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".