Bug 12115 – RTL text is jumbled on display

• Status: RESOLVED
• Resolution: FIXED
• Component: Tables

[Pat]

The rtl text on http://www.walla.co.il is jumbled inside a table, that is nested inside of a <div dir=rtl>.

To reproduce:
Go to http://www.walla.co.il and sign into the email account to read email.
Username:hebrew9 (display name "Just Checking", email "[e-mail]")
Password:12345

You will see that the subject, size, date, and name are jumbled at the end.
You will also see that, if you scroll over the "sent from name" on the right, that the rest of the page content is jumbled.

[Pat]

Created attachment 12225 [details]
The walla.co.il html page in question

The html page in question.  The comments below are from this html page.

Here is the start of the <div align=... that the <table> is nested in. The ending </div> is at the bottom of page.
<div name="GHIDDEN" id="GHIDDEN" style="display:none;"></div>
<script id="JSHIDDEN" src=""></script>
<div align="center" dir="rtl">

Here is the <table> that starts to show the text jumbled.
<style>
.w-txt-clip {text-overflow : ellipsis; overflow : hidden}
</style>
<table height=23 width=100% [snip]

Here is the <table> inside a <form> that has the subject, name, size, and date that are completely jumbled.
<table id=gMainList cellpadding=0 cellspacing=0 width=100%>
<col width=20><col width=20 class=w1><col width=30% class="w-txt-clip w3"><col width=70% class="w-txt-clip w3"><col width=0 class="w-txt-clip w2b" nowrap><col width=60 class=w2><col width=30 class=w2>

<tr class="w1 wGroupSep"><td></td><td></td><td colspan=5>היום - יום חמישי</td></tr>
<tr><td colspan=7><div class=sep> </div></td></tr>

<tr height=23 class=wList1 id=mi0><td><input type=checkbox name="m[0]" value="196263413" onclick="wm_s(0,this.checked)"></td><td><img src=http://ico.walla.co.il/wu/d/rtl/v/mail/s1.gif></td><td><nobr><a href="" onclick="return wm_sm(196263413,-1,-1);" title="[e-mail]">Just Checking</a></nobr></td><td><nobr><a href="" onclick="return wm_sm(196263413,-1,-1);">test</a></nobr></td><td></td><td>22:30:45</td><td>2K</td></tr>
<tr><td colspan=7><div class=sep> </div></td></tr>

</table>

[Pat]

Created attachment 12227 [details]
How to sign into walla.co.il

[Pat]

Created attachment 12228 [details]
Area that is jumbled 

This screen shot is from Firefox to show what the area in question looks like.

[Pat]

Created attachment 12230 [details]
reduced test page

Created attachment 12259 [details]
Reduction

The test page reduces to this issue with fixed table layout. Apparently it has nothing to do with RTL.

WebKit's fixed table layout tries to satisfy percent widths first, then adds the fixed widths no matter what. I don't know what this algorithm is based on, but Firefox does things differently: it seems to satisfy the fixed widths first, then percentages (if any available width remains; percentages taken out of the original available width), then distribute the remainder among auto columns. If there are no auto columns and the resulting width is less than the available width, everything is scaled up to fit. This is different from WebKit's frameset layout algorithm (in that it blows up fixed lengths even if there are percentages).

I don't understand this change: <http://trac.webkit.org/projects/webkit/changeset/3952>.

Created attachment 12265 [details]
Fix fixed table layout

[Dave Hyatt]

Comment on attachment 12265 [details]
Fix fixed table layout

r=me

[Mark Rowe (bdash)]

Landed in r18790.

*** Bug 12183 has been marked as a duplicate of this bug. ***