Make WordPress Core

Opened 6 years ago

Last modified 3 years ago

#46032 reviewing defect (bug)

Plugin details text direction layout (RTL)

Reported by: nabilmoqbel's profile nabilmoqbel Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch has-screenshots
Focuses: css, rtl, administration Cc:

Description

Hi,

This RTL CSS minor was noticed before 5.0 release, but with increasing number of plugins that have been translated to RTL languages! It would be nice fix it at present.

In the plugin details screen, when site language or admin choosing RTL panel:

Text direction for plugin Description, Changelog, Screenshots captions, and Reviews tabs appears LTR and some phrases become not quickly understood.

(Screenshot attached https://moqbel.net/s/WP-admin-plugins-description-RTL-PrtScn).

In this case (especially for those plugins that have been translated to any RTL language) I think the following needs to be fixed:

direction: ltr;

#plugin-information .section {
    direction: rtl;
}

And for section ul class:

margin-left: 24px;

#plugin-information .section ol, #plugin-information .section ul {
    list-style-type: disc;
    margin-right: 24px;
}

For Reviews tab (RTL):

  1. star-rating:

float: left;

#plugin-information .reviewer-info .star-rating {
    float: right;
}
  1. review-title-section h4

float: left;

margin: 0 6px 0 0;

#plugin-information .review-title-section h4 {
    display: inline-block;
    float: right;
    margin: 0 0 0 6px;
}
  1. reviewer-info .avatar

float: left;

margin: 4px 6px 0 0;

#plugin-information .reviewer-info .avatar {
    float: right;
    margin: 4px 0 0 6px;
}

Finally will be displayed correctly as this PrtScn:

https://moqbel.net/s/WP-admin-plugins-description-RTL-PrtScn-fixed

Many thanks,

Attachments (4)

plugins-description-RTL.png (458.8 KB) - added by nabilmoqbel 6 years ago.
Plugins description RTL
46032.diff (1.0 KB) - added by mukesh27 6 years ago.
Patch.
46032-common.css.patch (923 bytes) - added by man4toman 6 years ago.
46032.2.patch (854 bytes) - added by sabernhardt 4 years ago.
removing rtl:ignore comment from list-style-type and display properties

Download all attachments as: .zip

Change History (21)

@nabilmoqbel
6 years ago

Plugins description RTL

@mukesh27
6 years ago

Patch.

#1 @mukesh27
6 years ago

  • Component changed from Administration to Plugins
  • Keywords has-screenshots added

Hi @nabilmoqbel, Welcome to WordPres Trac! Thanks for the report.

Good catch.

#2 @nabilmoqbel
6 years ago

Hi @mukesh27, You're welcome.
Thank you for that!

#3 @man4toman
6 years ago

Hi everyone,
The patch must be on none-rtl version of CSS file.
I attach new one.

Last edited 6 years ago by man4toman (previous) (diff)

#4 @nabilmoqbel
5 years ago

Hi, we have discussion before on Slack, thanks @dd32 for your time,

About the idea of adding a flag for RTL whether “readme is translated”.

Because even in that case of those plugins NOT translated ltr, it is quite clear, still be readable and does not change the meaning for any sentences.

But if any plugin even if one word translated, that sentence will become not clearly understood (As shown in the old image above).

For plugin name direction, is correct (Although the name does not show a problem on plugin header, even if it is not translated).

#5 @man4toman
5 years ago

  • Focuses ui removed
  • Keywords ui-feedback removed
  • Version 5.0.3 deleted

#6 @SergeyBiryukov
4 years ago

  • Milestone changed from Awaiting Review to 5.6
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


4 years ago

#8 @SergeyBiryukov
4 years ago

  • Milestone changed from 5.6 to 5.7

Didn't get a chance to review this in time for 5.6, moving to the next release for now.

This ticket was mentioned in Slack in #core by sabernhardt. View the logs.


4 years ago

@sabernhardt
4 years ago

removing rtl:ignore comment from list-style-type and display properties

#10 @sabernhardt
4 years ago

  • Focuses css added

Without the rtl:ignore comments for list-style-type and display properties, I still get the same results in RTL. So 46032.2.patch removes those two comments, and the patch applies to the root directory.

#11 @lukecarbis
4 years ago

  • Milestone changed from 5.7 to 5.8

With not much activity happening here and beta 3 now out for 5.7, punting to 5.8 for now.

#12 @ryelle
3 years ago

It looks like these forced-LTR styles were added before the plugins were translated, see #19778.

With 46032.2.patch, all plugin modals are now RTL, even if the readme is not translated - is that the expected behavior?

Could #plugin-information .section { direction: ltr; } also be removed, since now it's (theoretically) not doing anything?

#13 @sabernhardt
3 years ago

That patch probably should be improved, whether creating a "translated" flag or editing another way.

I saw a suggestion of adding unicode-bidi: embed; on other admin elements (#43476). I'm curious whether that could help here, at least for the Reviews tab.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


3 years ago

#15 @ryelle
3 years ago

  • Milestone changed from 5.8 to 5.9

It sounds like 46032.2.patch is still not ready for commit, so I'm going to move this ticket to 5.9.

This ticket was mentioned in Slack in #core-css by danfarrow. View the logs.


3 years ago

#17 @sabernhardt
3 years ago

  • Milestone changed from 5.9 to Future Release

With no recent movement, I'll set this to Future Release. If it can be completed by Tuesday, feel free to put the milestone back to 5.9.

Note: See TracTickets for help on using tickets.