The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Drop cap with Small Caps first word & CMS

  • # July 11, 2013 at 12:03 pm

    So I can manually do this –

    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?

    # July 11, 2013 at 12:12 pm

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

    # July 11, 2013 at 12:16 pm

    Found this on Stack Overflow

    Dunno if it will help.

    # July 11, 2013 at 12:27 pm

    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?

    # July 11, 2013 at 12:30 pm

    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…

    # July 11, 2013 at 12:35 pm

    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…

    # July 11, 2013 at 12:40 pm

    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.

    # July 11, 2013 at 3:29 pm

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

    [Photo]( “”)

    # July 11, 2013 at 4:12 pm

    This reply has been reported for inappropriate content.

    …and nothing wrong with doing so. Funny thing is, design is subject, and different people prefer different styles.

    # July 11, 2013 at 6:19 pm

    That’s clearly what matters.

    Good luck, Dave.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed