Re: [csswg-drafts] [css-inline] Consistent vertical positioning of large and medium-sized text across OSs

This is a problem:

![chrome on windows](https://user-images.githubusercontent.com/80411/38564311-2ceb0708-3cdf-11e8-86ad-5f80e12ceeab.png)

It's not an issue that has an effect only inside the scope of anti-aliasing / font-smoothing / etc - instead it's an issue that has an effect which in some cases causes the large text glyphs to end up in a drastically different location: It can even obscure more than a full line of text (as in the screenshot). That overlapped/obscured text could be extremely important text, eg a warning.

Which solution to the problem do you propose?

Requiring web developers do use hacks such as the following one can't be the state of affairs that you deem acceptable.

A hack I recently had to add to a website:
```
if (navigator.platform.startsWith("Win")) {
  var h1 = document.querySelector("h1");
  h1.style.marginTop = "-0.25em";
  h1.style.marginBottom = "0.15em";
}
```

Or eg this workaround:
https://github.com/w3c/csswg-drafts/issues/2228#issuecomment-373479054
"replacing text with svg text. -> http://jsbin.com/xequz/edit?js,output "

We do need some sort of solution for being able to ensure consistent vertical positioning of large and medium-sized text across OSs/platforms (this includes eg Web Views inside native apps) and browsers.

It (obviously) should be opt-in so that no existing content is broken.

The property and value could be named eg "position-of-glyphs: consistent-across-platforms" or eg  "position-of-glyphs: platform-independent". The name or the property/value is up to you / the CSSWG, it doesn't matter too much to me.

We need some kind of solution. Which options do you see?

By the way, I never had an issue with the exact glyph positioning of small text (eg normal-sized paragraph content). If the new property would (eg for performance reasons) only have an effect on medium and large text that that'd be fine with me. In that case the property name should perhaps reflect that it doesn't affect text below eg 20px.

And: For text where it applies, eg medium and large text, the browsers (etc) would still be allowed to innovate in the ~ sub-pixel range. But the new property would solve the issue where medium/large text can eg obscure a full line of important text because the current state of large-text-positioning across platforms is in such bad shape. And where the new property is not applied, browsers (etc) are still free to position the glyphs in such drastically inconsistent ways as they're doing now. By the way the following can not be called innovation in any sincere way - instead it is a real problem that needs to be solved:

![chrome on windows](https://user-images.githubusercontent.com/80411/38566501-199389a0-3ce4-11e8-8292-8113eaa57336.png)



-- 
GitHub Notification of comment by tobireif
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2228#issuecomment-380147828 using your GitHub account

Received on Tuesday, 10 April 2018 15:42:04 UTC