The underline position for Japanese/Korean vertical text is wrong.

• Component: Layout and Rendering
• Status: NEW ---

[Dave Hyatt]

The underline position for Japanese/Korean vertical text is wrong.  Horizontal text uses an alphabetic baseline as the basis for the underline's position, but this is incorrect for Japanese vertical text.  In that case the underline needs to be to the left of the glyphs themselves (past the descent).

This could get tricky to implement given that vertical metrics on OS X are including the leading in the descent value.  We may have to operate using glyph bounds, since we know the glyphs are square.

[Dave Hyatt]

This problem was fixed, but apparently underlines should be on the right side.  There's a new property to control this in CSS3.  Keeping this open to track that issue.

[Koji Ishii]

I've checked in some small changes to the spec and hope that section is pretty stable now. We editors are hoping to target LC in March if no further issues come up and if WG agrees.

ED is at: http://dev.w3.org/csswg/css3-text/#text-underline-position

[Gérard Talbot]

DHTML Tests
-----------

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/text-decoration-DHTML.xht


http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/text-decoration-position-sample-dhtml.html



HTML Tests
----------

with writing-mode: vertical-lr
- - - - - - - - - - - - - - - 

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-sideways-vlr-003.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-sideways-vlr-005.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-sideways-vlr-007.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-upright-vlr-003.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-upright-vlr-005.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-upright-vlr-007.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-underline-font-size-vlr-003.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-underline-font-size-vlr-005.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-underline-mixed-vlr-003.xht


with writing-mode: vertical-rl
- - - - - - - - - - - - - - - 

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-sideways-vrl-002.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-sideways-vrl-004.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-sideways-vrl-006.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-upright-vrl-002.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-upright-vrl-004.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-text-decoration-upright-vrl-006.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-underline-font-size-vrl-002.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-underline-font-size-vrl-004.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/s75-underline-mixed-vrl-002.xht


All those tests have been submitted to W3C Writing-Mode Test suite, except the DHTML tests.

[nanto_vi (TOYAMA Nao)]

Chrome, Firefox, and Edge draw underline on the right side of Japanese/Korean vertical text but Safari draws on the left side.

https://jsfiddle.net/vknh5ozr/

[Radar WebKit Bug Importer]

<rdar://problem/121087588>