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

Drop cap and Alignment both option not working properly #11756

Closed
mukeshpanchal27 opened this issue Nov 12, 2018 · 17 comments · Fixed by #42326
Closed

Drop cap and Alignment both option not working properly #11756

mukeshpanchal27 opened this issue Nov 12, 2018 · 17 comments · Fixed by #42326
Assignees
Labels
[Block] Paragraph Affects the Paragraph Block CSS Styling Related to editor and front end styles, CSS-specific issues. Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@mukeshpanchal27
Copy link
Member

Describe the bug
Drop cap and text alignment both settings do not work in new editor.

To Reproduce
Steps to reproduce the behavior:

  1. Write a sentence in Paragraph block
  2. Click on drop cap toggle
  3. Click on Align right
  4. See error

Screenshots

error

Desktop (please complete the following information):

  • OS: Linux
  • Browser Chrome
  • Version 69.0.3497.81

Additional context

  • Gutenberg: latest from master
  • WordPress: 5.0 beta 3
@mukeshpanchal27
Copy link
Member Author

Above issue will fixed if we remove float left from below css code.

p.has-drop-cap:not(:focus):first-letter {
float: left;
font-size: 8.4em;
line-height: .68;
font-weight: 100;
margin: .05em .1em 0 0;
text-transform: uppercase;
font-style: normal;
}

@designsimply designsimply added [Type] Bug An existing feature does not function as intended Needs Testing Needs further testing to be confirmed. [Block] Paragraph Affects the Paragraph Block labels Nov 12, 2018
@designsimply
Copy link
Member

Tested and confirmed that the drop cap letter alignment does not change with the rest of the text.

screen shot 2018-11-12 at 6 21 37 am
Seen at http://alittletestblog.com/wp-admin/post.php?post=15660&action=edit running WordPress 4.9.8 and Gutenberg 4.3.0-rc.1 using Firefox 63.0.1 on macOS 10.13.6.

@designsimply designsimply removed the Needs Testing Needs further testing to be confirmed. label Nov 12, 2018
@mtias mtias added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Nov 21, 2018
@mtias mtias added this to the WordPress 5.0.x Follow Ups milestone Nov 21, 2018
@Naerriel
Copy link
Contributor

Naerriel commented Jan 7, 2019

What is the expected behaviour of aligning right with drop cap?
If the lines of text have irregular left side then there will be white space between some of the lines and the drop cap letter.
Example:
export 1

Personally I can't think of the reasons what for would someone use drop cap with align: right.
Maybe we'll turn drop cap off, when aligning right?

@Jackie6
Copy link
Contributor

Jackie6 commented Mar 14, 2019

I agree with Naerriel's comment. I think the align right button should be disabled when the drop cap is enabled.

@rebeccaj1211
Copy link

I think it should look something like this (although this is center align)

download

@gziolo
Copy link
Member

gziolo commented Apr 10, 2019

@jasmussen - can you help to clarify how it should be implemented?

@gziolo gziolo added Needs Design Feedback Needs general design feedback. Needs Dev Ready for, and needs developer efforts labels Apr 10, 2019
@jasmussen
Copy link
Contributor

That is an EXCELLENT question.

I looked up the typographical behavior on Wikipedia, it's interesting reading. The term is "initial", which is a large first letter, and usually the three styles of intitials include the first letter just being big, one where the first letter sits in the left margin, and the style the block editor uses, the drop-cap, where a quarter of the text is indented to make space for the large first letter.

The first of these three, as Rebecca suggests, lends itself to working with right aligned text, whereas the two other styles do not, and are inherently tied to left-aligned or justified text (though to be clear, on RTL reading directions the dropcap should float on the right where the text starts).

Since the block editor currently embraces the drop-cap style, it seems like the correct thing to do here would be to disable, perhaps with a line of explanatory help-text below, the drop-cap button when the alignment is anything other than left (or right for RTL languages).

@rebeccaj1211
Copy link

Okay, I'll take a look into this!

