Wrong behavior with long text lines in RTL text dir

[Amir]

When one writes long text wider than editor window width in LTR text dir it shown properly. However, once changing text dir to RTL, all other rows are justified relatively to end of long line and not to beginning of editor. In addition, any typed letter is pushing text and scrollbar to the wrong direction.

[Jakub Ś]

@bamir I wasn't able to reproduce this problem.

The only problem I got was #10448. Please provide exact step by step scenario explaining how to reproduce this problem. Please also tell me in which browser do you get this error.

[Amir]

Hello,

This issue is reproduced only in IE browser.

In addition, I'm attaching here screenshots show the problem.

Basiccaly, try to type one short line and another long one. Then switch text direction to RTL

[Amir]

Lines are not aligned to the right in RTL paragraph direction

[Jakub Ś]

Can this problem be reproduced in default editor or on our demo page - ​http://ckeditor.com/demo#full.

Please see attached screencast. I have tried typing 3 lines. Next I have clicked in third longest line and pressed bidi button. Another test-case I have done was selecting all lines and pressing bidi button. In both cases I didn't get result as you present.

Please tell me:

1. What have I missed in my TC?
2. Which IE do you use?
3. Does this IE have default settings?
4. Perhaps there is some editor configuration setting that you have forgotten to mention?
5. Which editor version do you use?
6. Perhaps this is only happening in your webapp?

[Tomer Mahlin]

Appologies for not clear steps description. It is reproducible with at least IE 8 and using standard demo page: ​http://ckeditor.com/demo#full.

Here are the steps:

0. Make sure Editor appears with LTR orientation (regular editor translated to English language).
1. Make sure the content of editor is completly removed (namely the content pane is blank)
2. Type a VERY short phrase like: "Hello world !" and press Enter
3. Type a longer phrase which is still shorter than visual width of editing area. For example: "Here is a slightly longer example ...."
4. Press Enter
5. Type VERY long sentence. As a result you should see horizontal scroll bar appear at the bottom of the editing area.
6. Position your cursor in the middle of first line (i.e. "Hello world !") and press on RTL button

Result: Text direction of first line will change to RTL and it will be aligned to the VISUAL right boundary of the editing area.

7. Position your cursor in the middle of second row and press on RTL button

Result: Text direction of second line will change to RTL and it will be aligned to the VISUAL right boundary of the editing area.

Note that at this stage direction of 1st and 2nd lines is RTL while direction of last line is still LTR (since it was inherited from Editor orientation)

8. Scroll horizontal scroll bar to the right such that you see end of third line.
9. Note the appearance of first two lines

Expected: They should be aligned to the de-facto boundary of editing area Actual results: They are aligned to the point in the editing area which is located at the distance of editing area width from the left boundary of editing area.

[Jakub Ś]

Now I understand what you mean - you have to use LTR/RTL buttons (not BIDI) and you have to click all lines separately. Now back to the problem.

This is actually how browsers handle long lines of text that doesn't fit into container. Please have a look at below code and try running it in any browser except Webkit.

<div contenteditable="true" style="margin: 20px; border:1px solid black; width:500px;"><!--word-wrap: break-word;-->
<h2>How browsers handle long lines of text in container with limited width</h2>
<p style="text-align: right;">wwwwwwwww</p>
<p style="text-align: right;">wwwwwwwwwwwwwwwwwwwwwww</p>
<p style="text-align: right;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
<p style="text-align: right;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</div>

First two lines are positioned to div boundary but two others are outside of it and produce the same result as you see in editor. Actually to see same result we would have to use another div container with overflow-x: scroll; set.

<div style="overflow-x:scroll; overflow-y : hidden; width:542px;">
<div contenteditable="true" style="margin: 20px; border:1px solid black; width:500px;"><!--word-wrap: break-word;-->
<h2>How browsers handle long lines of text in container with limited width</h2>
<p style="text-align: right;">wwwwwwwww</p>
<p style="text-align: right;">wwwwwwwwwwwwwwwwwwwwwww</p>
<p style="text-align: right;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
<p style="text-align: right;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</div>
</div>

The point is that this is how it works and there is no error in editor. We would probably have to calculate editor width on every key press which I don't see as solution. Solution IMHO is not making such long lines of text (I don't know any real use-case like this) or using word-wrap: break-word; on inner div to break such long word. Webkit does that by default.

In editor set word-wrap: break-word; for body element in contents.css and it should solve your problem.