Make WordPress Core

Opened 7 weeks ago

Last modified 6 weeks ago

#52885 new defect (bug)

Twenty Twenty-One: wrong drop cap alignment in RTL context

Reported by: rafaelgalani Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch
Focuses: css, rtl Cc:


Drop cap is not correctly aligned when using RTL context along with Gutenberg editor (e.g. using WordPress in Arabic language. It's specific to the twenty twenty-one theme. There's an issue open for it in Gutenberg's repo.

From what we found, the culprit might be here: https://github.com/WordPress/twentytwentyone/blob/trunk/assets/css/ie-editor.css#L3220

Steps to discover:

  1. Set WordPress language to Arabic;
  2. Create a new post and add a new paragraph block (using Gutenberg);
  3. When you enable drop cap, the alignment is wrong - it aligns left instead of right.

Gutenberg has an implementation for handling RTL, basically replacing all "right" rules' values for "left". Not sure if this can be applied here, though.

There's also the float: inline-start solution, but it's in draft state in MDN.

Attachments (3)

111912478-81822300-8a48-11eb-8653-e359f2546fa0.png (52.0 KB) - added by rafaelgalani 7 weeks ago.
Drop cap with wrong alignment
111912427-3cf68780-8a48-11eb-8bca-be1baa8574f8.png (32.9 KB) - added by rafaelgalani 7 weeks ago.
CSS rule using left alignment in a RTL context
52885.patch (561 bytes) - added by sabernhardt 7 weeks ago.
removing float: left from the editor stylesheet

Download all attachments as: .zip

Change History (6)

7 weeks ago

Drop cap with wrong alignment

7 weeks ago

CSS rule using left alignment in a RTL context

#1 @peterwilsoncc
7 weeks ago

  • Version changed from trunk to 5.6

7 weeks ago

removing float: left from the editor stylesheet

#2 @sabernhardt
7 weeks ago

  • Keywords has-patch added

Twenty Twenty-One has a compiled RTL version for the front end, but not the editor. I think the editor needs to switch left/right for other elements, too.

If only the initial letter needs changing, though, 52885.patch removes the float property from the editor stylesheet so it does not override Gutenberg's styles (which float the letter properly).

This ticket was mentioned in Slack in #core-editor by rafaelgalani. View the logs.

6 weeks ago

Note: See TracTickets for help on using tickets.