Bug 65917 – Applying writing-mode:vertical-rl to td does not make the table cell vertical

• Status: NEW
• Component: Layout and Rendering

[Koji Ishii]

Created attachment 103355 [details]
Table cell with writing-mode:vertical-rl applied

Applying writing-mode:vertical-rl to td does not seem to be working. I have attached a sample HTML file that reproduce the issue with the Nightly build.

I then tried to put <p> inside td and applied writing-mode:vertical-rl, which made the text vertical but its position isn't correct.

Both rows renders as I expect in IE9.

I tried this on Safari and Nightly build on Lion, and also on Safari and Chrome on Windows. All resulted the same.

This is my first try to put a bug in webkit, so please excuse me if I made something incorrect, and I apologize in advance for any troubles I may have caused. I tried to look for dup bugs, 46997 may be related but I couldn't figure out if this is dup of the bug or not.

<td> with writing-mode:vertical-rl fails in Windows on Chrome 16 as well.

<td> with writing-mode (old IE lingo) works in IE9, but renders the <td> with the wrong height (if the <tr> is taller than the writing-mode cell needs, it shortens the cell - easily revealed by putting a border on cells and making a tall <td>); please make sure the <td> maintains the same row height as other cells when writing mode is changed.

Created attachment 121566 [details]
writing-mode:vertical-rl test on td and th tags.

writing-mode should work on <th> and <td> elements, per http://www.w3.org/TR/css3-writing-modes/#writing-mode and http://dev.w3.org/csswg/css3-writing-modes/#writing-mode (working draft and editors draft), which excludes table row groups, table column groups, table rows, and table columns, but not table header cells or table data cells.

Blocks 46123

[Christian Biesinger]

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

[Christian Biesinger]

Note, IE supports this. http://jsbin.com/ayeyag/4

[Gérard Talbot (no longer involved)]

2 additional reduced and self-explanatory tests:

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/orthogonal-vrl-table-cells-001.html

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/orthogonal-vrl-table-cells-002.html

[Gérard Talbot (no longer involved)]

2 additional tests (testing a table with realistical tabular data; both border-collapse models tested):


http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s73-orthogonal-vrl-table-cells-004.xht


http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s73-orthogonal-vrl-table-cells-006.xht


The tester must have "Liberation Sans" font or Arial font installed on his/her system.

Note that Firefox fails to render 'text-align: left' correctly for cells in orthogonal flow.

[Theresa O'Connor]

This is being tracked at W3C in a JLREQ issue: https://github.com/w3c/jlreq/issues/171

Note that this has been fixed in Blink recently (June 2021).

[Radar WebKit Bug Importer]

<rdar://problem/81518948>

[Gérard Talbot (no longer involved)]

More tests:

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s73-orthogonal-table-cell-003.xht

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/orthogonal-parent-shrink-to-fit-001/

is 24 sub-tests on shrink-to-fit inline-blocks, floats, table-cells, block boxes with an orthogonal child.

[Kent Tamura]

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

[Kent Tamura]

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

[Myles C. Maxfield]

This is important for klreq. See https://w3c.github.io/klreq/gap-analysis/#issue52_vertical_text

[Ahmad Saleem]

@Alan - Will this be fixed by?

https://github.com/WebKit/WebKit/commit/0d695812f5b0daef531a9760903457364d2265ff

[zalan]

(In reply to Ahmad Saleem from comment #15)
> @Alan - Will this be fixed by?
> 
> https://github.com/WebKit/WebKit/commit/
> 0d695812f5b0daef531a9760903457364d2265ff
Sadly no. this looks like a mess now. Will look into it.