Bug 48936 - The underline position for Japanese/Korean vertical text is wrong.
Summary: The underline position for Japanese/Korean vertical text is wrong.
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC OS X 10.5
: P2 Normal
Assignee: Dave Hyatt
URL:
Keywords:
Depends on:
Blocks: 46123 49408
  Show dependency treegraph
 
Reported: 2010-11-03 11:19 PDT by Dave Hyatt
Modified: 2018-05-17 07:38 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Dave Hyatt 2010-11-03 11:19:26 PDT
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.
Comment 1 Dave Hyatt 2011-02-23 12:02:35 PST
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.
Comment 2 Koji Ishii 2012-02-18 01:29:55 PST
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
Comment 3 Gérard Talbot 2016-05-09 15:39:31 PDT
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.
Comment 4 nanto_vi (TOYAMA Nao) 2018-05-17 07:38:30 PDT
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/