First-letter selector CSS

Question

Image:

In the picture, the text on the right is what I need to accomplish, the text on the left is what I've got.

Does anyone know a good solution for this. So far I have only been trying CSS but I will try anything.

So far my CSS is -

.single-post .spb_text_column p:first-child::first-letter{
font-size: 200%;
font-weight: bold;
vertical-align: -14px;
}

I can float the letter and that makes the space in the text go away but still the text does not wrap around the large letter. If anyone has a solution for this...Javascript, CSS, or even a Wordpress plugin would be fine. Thanks.

Answer 1

Try this:

 p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; } 

 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu. </p> 

Answer 2

Notes on Luis's answer:

You likely want to make the size of the letter = (n-1)*lineheight + fontsize, where n is a small integer.

So, for example with 15 px type, on 18 px line height you could use 33 px (2 lines) 48 px (3 lines) or 63 px (4 lines)

I played around with this for a long time. The problem: You can't depend on the font being on the target machine, and a change in font messes up the spacing -- it only has to be a few px out to look tacky.

To get it to work right you are going to have to override some of the browser settings for CSS. I also recommend using the same font as the paragraph, and change only height, weight and color.

I ended up going the other way: Keeping the baseline the same, but using a larger cap. This also created more space from the preceding element. This tends to work better in the sloppy definitions of web presentation.