1383584 - [css-writing-modes] Centrally baseline-aligned glyphs in non-closed <td> tags with [specified or non-specified] font-family

Status: NEW

(Core :: Layout: Tables, defect, P3)

Description

[Gérard Talbot]

Having a [specified or a non-specified] font-family in non-closed <td> tags of table with 'writing-mode: vertical-rl' affect baseline-alignment of glyphs.

The following 4 files will attempt to demonstrate a bug here:

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-no-specified-font.html

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-TakaoPGothic-font-specified.html

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-NotoSans-font-specified.html

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-Hiragino-font-specified.html


Details on these 4 files
------------------------

TakaoPGothic font face is the default, system font that handles webpage that uses Japanese glyphs under Linux Kubuntu distribution (and presumably also the whole *buntu distribution family). So, although TakaoPGothic font face is not specified in the file centrally-baselined-td-unclosed-no-specified-font.html , the TakaoPGothic font face will be the default system font that Firefox 54+ will use under Kubuntu distribution. Developer tools will report that centrally-baselined-td-unclosed-no-specified-font.html uses, resorts to TakaoPGothic font face to display that webpage.


centrally-baselined-td-unclosed-TakaoPGothic-font-specified.html file uses TakaoPGothic font face since it is the specified font-family for that file. Again, I assume here that the tester uses an *buntu distribution.

 
centrally-baselined-td-unclosed-NotoSans-font-specified.html file uses "Noto Sans CJK JP" font face since it is the specified font-family for that file. Again, I assume here that the tester uses an *buntu distribution. What is special about "Noto Sans CJK JP" font face? It is the default system font that Chrome 59+ will use under Kubuntu distribution (and presumably also for the whole *buntu distribution family).


centrally-baselined-td-unclosed-Hiragino-font-specified.html uses "Hiragino Kaku Gothic ProN" font face since it is the specified font-family for that file. Here, I postulate that the tester uses Mac OS X 10.10 or higher. What is special about "Hiragino Kaku Gothic ProN" font face? I assume that "Hiragino Kaku Gothic ProN" font face is the default system font that Firefox 54+ will use, will resort to under Mac OS X 10.10 or higher. I hope to get Masaya Nakamura feedback in this bug report.


Each file displays 3 tables of 2 cells each, side-by-side, with the only apparent display difference being the color of glyphs.


Meaning of color
----------------

Orange glyphs involve a table with 2 non-closed <td> tags. It is on the far righthand side of the page.

Blue glyphs involve a <div> with 'display: inline-table' and 2 <span>s with 'display: table-cell'. It is in between the other 2 <table>s.

Teal glyphs involve a table with 2 </td>s tags. It is on the lefthand side.

The only code difference between orange and teal related <table>s in each of the 4 files is the presence or absence of </td> tags.


Actual results in Firefox 54 and Firefox 56 buildID=20170723144049
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The orange glyphs ARE NOT centrally baseline-aligned inside the cells when the font-family is not specified or when the font-family is not matched on the tester's system.


Expected results in Firefox 54 and Firefox 56 buildID=20170723144049
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The orange glyphs SHOULD BE centrally baseline-aligned inside the cells when the font-family is not specified or when the font-family is not matched on the tester's system.


Notes
-----
- I have deliberately included /* font-family: "TakaoPGothic"; */, /* font-family: "Noto Sans CJK JP"; */ and /* font-family: "Hiragino Kaku Gothic ProN"; */ so that the tester can toggle ON and OFF the checkboxes of any of these 3 font-family declarations in Inspection tool of Developer tools to observe the small but noticeable difference in the baseline-alignment layout of the glyphs with Firefox 54+ as well as with Chrome 59+
- Chrome 59+ definitely seems to have a somewhat related problem with handling the 4 files when font-family is not specifically matched on the tester's system. If the font-family is not declared (as in centrally-baselined-td-unclosed-no-specified-font.html ) or if it is not installed on the tester's system (as in centrally-baselined-td-unclosed-Hiragino-font-specified.html for non Mac OS X 10.10+ users like me), then glyphs of all 3 tables are NOT centrally baseline-aligned inside the cells. I plan to file a bug report for Chrome 59+
- the file that specifies "Hiragino Kaku Gothic ProN" font face exists only to see if the bug is also reproducible under Mac OS X 10.10 or higher, with the assistance of Masaya Nakamura
- Firefox 56 buildID=20170723144049 screen shots will follow
- I use Linux 4.10.0-28-generic x86_64, Qt: 5.7.1, KDE 4.14.30; Kubuntu (zesty) 17.04
- I've searched for duplicates and did not find any.

Comment 1

[Gérard Talbot]

Attachment: Firefox 56 screen shot of centrally-baselined-td-unclosed-no-specified-font.html

The orange glyphs are not accurately centralized while Inspector tool nevertheless reports that TakaoPGothic font is being used.

Comment 2

[Gérard Talbot]

Attachment: Firefox 56 screen shot of centrally-baselined-td-unclosed-TakaoPGothic-font-specified.html

The orange glyphs are accurately centralized and Inspector tool reports that TakaoPGothic font is being used.

Comment 3

[Gérard Talbot]

Attachment: Firefox 56 screen shot of centrally-baselined-td-unclosed-NotoSans-font-specified.html

The orange glyphs are not perfectly (but almost! only a few pixels off) centralized and Inspector tool reports that "Noto Sans CJK JP" font is being used.

Comment 4

[Gérard Talbot]

Masaya Nakamura,

It would be great, appreciated and useful if you could upload a screenshot of
 
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-no-specified-font.html

and a screenshot of

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-Hiragino-font-specified.html

while using a very recent Firefox version from your, on your Mac OS X 10.x operating system.

Comment 5

[Gérard Talbot]

To Windows 7, 8.1 and 10 users
******************************

If you know what is the default system font for Japanese glyphs and for 'writing-mode: vertical-rl' text in Firefox 54+, then please let me know about this. I can add another file for this bug report.

Example given: Let's say "Lucida Sans Unicode" is the default system font for Japanese glyphs and for 'writing-mode: vertical-rl' text in Firefox 54+ under Windows 7, then I will add:

/* font-family: "Lucida Sans Unicode"; */

in the file

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-no-specified-font.html

and I will create a

centrally-baselined-td-unclosed-Lucida-font-specified.html

file accordingly. We would then know for sure if this bug happens in other non-Linux operating systems.

Comment 6

[Masaya Nakamura]

Attachment: Firefox 56, macOS 10.12 screen shot of centrally-baselined-td-unclosed-no-specified-font.html

Comment 7

[Masaya Nakamura]

Attachment: Firefox 56, macOS 10.12 screen shot of centrally-baselined-td-unclosed-Hiragino-font-specified.html

Comment 8

[Masaya Nakamura]

> Masaya Nakamura,
> It would be great, appreciated and useful if you could upload a screenshot of
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-no-specified-font.html
> and a screenshot of
> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/centrally-baselined-td-unclosed-Hiragino-font-specified.html
> while using a very recent Firefox version from your, on your Mac OS X 10.x operating system.

I uploaded two screen shots.

- macOS 10.12.6
- Firefox 54.0.1
- newly created profile

Comment 9

[Gérard Talbot]

Great! I can see now that this bug is NOT reproducible under Mac OS X.
Thank you, Masaya!

Comment 10

[Firefox Bug Husbandry Bot]

https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Move_fix-optionals