Accent gap

[tmke8]

I don’t know if this is just due to buggy browser implementations, but Chrome and Safari both do not have any gap between the base and the accent. (And given that these two follow the Core specification more closely than Firefox does, at the moment, this leads me to think that they are following the spec here and Firefox doesn’t.)

Consider this snippet (MDN playground):

<math display="block">
  <mover accent="true">
    <mi>x</mi>
    <mo stretchy="true">&#x2D9;</mo>
  </mover>
</math>

(The stretchy="true" is there just to work around a Safari bug.)

Chrome and Safari display it like this on my Mac, using the default math font (STIX2):

While Firefox displays it like this:

One can fix the problem in Chrome and Safari with this CSS (MDN playground):

mover[accent="true" i] > mo:nth-child(2) {
  transform: translateY(-0.2ex);
}

where I chose -0.2ex because it roughly looks to me like what the gap in LaTeX is. (EDIT: though perhaps 0.15ex is a better value and perhaps using margin-bottom is better than using transform.)

It then looks like this:

Should such an accent gap be part of the spec?

---

There is an existing similar issue: #254 but it doesn't really articulate this particular problem well.

There have also been reports about this elsewhere: arXiv/html_feedback#4007

[ronkok]

I have noticed this myself. To work around this issue, the Temml library never uses accent="true". Instead, it sets style="math-depth:0".

WebKit does not correctly render style="math-depth:0", but that's a browser issue, not a specification issue.