@rebeccaj1211 rebeccaj1211 mentioned this issue Apr 19, 2019
2 tasks
@gziolo gziolo added [Status] In Progress Tracking issues with work in progress and removed Needs Dev Ready for, and needs developer efforts Needs Design Feedback Needs general design feedback. labels Apr 19, 2019
obenland added a commit that referenced this issue Jul 22, 2019
Hides drop cap when the text is not aligned with the direction of reading.

Fixes #11756.
@tellthemachines tellthemachines added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Apr 23, 2020
@richtabor
Copy link
Member

If the paragraph text is longer than one/two lines, then the issue doesn't occur, right? I personally don't think this is a big enough issue, as the current solution is to not use the feature, if it doesn't work for you.

Aligned right:
Screen Shot 2020-07-21 at 12 25 23 PM

@paaljoachim
Copy link
Contributor

I see both PR's associated with this issue have gone stale.
@obenland @rebeccaj1211

Joen @jasmussen
Do you want to take a look at this issue as you are working on this PR?
#28685

@gwwar gwwar added Needs Dev Ready for, and needs developer efforts and removed [Status] In Progress Tracking issues with work in progress labels Mar 4, 2021
@rafaelgallani
Copy link
Contributor

I can work on it... But how is it supposed to work? Should the drop cap option be disabled?

@jasmussen
Copy link
Contributor

It could work like this. With unaligned text, you get the usual behavior:

left aligned

If you center or right align, you'd get this:

centered

rightaligned

Note the help text, "Aligned text cannot have a dropcap". It could potentially use better verbiage, but I intentionally avoided using "Centered text" or "Right aligned text", as we want to handle RTL situations also.

And on that note, dropcap in RTL looks a bit broken — but that could be because I'm using english text in an arabic context.

Screenshot 2021-03-05 at 09 35 53

I would imagine, and be happily corrected, that for RTL text, the dropcap should only work in the default alignment, i.e. right, and be disabled for center/left alignments.

@rafaelgallani
Copy link
Contributor

rafaelgallani commented Mar 21, 2021

Sorry for taking so long to respond.

And on that note, dropcap in RTL looks a bit broken — but that could be because I'm using english text in an arabic context.

@jasmussen From what I found, that might not be the reason why it's broken: I think that the culprit might be twenty twenty-one theme, at least in my tests:

image
All of the text is right-aligned (due to style-rtl.css, which converts left CSS directives to right). EXCEPT the drop cap.


image
Since the twenty twenty-one theme is not within Gutenberg's context, its styling rules are not converted to RTL. Is the !important rule allowed in this specific case?

Besides that, the only necessary fix might be changing the drop cap help text and disabling the CSS rules when center/opposite alignment (left in RTL, right in LTR) is applied.

@jasmussen
Copy link
Contributor

@rafaelgalani Thank you for the excellent investigative work! That does make it seem like a Twenty Twenty One bug.

My instinct is that we should not add !important to the block editor rules if we can avoid it. In this case, it's clearly a bug that is worth fixing directly in the Twenty Twenty One theme — it needs to simply remove most of those drop cap rules, and keep only the ones that override. I see the code here:

https://github.com/WordPress/twentytwentyone/blob/trunk/assets/css/ie-editor.css#L3220

Would you be willing to open a ticket for it? It would need to be done here: https://core.trac.wordpress.org/newticket?component=Bundled+Theme&summary=Twenty+Twenty-One

You can also search existing tickets here: https://core.trac.wordpress.org/search?q=twenty+twenty-one

Let me know, otherwise I'll open a ticket. Thanks again!

@rafaelgallani
Copy link
Contributor

@jasmussen There was no open ticket related to this issue, so here's the one I created: https://core.trac.wordpress.org/ticket/52885.
I'll also open a PR adding the help text to the drop cap and removing it when using centered/opposite alignment.

@jasmussen
Copy link
Contributor

Thank you that's perfect!

@carolinan
Copy link
Contributor

Do we still want to remove the visual drop cap when the paragraph is aligned?

@carolinan carolinan removed this from the WordPress 5.x milestone Jul 8, 2022
@carolinan carolinan self-assigned this Jul 8, 2022
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Paragraph Affects the Paragraph Block CSS Styling Related to editor and front end styles, CSS-specific issues. Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet