Re: [csswg-drafts] [css-inline] text-layout: glyph-bounding-box

> do you have additional examples? With how many fonts are you facing this problem?

With way too many. It's an issue in almost every project where large text is part of the design. (I always do testing across operating systems, devices, and browsers.)

A test-page using the font Hetilica:
https://tobireif.com/non_site_stuff/test_case_for_font_position_report_yet_another_font/

A test-page using the popular font Frankfurter:
https://tobireif.com/non_site_stuff/test_case_for_font_position_report/

Other fonts where the issue occurs include Ruritania, QuigleyWiggly, Scratch, and BigFish.
See the code at https://github.com/w3c/csswg-drafts/issues/2228#issuecomment-366312842 .
Each word "#svg" etc uses a different one of the above fonts. There were text-layout issues across operating systems and across browsers.

And there several StackOverflow pages which most likely are the tip of the iceberg.

>  I would strictly prefer not have per-@font-face overrides for metrics. Implementing and maintaining such overrides introduces a big maintenance burden and unnecessary implementation cost, I doubt this is the right solution to this problem.

I agree! They'd mean way too much work for the web developer, and for implementers.

All I want is being able to opt into the same text-layout that browsers use for SVG text, for example
```
text-layout: glyph-bounding-box;
```

This line would set the same text positioning that browsers use for SVG.

One line of CSS to type for the web developer, and for implementers it probably wouldn't be a lot of work because that text-layout has already been implemented for SVG text.

And it wouldn't break any existing websites because it'd be opt in (via the new property).

> If there are technical issues with the fonts, it is possible to contact the vendor and get them fixed.

Typical project deadlines don't leave time for requesting, awaiting, and hoping for a fix - for each used font. And some type foundries might never reply. And the license might not allow me to fix it.

> A browser-side override is not a reasonable solution to work around fonts with inconsistent metrics.

The sad truth is that it's a widespread issue, and fixing each font is not feasible, thus a solution is required. Some designs feature many fonts. In one design (one single page) I had to compensate the text-layout for five(!) fonts (see the example in https://github.com/w3c/csswg-drafts/issues/2228#issuecomment-366312842 ). I'd much prefer it if every font would work well cross-platform, but alas that is not the case.

All I want is being able to opt into the same text-layout that browsers use for SVG text, eg

```
glyph-positioning: as-for-svg;
```
or eg
```
text-layout: glyph-bounding-box;
```

Having such a property would mean that we could opt into text layout that's consistent across platforms without having to replace the HTML text with SVG text, without having to wait for font creators to fix each and every used font, and without having to compensate for the differences by applying OS-specific spacing. Instead we could opt into an already-implemented text-layout option where the glyphs stay in the same position across platforms.

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

Received on Tuesday, 26 June 2018 10:02:16 UTC