[wp-trac] [WordPress Trac] #52885: Twenty Twenty-One: wrong drop cap alignment in RTL context

[WordPress Trac]

#52885: Twenty Twenty-One: wrong drop cap alignment in RTL context
---------------------------+-----------------------------
 Reporter:  rafaelgalani   |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:  css, rtl       |
---------------------------+-----------------------------
 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
 [https://github.com/WordPress/gutenberg/issues/11756 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` [https://developer.mozilla.org/en-
 US/docs/Web/CSS/float#browser_compatibility solution], but it's in draft
 state in MDN.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52885>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform