'Is it possible to use CSS drop caps with shape-outside?
I'm trying to add a drop cap (currently just using float:left) to a paragraph of text that is wrapped into to a 100% width div with a shape-outside: polygon.
But because the div is 100% width, the drop initial is pushed to below the div, rather than the start of the paragraph.
What I'm aiming for:
What the code produces:
Here's my code so far:
<div style="float:left; width:100%;
shape-outside:polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);
clip-path:polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);">
<img style="width:100%;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAAAAAAzlTsvAAAADklEQVQI12MsZ2BgYAAAAl8AeWudsEwAAAAASUVORK5CYII="/>
</div>
<p><span style="float:left; font-size:4em;">L</span>orem ipsum dolor sit, ...</p>The image can be anything (normally about a 2:1 width:height ratio); I've just included a simple base64 one for the example. I have tried various combinations of overflow:hidden;, display:inline-block; etc., but no luck so far!
Solution 1:[1]
I was able to make this work by using a slightly different method.
It was a heckuva challenge, but the finish product looks good.
This divides the image content from the text content in absolute divs, then formats the typography using relative divs.
I used a background image rather than an img tag, but you could dicker with the code if you really need an img tag.
It's not fully tested, but it might give you a push in the right direction.
<head>
<style>
#wrapper{
position: relative;
height: 100%;
}
#upperShape{ /* image */
position: absolute;
width: 100%;
height: 100%;
min-height: 600px;
max-height: 600px;
/* shape-outside:polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%); not really required */
clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 50% 100%, 0% 100%, 0% 70%, 0% 30%);
background: url(https://placekitten.com/800/500);
background-repeat:no-repeat;
background-size: cover;
)
}
#lowerShape{ /* text */
position: absolute;
top:50%;
padding: 1em;
line-height: 1.4em;
}
#spacer{
position: relative;
width:50%;
height:300px;
margin:1em;
float: left;
}
#dropCap{
position: relative;
float:left;
margin-right:3px;
font-size: 4.6em;
line-height: 1em;
}
</style>
</head>
<html>
<body>
<div id="wrapper">
<div id="upperShape">
<!-- uses background image -->
</div>
<div id="lowerShape">
<div id="spacer"></div>
<div id="dropCap">L</div>
orem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non arcu. Quisque a ipsum. Aenean vel sem. Integer eget lectus vitae metus lobortis malesuada. Donec justo erat, posuere at, rutrum et, molestie id, tortor. Nulla facilisi. Quisque dolor nunc, gravida id, semper sed, varius sit amet, orci. Sed a turpis nec odio faucibus facilisis. Pellentesque nec ligula. Fusce a tortor. Mauris molestie facilisis purus. Phasellus dictum est eu arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non arcu. Quisque a ipsum. Aenean vel sem. Integer eget lectus vitae metus lobortis malesuada. Donec justo erat, posuere at, rutrum et, molestie id, tortor. Nulla facilisi. Quisque dolor nunc, gravida id, semper sed, varius sit amet, orci. Sed a turpis nec odio faucibus facilisis. Pellentesque nec ligula. Fusce a tortor. Mauris molestie facilisis purus. Phasellus dictum est eu arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non arcu. Quisque a ipsum. Aenean vel sem. Integer eget lectus vitae metus lobortis malesuada. Donec justo erat, posuere at, rutrum et, molestie id, tortor. Nulla facilisi. Quisque dolor nunc, gravida id, semper sed, varius sit amet, orci. Sed a turpis nec odio faucibus facilisis. Pellentesque nec ligula. Fusce a tortor. Mauris molestie facilisis purus. Phasellus dictum est eu arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non arcu. Quisque a ipsum. Aenean vel sem. Integer eget lectus vitae metus lobortis malesuada. Donec justo erat, posuere at, rutrum et, molestie id, tortor. Nulla facilisi. Quisque dolor nunc, gravida id, semper sed, varius sit amet, orci. Sed a turpis nec odio faucibus facilisis. Pellentesque nec ligula. Fusce a tortor. Mauris molestie facilisis purus. Phasellus dictum est eu arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non arcu. Quisque a ipsum. Aenean vel sem. Integer eget lectus vitae metus lobortis malesuada. Donec justo erat, posuere at, rutrum et, molestie id, tortor. Nulla facilisi. Quisque dolor nunc, gravida id, semper sed, varius sit amet, orci. Sed a turpis nec odio faucibus facilisis. Pellentesque nec ligula. Fusce a tortor. Mauris molestie facilisis purus. Phasellus dictum est eu arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non arcu. Quisque a ipsum. Aenean vel sem. Integer eget lectus vitae metus lobortis malesuada. Donec justo erat, posuere at, rutrum et, molestie id, tortor. Nulla facilisi. Quisque dolor nunc, gravida id, semper sed, varius sit amet, orci. Sed a turpis nec odio faucibus facilisis. Pellentesque nec ligula. Fusce a tortor. Mauris molestie facilisis purus. Phasellus dictum est eu arcu.
</div>
</div>
</body>
</html>
I couldn't help but clean up the typography a bit too, so I've added some whitespace around the text.
Please let me know how it works out.
Solution 2:[2]
put it in one paragraph only, use p::first-letter to select L give it
float: left;
line-height: 35px;
font-size: 55px;
> padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Parapluie |
| Solution 2 | Sheng Huang |