Bug reports for other browsers:

Edge:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15204186/

Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=1429347

My opinion is that Windows having a much larger marketshare than Mac, if something needs to be done to unify the rendering, it should be done by determining why Mac returns a different blackbox than Windows, and not the reverse.

Able to reproduce the issue on reported chrome version 63.0.3239.132 and on the latest canary 65.0.3315.0 using windows 10, Mac 10.13.1 and Ubuntu 14.04. As the issue is seen from M50(50.0.2661.0) hence considering it as non-regression and marking it as Untriaged.

Note: Respective similar spacing is seen on M50, reported and Latest version on respective Operating systems, though different OS has slight variation in spacing, yet they all have same spacing from M50 when a single OS is particularly taken into consideration.

Thanks! 

"My opinion is that Windows having a much larger marketshare than Mac, if something needs to be done to unify the rendering, it should be done by determining why Mac returns a different blackbox than Windows, and not the reverse."

Perhaps the position of the large text on MacOS is the correct position? That would mean it would have to get changed on Windows.

Browsers today by and large try to match the native text rendering of the underlying operating system which often results in differences across platforms.

For webfonts though it is not unresonable to expect similar metrics across platforms.

Thanks for the report and the detailed test case.

Thanks for considering my issue report / enhancement request.

Here are two screenshots comparing (the current version of the work-in-progress) demo page https://tobireif.com/demos/grid/ :

In Chrome on MacOS the heading is nicely centered vertically, in Chrome on Windows the space above it is larger and the space below it is smaller:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10272177/snapshots/z1742ddcab9fcd53704a

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10272176/snapshots/z4c29662885ce1b7e834

I tried it with a different font and I can't spot much difference on Mac vs Windows:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10301136/snapshots/z3cb327343d21468c137

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10301139/snapshots/zc8ebccea94e7f49e122

I hope that the issue can get resolved in some way so that this page (incl. this font) (and all pages/fonts of that type
https://tobireif.com/non_site_stuff/test_case_for_font_position_report/
get rendered consistently across OSs.

Please let me know if there's anything I could supply /try / test or anything else.

For my and many other large-text based layouts using web-fonts it's crucial to get consistent positioning across OSs.

> I tried it with a different font and I can't spot much difference on Mac vs Windows

So you meant that this is font-dependent, correct?

I haven't looked into the font data but my best guess is that the font has platform-specific metrics, while the font in #10 doesn't.

Happen to know how common fonts with platform-specific metrics are used as web fonts?

FYI, fantasai and I are talking about defining more of inline layout in CSS Inline level 4. This could be part of the discussion.

Hi Kojii,

Thanks for your reply!

> So you meant that this is font-dependent, correct?

The other font I tested doesn't demonstrate the issue, yes. But:

The large text on the page
https://tobireif.com/non_site_stuff/test_case_for_font_position_report/
gets positioned differently in Chrome on Mac vs in Chrome on Windows:

The space above the large text is 102px in Chrome on Mac
vs 125px in Chrome on Windows.

The space below the large text is 75px in Chrome on Mac
vs 52px in Chrome on Windows.

The large-text positioning / the space above and below the large text should be the same in Chrome across OSs, for this font and for all fonts where the effective position currently is different across OSs.

> I haven't looked into the font data but my best guess is that the font has platform-specific metrics, while the font in #10 doesn't.

It would be great if you could investigate.

I need consistent large-text positioning across OSs, even if I have to override/set some option (eg via CSS).

> Happen to know how common fonts with platform-specific metrics are used as web fonts?

I don't know whether the font "Frankfurter" has platform-specific metrics. I need consistent positioning across OSs no matter how common the font is or how common platform-specific metrics are.

> FYI, fantasai and I are talking about defining more of inline layout in CSS Inline level 4. This could be part of the discussion.

If CSS would allow me to ensure the same position for the large text at
https://tobireif.com/non_site_stuff/test_case_for_font_position_report/
(and for all other large and medium-sized text) I'd be happy, because eg my current (work in progress) project https://tobireif.com/demos/grid/ uses that font in large sizes and there are large-text positioning issues on that page in Chrome on MacOS vs on Windows, see eg

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10424300/snapshots/zfa955e684685aa97890

vs

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10424303/snapshots/z7586faac855fc19fb22

I know that there are (probably many) other pages/sites/layouts where large text and its position is crucial.

Thanks again!

P.S.

When a font has platform-specific metrics I need a way to override the relevant aspects in order to ensure the same vertical position across OSs.

When a font does not have platform-specific metrics the browser should ensure the same vertical position across OSs.

> When a font has platform-specific metrics I need a way to override the relevant aspects in order to ensure the same vertical position across OSs.

Can you open a new github issue here?
https://github.com/w3c/csswg-drafts/issues/

If people wishing a feature can speak directly, I think it has more impact, I can try to proxy if you want though.

CSS uses the ascent of the font for the distance from the top of the box to the baseline. So author can specify where the top of the box is, but today can't specify where the baseline is. There was a discussion in W3C CSSWG to allow authors to specify the distance, without using the ascent, but it didn't go well last time.

I already created a ticket since your comment 😁

https://github.com/w3c/csswg-drafts/issues/2228

Another test-page:
https://tobireif.com/non_site_stuff/test_case_for_font_position_report_yet_another_font/

From the above test page: Chrome on MacOS vs on Windows:

Deleted: chrome_mac_os.png 93.9 KB

	chrome_mac_os.png 93.9 KB View Download

Deleted: chrome_windows.png 57.9 KB

	chrome_windows.png 57.9 KB View Download

I hope that the above screenshots show that the issue is severe (regarding page layout).

I hope that you can ensure consistent rendering / consistent large-text-positioning in Chrome across the major OSs.

There's some recent discussion at https://github.com/w3c/csswg-drafts/issues/2228 .

"Browsers today by and large try to match the native text rendering of the underlying operating system which often results in differences across platforms.

For webfonts though it is not unresonable to expect similar metrics across platforms.

Thanks for the report and the detailed test case."

Thanks again!

Please check out the current version of the top post at https://github.com/w3c/csswg-drafts/issues/2228 .
I hope you/Chromium/Chrome/Google will support eg the solution described there.