User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

Visit https://standardebooks.org/manual/1.6.1/single-page#8.14.2 and look at the example.

Actual results:

Vertical line diacritics are rendered approximately one character too far to the right.

Expected results:

Vertical lines placed above the associated vowels.

Webkit renders this correctly (see attached screenshots).

The problem here occurs because the site is using the Fira Mono font, but it doesn't support the combining vertical line character (U+030D). As a result, the browser has to find a fallback font to display it, and diacritic positioning doesn't work between a base letter from one font and a diacritic from another.

In Safari (and Chrome), fallback is applied to the pair of <base letter, diacritic> together, which generally allows the diacritic to be placed better, but means that the entire combination may be stylistically wrong because it is displayed in a different font from the surrounding text. In this particular case, on macOS, it looks better in Safari than it does in Chrome (at least for me), but this just depends on the fallback font choices that happen to be made.

(You can see this issue in Chrome or Safari more clearly by applying a larger font-size: e.g. after setting font-size: 4em on that element, it's apparent that the two "e"s in the word "me̍ndĕd" don't match: the one with breve (ĕ) is rendered with Fira Code, while the one with a vertical line (e̍) is clearly rendered from a different font.)

Bug 543200 is about doing something similar to Safari/Chrome in cases like this, which would generally be an improvement; but the real issue is that the site is choosing a font that doesn't support its content.

OK, that makes sense, thanks for the explanation.

This same style is also used for the books on Standard Ebooks. Typically they’re read on an ereader which will generally use a Webkit to render, but we also make the books available online. There we style using Georgia, which also doesn’t appear to have combining vertical characters, for example the bar of verse on: https://standardebooks.org/ebooks/thomas-hardy/tess-of-the-durbervilles/text/chapter-3 . So I guess we might need to look into changing that too.

Yes, Georgia isn't a good option if you want to use diacritics like this. Here's how that fragment of verse looks in Safari, for example, because the vertical-bar isn't supported.