WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30743 closed defect (bug) (fixed)

RTL styles bug with tabs on About page

Reported by: alex-ye Owned by: nacin
Milestone: 4.1 Priority: normal
Severity: minor Version: 3.8
Component: Help/About Keywords: has-patch fixed-major commit
Focuses: rtl Cc:
PR Number:

Description

Some RTL styles bugs in 4.1 admin and Twenty Fifteen theme, Tested on WordPress 4.1 RC2 (Arabic Language), Google Chrome 39, Firefox 34.

Some of them are urgent.
See the attachments.

Attachments (12)

1.jpg (44.0 KB) - added by alex-ye 5 years ago.
2.jpg (104.7 KB) - added by alex-ye 5 years ago.
3.jpg (54.6 KB) - added by alex-ye 5 years ago.
4.jpg (52.2 KB) - added by alex-ye 5 years ago.
5.jpg (83.8 KB) - added by alex-ye 5 years ago.
6.jpg (50.7 KB) - added by alex-ye 5 years ago.
30743.diff (1.4 KB) - added by yoavf 5 years ago.
takes care of the code example in the about page
fix-4.patch (430 bytes) - added by alex-ye 5 years ago.
A fix for the bug in 4.jpg
fix-2.patch (384 bytes) - added by alex-ye 5 years ago.
30743.2.diff (329 bytes) - added by helen 5 years ago.
7.jpg (94.8 KB) - added by alex-ye 5 years ago.
8.jpg (72.1 KB) - added by alex-ye 5 years ago.

Download all attachments as: .zip

Change History (39)

@alex-ye
5 years ago

@alex-ye
5 years ago

@alex-ye
5 years ago

@alex-ye
5 years ago

@alex-ye
5 years ago

@alex-ye
5 years ago

@yoavf
5 years ago

takes care of the code example in the about page

#1 @yoavf
5 years ago

I can't reproduce the issue in 4.jpg
Tested in latest chrome/firefox on mac

#2 follow-up: @markoheijnen
5 years ago

The issue in 4.jpg was also reported in #30739 but then for Japanese.

#3 @yoavf
5 years ago

@alex-ye - I'm not seeing any issues with the comment date form 3.jpg in Firefox 33/mac
What's the problem exactly?

#4 in reply to: ↑ 2 @yoavf
5 years ago

@alex-ye - can't reproduce 1.jpg either (chrome. Tried both Hebrew and Arabic).

#5 @yoavf
5 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.1
  • Severity changed from normal to minor

@alex-ye
5 years ago

A fix for the bug in 4.jpg

#6 @alex-ye
5 years ago

The bug in 1.jpg happens on Google Chrome 39.0.2171.95 m (64-bit) and Firefox Developer Edition 36.0a2 (2014-12-15) with Microsoft Windows 8.1 64bit. The user avatar in a separated line. I couldn't determine what is really happen! .. I will tell you if I got any further information.

The bug in 3.jpg only happens on Firefox Developer Edition 36.0a2 (2014-12-15), maybe it's a bug in the browser!!

Last edited 5 years ago by alex-ye (previous) (diff)

#7 follow-up: @alex-ye
5 years ago

The fix-4.patch needs someone to review it. The idea is to set a font-size, but I don't know if 32px is the proper value.

@alex-ye
5 years ago

#8 follow-up: @alex-ye
5 years ago

fix-2.patch will fix the bug in 2.jpg, at least for Twenty Fifteen theme!. maybe we could do it in a better way?.

In addition, The font-size is not the same on the front-end and Visual Editor using a 1366x768 screen. I think the font-size should be 19px instead of 17px. who knows?!

#9 @johnbillion
5 years ago

#30739 was marked as a duplicate.

#10 in reply to: ↑ 8 ; follow-up: @iamtakashi
5 years ago

Replying to alex-ye:

In addition, The font-size is not the same on the front-end and Visual Editor using a 1366x768 screen. I think the font-size should be 19px instead of 17px. who knows?!

17px is the right size for the editor style. See: #29986

#11 in reply to: ↑ 7 ; follow-up: @iamtakashi
5 years ago

Replying to alex-ye:

The fix-4.patch needs someone to review it. The idea is to set a font-size, but I don't know if 32px is the proper value.

That's not correct. It should be 16px for .secondary-toggle:before, 32px for .secondary-toggle.toggled-on:before. They need to be different size. But I don't understand why we need to specify font size again for .secondary-toggle:before when it's been set in L:188.

I can't reproduce the issue.

#12 in reply to: ↑ 10 @alex-ye
5 years ago

Replying to iamtakashi:

