Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#33868 closed defect (bug) (fixed)

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

Reported by: iehsanir's profile iEhsan.ir Owned by: iseulde's profile 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 10 years ago.
removed the style

Download all attachments as: .zip

Change History (15)

#1 @azaozz
10 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
10 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
10 years ago

@iEhsan.

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

#4 in reply to: ↑ 2 @azaozz
10 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
10 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
10 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
10 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
10 years ago

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

Introduced in [33464].

#9 @SergeyBiryukov
10 years ago

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

@Ankit K Gupta
10 years ago

removed the style

#10 follow-up: @Ankit K Gupta
10 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
10 years ago

  • Keywords needs-patch removed

#12 in reply to: ↑ 10 @azaozz
10 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 10 years ago by azaozz (previous) (diff)

#13 @azaozz
10 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
9 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.