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

[iEhsan.ir]

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.

[azaozz]

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

• Does this happen in all browsers?
• Does it happen in the TinyMCE demo: ​http://www.tinymce.com/tryit/basic.php?

[iEhsan.ir]

Hi,

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

[Ankit K Gupta]

@iEhsan.

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

[azaozz]

Replying to iEhsan.ir:

2. 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.

[iEhsan.ir]

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.

[alireza1375]

I solved the problem by following way:
Delete

word-break: break-word;

from

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

[iEhsan.ir]

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.

[SergeyBiryukov]

Introduced in [33464].

[Ankit K Gupta]

removed the style

[Ankit K Gupta]

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

[azaozz]

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.

[azaozz]

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.

[erfan_atp]

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.
آقا دمت گرم