Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#33868 closed defect (bug) (fixed)

Typing in editor in RTL languages causing white spaces from editor border

Reported by: iEhsan.ir Owned by: iseulde
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: TinyMCE Keywords: needs-testing
Focuses: rtl Cc:

Description

Since WordPress 4.3 published, all Persian users fault in trouble. When typing Persian text, white space from right begins to increase, but when an English character typed, white space will be turn back to normal, but when we remove those English characters, that white space will be return.

My English is rusty, so I decided to share you a demo.
http://up.vbiran.ir/uploads/36736144225476843678_demo.gif

Attachments (1)

33868.patch (474 bytes) - added by Ankit K Gupta 6 years ago.
removed the style

Download all attachments as: .zip

Change History (15)

#1 @azaozz
6 years ago

  • Component changed from Editor to TinyMCE
  • Focuses ui administration removed
  • Keywords reporter-feedback added

Hi iEhsan, thanks for the bug report. Need a bit more info:

#2 follow-up: @iEhsan.ir
6 years ago

Hi,

  1. It happens often on Firefox, but always happens on all Webkit based browsers
  2. No, TinyMce demo is OK.

#3 follow-up: @Ankit K Gupta
6 years ago

@iEhsan.

As this is your First Bug report on WordPress Core. Welcome to Core :)

#4 in reply to: ↑ 2 @azaozz
6 years ago

Replying to iEhsan.ir:

  1. No, TinyMce demo is OK.

In that case, can you disable all external plugins and CSS in the editor by temporarily disabling all WordPress plugins that may be affecting it (or just disable them all) and switching to one of the default themes. Then clear the browser cache and try to reproduce.

#5 in reply to: ↑ 3 @iEhsan.ir
6 years ago

As this is your First Bug report on WordPress Core. Welcome to Core :)

@Ankit K Gupta Thank you very much :)

@azaozz I tried with deactivating all plugins and returning theme to original , but problem still priests :(

But when I typing in original WordPress (English and not translated), everything is OK, even with same plugins installed on both WordPress Persian and original WordPress.

#6 follow-ups: @alireza1375
6 years ago

I solved the problem by following way:
Delete

word-break: break-word;

from

wp-includes/js/tinymce/skins/wordpress/wp-content.css

#7 in reply to: ↑ 6 @iEhsan.ir
6 years ago

  • Keywords has-patch added

Replying to alireza1375:

I solved the problem by following way:
Delete

word-break: break-word;

from

wp-includes/js/tinymce/skins/wordpress/wp-content.css

This solution is correct, I think it needs to be patched for future releases.

#8 @SergeyBiryukov
6 years ago

  • Keywords needs-patch added; reporter-feedback has-patch removed
  • Milestone changed from Awaiting Review to 4.4

Introduced in [33464].

#9 @SergeyBiryukov
6 years ago

  • Owner set to iseulde
  • Status changed from new to assigned

@Ankit K Gupta
6 years ago

removed the style

#10 follow-up: @Ankit K Gupta
6 years ago

  • Keywords needs-testing added

Removed the word-break: break-word; property.
But not sure, will work in iOS or not.

#11 @Ankit K Gupta
6 years ago

  • Keywords needs-patch removed

#12 in reply to: ↑ 10 @azaozz
6 years ago

Replying to Ankit K Gupta:

Seems to work fine in (the recently released) iOS9. Looking at wodr-wrap and word-break, it's not very clear what the difference between them is. Seems word-break extends word-wrap/overflow-wrap for CJK: http://www.w3.org/TR/css3-text/#word-break-property

This looks like browser bug, in both Firefox and Chrome. Would be good to make a reduced example. No need to include TinyMCE, a normal <div contenteditable="true">(Type RTL here)</div> at place like JSFiddle would do. Then submit bugs for both Mozilla and Chromium.

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

#13 @azaozz
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 34317:

TinyMCE: remove word-break: break-word; from the default editor CSS to prevent irregular spaces when typing in RTL languages.

Props iehsanir, alireza1375, ankit-k-gupta.
Fixes #33868.

#14 in reply to: ↑ 6 @erfan_atp
6 years ago

Replying to alireza1375:

I solved the problem by following way:
Delete

word-break: break-word;

from

wp-includes/js/tinymce/skins/wordpress/wp-content.css

Thanks! It's the best solution.
آقا دمت گرم

Note: See TracTickets for help on using tickets.