Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gap-analysis] Table cells in vertical writing mode #155

Closed
xfq opened this issue Dec 8, 2019 · 5 comments
Closed

[gap-analysis] Table cells in vertical writing mode #155

xfq opened this issue Dec 8, 2019 · 5 comments
Labels
gap-analysis [OBSOLETE] Issues and discussions on Japanese Gap Analysis document

Comments

@xfq
Copy link
Member

xfq commented Dec 8, 2019

In https://w3c.github.io/jlreq/gap-analysis/#table-cells :

If you place the writing-mode property with a value of vertical-rl on an individual table cell, you would expect the text in that cell to be displayed vertically. This works as expected in Edge, Internet Explorer and Gecko browsers. Blink and Webkit browsers, on the other hand, leave the text horizontal but rotate the characters to the left. Note, also, by the way that you have to set the height of the cell in these browsers for a span to be displayed vertically.

In https://www.w3.org/International/tests/repo/results/writing-mode-vertical#rl_tables , Chrome and Safari also passed the tests and they seem to work as expected. Should the gap analysis be updated?

@xfq xfq added the gap-analysis [OBSOLETE] Issues and discussions on Japanese Gap Analysis document label Dec 8, 2019
@himorin
Copy link
Contributor

himorin commented Dec 9, 2019

see also: https://www.w3.org/2019/12/06-clreq-minutes.html#x02 (for PR above)

@r12a
Copy link
Contributor

r12a commented Feb 4, 2020

The link to the tests points to some tests that relate to table handling, but not to tests that address this specific issue, so i should change that.

Here's a test that illustrates the problem: https://w3c.github.io/i18n-tests/exploratory/vanilla/?text=%3Ctable%20style%3D%22border%3A1px%20solid%20red%3Bmargin%3A1em%3B%22%3E%3Ctr%3E%3Ctd%20style%3D%22writing-mode%3Avertical-rl%3B%22%3E%E7%B8%A6%E6%9B%B8%E3%81%8D%3C%2Ftd%3E%3Ctd%3E%E6%A8%AA%E6%9B%B8%E3%81%8D%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3E%E6%A8%AA%E6%9B%B8%E3%81%8D%3C%2Ftd%3E%3Ctd%20style%3D%22writing-mode%3Avertical-rl%3Bheight%3A5em%22%3E%E7%B8%A6%E6%9B%B8%E3%81%8D%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E&lang=ja&fontSize=36&width=500&height=500

The test applies writing-mode:vertical-rl to the top left and bottom right cells (in the td tag). It also adds 5em of height to the bottom right cell.

In Gecko (Firefox) this looks as you'd expect. The text in the top left and bottom right table cells is vertical.

Screenshot 2020-02-04 at 06 45 19

In Blink (Chrome) there appears to be no vertical effect applied. Even though the bottom right cell has height set, the text is still horizontal.

Screenshot 2020-02-04 at 06 45 44

And in Webkit (Safari) the Japanese characters are rotated 90º left but run horizontally.

Screenshot 2020-02-04 at 06 46 01

@r12a
Copy link
Contributor

r12a commented Feb 4, 2020

I just updated the previous comment with a better designed test and the results of running that.

@r12a
Copy link
Contributor

r12a commented Feb 4, 2020

In this variant of the test, i moved the text to be set vertically into a span, and set the direction on that.

All these tests are run on my Mac, btw. If anyone sees different behaviour on another platform, please mention it.

Firefox still looks fine.

Screenshot 2020-02-04 at 07 03 49

Chrome now produces vertical text.

Screenshot 2020-02-04 at 07 04 27

Safari makes a bit of a mess of the top row, overlapping cells and displaying the vertical text one character per column, but does better if you apply height to the cell as in the bottom row.

Screenshot 2020-02-04 at 07 06 59

@xfq
Copy link
Member Author

xfq commented Feb 4, 2020

I see. It seems that I misunderstood the gap. Closing this issue.

@xfq xfq closed this as completed Feb 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
gap-analysis [OBSOLETE] Issues and discussions on Japanese Gap Analysis document
Projects
None yet
Development

No branches or pull requests

3 participants