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

> Does this font have different metrics on different OSes?

I don't know. If it does I need to override that.

I need a way to ensure consistent large-text positioning across platforms, no matter what the respective font says.

It is not feasible for me to fix (or change or replace) each font file I use.

I need some kind of solution, eg a CSS property that allows me to request consistent text positioning across platforms - independent of what the font file says. An opt-in that overrides anything that causes the cross-OSs differences regarding the vertical positioning of large text.

Here's a hack from an older website (put on protective glasses, it uses jQuery). It applies workarounds to a set of text strings where each text string uses a different font:

```
(function() {

/*
The font rendering/spacing is different across OSs and browsers,
so here goes a hack:
*/

var svg = $('#svg');
var javascript = $('#javascript');
var css = $('#css');
var pixi = $('#pixi');
var angular = $('#angular');

var ua = navigator.userAgent.toLowerCase();
// Firefox:
if($.browser.mozilla) {
  angular.css({
    'margin-top': '10px',
    'left': '-170px'
  });
}
if(/windows/.test(ua)){
  // Firefox:
  if($.browser.mozilla) {
    svg.css({'margin-top': '-24px'});
    javascript.css({'margin-top': '-3px'});
    css.css({'margin-top': '-12px'});
    pixi.css({'margin-top': '36px'});
  }
  // Chrome:
  if(/chrome/.test(ua)) {
    svg.css({'margin-top': '-22px'});
    javascript.css({'margin-top': '-1px'});
    css.css({'margin-top': '-12px'});
    pixi.css({'margin-top': '38px'});
  }
  // IE, Edge:
  if(/msie|trident|edge/.test(ua)) {
    svg.css({'margin-top': '-14px'});
    angular.css({
      'margin-top': '10px',
      'left': '-180px'
    });
    javascript.css({'margin-top': '12px'});
    css.css({'margin-top': '1px'});
    pixi.css({'margin-top': '28px'});
  }
}

}());
```

I can continue to apply such hacks, but I'd strongly prefer writing one line of CSS which prevents the case where a large-text based layout is OK on MacOS but broken on Windows.

Even if it is the intent of the respective font designer to have large text on Windows in a drastically different vertical position than on Mac so that the spacing of the layout is broken (which can't really be the intent of any font creator), I still need a way to ensure consistent positioning of large text glyphs across OSs and browsers.

Per default, the intent of the font creator is honoured (if that's really what's currently happening and causing the issues I'm seeing). You'd simply give CSS authors the *option* to request that their large text doesn't jump to a problematically different y-position on Windows vs MacOS (no matter what caused that jump before the property got applied, and no matter what the font file says).

Side by side:

<img width="890" alt="screenshot" src="https://user-images.githubusercontent.com/80411/38673020-34fab48a-3e50-11e8-9264-6ee374e41ea1.png">

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

Received on Thursday, 12 April 2018 10:56:27 UTC