Replying to alex-ye:

In addition, The font-size is not the same on the front-end and Visual Editor using a 1366x768 screen. I think the font-size should be 19px instead of 17px. who knows?!

17px is the right size for the editor style. See: #29986

Thanks, this explain why it's 17px :)

#13 in reply to: ↑ 11 @alex-ye
5 years ago

Replying to iamtakashi:

Replying to alex-ye:

The fix-4.patch needs someone to review it. The idea is to set a font-size, but I don't know if 32px is the proper value.

That's not correct. It should be 16px for .secondary-toggle:before, 32px for .secondary-toggle.toggled-on:before. They need to be different size. But I don't understand why we need to specify font size again for .secondary-toggle:before when it's been set in L:188.

I can't reproduce the issue.

The bug occurs when I zoom in the page (from 150% to 170%), Thanks for pointing to L:188. if you think it's an edge case which will never happens, ignore it.

#14 @alex-ye
5 years ago

Just to summarize..

1.jpg, still occurs with me on Google Chrome 39.0.2171.95 m (64-bit) and Firefox Developer Edition 36.0a2 (2014-12-15) with Microsoft Windows 8.1 64bit.

@yoavf can't reproduce it, so I will try to test it on other computers.

--

2.jpg, the fonts are still different (Tahoma on the Visual Editor and "Noto Serif" on the front-end). the fix-2.patch resolve it but it seems like a hack for me!

--

3.jpg, it looks like it's a bug in the browser, only happens on Firefox Developer Edition 36.0a2 (2014-12-15).

--

4.jpg, it only happens when I zoom in (from 150% to 170%). and no one can repoduce it!

--

5.jpg, @yoavf had upload the 30743.diff patch to reslove it.

--

6.jpg, needs tests and patch!

#15 follow-up: @johnbillion
5 years ago

The <code> tags on the About page have a direction: ltr rule applied in common.css. Surely an ltr marker isn't required for every piece of text which needs to remain ltr?

#16 @johnbillion
5 years ago

I'm going to split this ticket up so we can better manage the separate issues. Stand by.

#17 in reply to: ↑ 15 @ramiy
5 years ago

Replying to johnbillion:

The <code> tags on the About page have a direction: ltr rule applied in common.css. Surely an ltr marker isn't required for every piece of text which needs to remain ltr?

LTR marker is required for RTL sites.

#18 @johnbillion
5 years ago

  • Component changed from General to Help/About
  • Focuses ui administration template removed
  • Summary changed from RTL styles bugs in 4.1 admin and Twenty Fifteen to RTL styles bug with tabs on About page

New tickets for these six issues:

  1. #30745
  2. #30746
  3. #30747
  4. #30748
  5. #30739
  6. This ticket

#19 @johnbillion
5 years ago

The About page tab text wrapping is only reproducible in Chrome on Windows. Chrome on OS X is fine, as is Firefox and IE9.

@helen
5 years ago

#20 @helen
5 years ago

In 30951:

About page: Don't allow tab text to wrap.

Some language, browser, and OS combinations (notably Arabic, Chrome, and Windows) were wrapping.

see #30743.

#21 @helen
5 years ago

  • Keywords has-patch fixed-major commit added; needs-patch removed

@alex-ye
5 years ago

@alex-ye
5 years ago

#22 follow-up: @alex-ye
5 years ago

@helen Thanks for the changeset, check 7.jpg and 8.jpg. The same proplem exist in some other texts!.. maybe it's related to #30745 ? this only happens on Google Chrome.

#23 @iamtakashi
5 years ago

@alex-ye, I've added a patch that intends to fix the icon issue in #30739. Can you test the 30739.diff, please?

This ticket was mentioned in Slack in #core-themes by iamtakashi. View the logs.


5 years ago

#25 @johnbillion
5 years ago

  • Version changed from trunk to 3.8

The wrapping text issue is reproducible back to at least 3.8. Not a regression in 4.1.

#26 in reply to: ↑ 22 @helen
5 years ago

Replying to alex-ye:

@helen Thanks for the changeset, check 7.jpg and 8.jpg. The same proplem exist in some other texts!.. maybe it's related to #30745 ? this only happens on Google Chrome.

I would suggest opening a new ticket for those, as this ticket is being used specifically for the about page tabs. Also, if you could, please see if you can find whether or not that exists in older versions or if it's new to 4.1.

#27 @nacin
5 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In 30957:

About page RTL fixes.

Merges [30951] and [30952] to the 4.1 branch.

props helen, alex-ye.
fixes #30743, #30748.

Note: See TracTickets for help on using tickets.