-
Notifications
You must be signed in to change notification settings - Fork 17
Table cells don't handle vertical direction properly #171
Copy link
Copy link
Open
Labels
doc:jlreqUsed for gap analysis (only) to indicate target document.Used for gap analysis (only) to indicate target document.doc:mlreqgapThe first comment in this issue is read by the gap-analysis document.The first comment in this issue is read by the gap-analysis document.i:page_layoutGeneral page layout & progressionGeneral page layout & progressioni:writing_modeWriting modeWriting model:jaJapaneseJapanesep:advancedUsed for gap analysis issues (only) to indicate priority.Used for gap analysis issues (only) to indicate priority.s:jpanJapanese scriptJapanese scriptx:clreqx:jpanx:webkit
Metadata
Metadata
Assignees
Labels
doc:jlreqUsed for gap analysis (only) to indicate target document.Used for gap analysis (only) to indicate target document.doc:mlreqgapThe first comment in this issue is read by the gap-analysis document.The first comment in this issue is read by the gap-analysis document.i:page_layoutGeneral page layout & progressionGeneral page layout & progressioni:writing_modeWriting modeWriting model:jaJapaneseJapanesep:advancedUsed for gap analysis issues (only) to indicate priority.Used for gap analysis issues (only) to indicate priority.s:jpanJapanese scriptJapanese scriptx:clreqx:jpanx:webkit
Type
Fields
Give feedbackNo fields configured for issues without a type.
Projects
Status
Browser bug raised
This issue is applicable to Japanese, Chinese, Korean, and Mongolian.
If you place the
writing-modeproperty with a value ofvertical-rl/lron an individual table cell in a table that overall has a horizontal direction, you would expect the text in that cell to be displayed vertically, but in some browsers it isn't, unless the height of thetdelement is specified.This appears to be because the text is wrapped character-by-character (cf. Mongolian, where words are wrapped rather than characters).
Tests & results:
Interactive test, Adding writing-mode:vertical-rl to a td element produces vertical text, with lines stacking RTL.
Interactive test, Adding writing-mode:vertical-lr to a td element produces vertical text, with lines stacking LTR.
This works as expected in Gecko and Blink browsers, as well as in legacy Edge and Internet Explorer. However, Webkit browsers, leave the text horizontal but rotate the Japanese characters to the left.
Interactive test, Adding writing-mode to a
spaninside atdproduces the expected directionalityWrapping the text to be made vertical in a
spaninside the cell, and applyingwriting-mode:vertical-rlto that gives the expected result in Blink, but in Safari it's necessary to also apply a height setting for the text to display properly.Browser bug reports:
Blink • Webkit
Priority:
Correct behaviour here is a pretty basic expectation for handling directionality in tables, but since it only occurs when the direction of the
tdelement is different from that of the overall table, this can probably be marked as advanced.Updates:
June 2021: This gap was fixed for Blink.