Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial Letter overlaps #10832

Open
La-Geek opened this issue Oct 20, 2018 · 10 comments

Comments

@La-Geek
Copy link

@La-Geek La-Geek commented Oct 20, 2018

Describe the bug
Simple:
Two Paragraph Blocks below each other, both with inital letter. Result see screenshots

backendBackend

frontendFrontend

Of course, one block with initial letter also overlaps the container.

Desktop (please complete the following information):

  • OS: Windows 10 64bit (recent version)
  • Browser Chrome and Firefox (recent versions)
  • Gutenberg version: 4.1
@La-Geek

This comment has been minimized.

Copy link
Author

@La-Geek La-Geek commented Oct 20, 2018

p.has-drop-cap {
    overflow: hidden;
}

could fix this.

overlap_fixed

@aleone89

This comment has been minimized.

Copy link

@aleone89 aleone89 commented Oct 30, 2018

Hello!

I was able to replicate this issue: http://cld.wthms.co/czhP01

However, this did resolve when more lines of text were put in place. http://cld.wthms.co/q8C0jw

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Oct 31, 2018

I think we should just for now add in to have the block when dropcap is applied be height of the entire block. I suspect this has other implications for floats, columns and therefore would like to find out if this is something we need to explore differently.

@alexislloyd

This comment has been minimized.

Copy link
Contributor

@alexislloyd alexislloyd commented Oct 31, 2018

@karmatosed are you suggesting implementing @La-Geek's suggestion? I think that would work.

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Nov 2, 2018

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Nov 2, 2018

Removing feedback label as we have a way forward.

@designsimply

This comment has been minimized.

Copy link
Member

@designsimply designsimply commented Nov 3, 2018

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.

screen shot 2018-11-03 at 9 28 48 am
Seen at http://alittletestblog.com/wp-admin/post.php?post=15503&action=edit running WordPress 4.9.8 and Gutenberg 4.2.0-rc.1 using Firefox 63.0 on macOS 10.13.6.

@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Nov 5, 2018

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:

screenshot 2018-11-05 at 08 50 19

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:

screenshot 2018-11-05 at 08 51 33

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:

screenshot 2018-11-05 at 08 54 16

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:

p.has-drop-cap.has-background {
    overflow: hidden;
}

screenshot 2018-11-05 at 09 00 13

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.

With regards to the issue reported by @designsimply in #10832 (comment), we could add a clearing rule for that:

screenshot 2018-11-05 at 09 01 56

So that would be:

p.has-drop-cap {
    clear: left;
}

But that's also not a nice fix, honestly, because then you can't do this:

screenshot 2018-11-05 at 09 03 42

So the bottomline is: the following is probably an okay solution:

p.has-drop-cap.has-background {
    overflow: hidden;
}

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.

@La-Geek

This comment has been minimized.

Copy link
Author

@La-Geek La-Geek commented Nov 5, 2018

but it causes paragraph 2 to not flow around the text as it arguably should.

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).

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),

Good Catch

The line-height is set to low = .68;
With this code it should not cut off the end of the initial letter:

p.has-drop-cap {
    overflow: hidden;
}
p.has-drop-cap:not(:focus):first-letter {
    line-height: 1;
}
@La-Geek

This comment has been minimized.

Copy link
Author

@La-Geek La-Geek commented Nov 5, 2018

Oh, in preview two linebreaks work perfect. But after saving the <br><br> tags are converted into a <p> tag? <- In my opinion this is a separate bug.

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 :first-letter.

All would be easier, if the CSS property initial-letter: 3 ( "3" as example) would have a good browser support, but it has not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.