Bug 65917 - Applying writing-mode:vertical-rl to td does not make the table cell vertical
Summary: Applying writing-mode:vertical-rl to td does not make the table cell vertical
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
: 113325 (view as bug list)
Depends on:
Blocks: 46123
  Show dependency treegraph
 
Reported: 2011-08-09 06:44 PDT by Koji Ishii
Modified: 2017-10-28 19:15 PDT (History)
5 users (show)

See Also:


Attachments
Table cell with writing-mode:vertical-rl applied (495 bytes, text/html)
2011-08-09 06:44 PDT, Koji Ishii
no flags Details
writing-mode:vertical-rl test on td and th tags. (1.20 KB, text/html)
2012-01-07 20:47 PST, rasamassen
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Koji Ishii 2011-08-09 06:44:24 PDT
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.
Comment 1 rasamassen 2011-12-29 06:50:04 PST
<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.
Comment 2 rasamassen 2012-01-07 20:47:10 PST
Created attachment 121566 [details]
writing-mode:vertical-rl test on td and th tags.
Comment 3 rasamassen 2012-01-07 20:58:00 PST
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.
Comment 4 rasamassen 2012-12-12 12:53:24 PST
Blocks 46123
Comment 5 Christian Biesinger 2013-03-26 10:45:37 PDT
*** Bug 113325 has been marked as a duplicate of this bug. ***
Comment 6 Christian Biesinger 2013-03-26 14:14:12 PDT
Note, IE supports this. http://jsbin.com/ayeyag/4
Comment 8 Gérard Talbot 2017-10-28 19:15:04 PDT
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.