Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Describe the bug
Of course, one block with initial letter also overlaps the container.
Desktop (please complete the following information):
Tested and confirmed using WordPress 4.9.8 and Gutenberg 4.2.0-rc.1 that when there are multiple short paragraphs using the drop cap option one after another the drop caps overlap in odd ways.
This is a good ticket, and thank you, specifically, for the proposed solution shown here: #10832 (comment)
However I disagree that this is the right solution, and at the end of this comment I'm going to suggest a different approach. But the reason I disagree is that we're making a pretty bold assumption about how users author content, in order to solve the situation where the two paragraphs have background colors.
Here's what Jane Austen would've written:
As you can see, not only does the overflow value cut off the I (and this will vary on a theme by theme, font by font basis), but it causes paragraph 2 to not flow around the text as it arguably should.
Here's what that looks like in master:
Okay maybe not ideal either, perhaps Jane should cut back on the dropcap usage. But arguably this is more correct.
So, what about this problem:
I was hoping we could elevate the z index of the first letter so it would always be on tip. But sadly, first-letter CSS doesn't allow us to do this. But the least we could do is scope the rule so only paragraphs with a background color has the overflow rule:
That's still not ideal, because as you can see the padding below the dropcap is smaller. But I suppose it does fix this particular issue.
So that would be:
But that's also not a nice fix, honestly, because then you can't do this:
So the bottomline is: the following is probably an okay solution:
But I also feel like we should be VERY careful with applying too many "fixes" to these situations. At some point we have to rely on editorial responsibility. Or we end up cauterizing legitimate layout opportunities in the name of fixing edgecases.
I disagree. If you want the text flow around the initial letter, you should not use a new block (paragraph), instead use 2 linebreaks (hit strg/control and enter twice).
The line-height is set to low = .68;
Oh, in preview two linebreaks work perfect. But after saving the
However, as mentioned in #10832 comment it depends on font-size, font-family and browser how the first letter is placed. Dropcap is crap with the current possibilities. There exists an old polyfill from adobe "dropcap.js" but it calculates with pixels. There are variations that calculate it responsive. But as far as I know, this solutions work with a CSS class (or ID) in combination with an inline tag around the intial letter and not with the pseudo class
All would be easier, if the CSS property