@pie-lib/math-input-mathlive 1.1.5-beta.13 → 1.1.5-beta.15

package/src/mf/common-styles.js

@@ -103,6 +103,10 @@ export const supsubStyles = {
   ...parallelStyles,
 };
 
+const OVERLINE_BAR_MASK =
+  'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 522\' preserveAspectRatio=\'none\'%3E' +
+  '%3Crect y=\'241\' width=\'100\' height=\'40\'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat';
+
 /** Empty placeholder boxes (answer blocks / open slots). */
 export const placeholderStyles = {
   '& .ML__placeholder': {
@@ -115,24 +119,64 @@ export const placeholderStyles = {
   '& [data-pie-empty]': {
     opacity: 0.5,
   },
+  // A filled fraction (`55/555`): MathLive's bar sits ~0.075em nearer the numerator's
+  // digits than the denominator's (measured at 40px: 8.5px above, 11.5px below).
+  // Dropping the bar 0.04em evens the two gaps. Fractions with an empty slot have
+  // their own drop below, which is more specific and overrides this one.
+  '& .ML__mfrac:not(:has([data-pie-empty])) .ML__frac-line': {
+    position: 'relative',
+    top: '0.04em',
+  },
   // A fraction with an empty slot: MathLive spaces the bar for text, but the
-  // slot's box is a taller `\rule`, so the bar hugs the numerator's box (~0.2em
-  // above vs ~0.4em below). Dropping the bar 0.16em (0.13em when the numerator is not an empty slot or follows an `x`) centres it between the two
-  // boxes. Only the bar moves, not the slots.
+  // slot's box is a taller `\rule`, so the bar hugs the numerator's box. Measured
+  // at 100px: dropping it 0.14em centres it between two boxes, and 0.13em between
+  // a real numerator (`x`, whose ink ends at the baseline) and an empty denominator.
+  // Only the bar moves, not the slots. The numerator is the second `.ML__center`
+  // (MathLive emits the denominator first).
   '& .ML__mfrac:has([data-pie-empty]) .ML__frac-line': {
     position: 'relative',
-    top: '0.16em',
+    top: '0.14em',
   },
-  // A real numerator (`x`) is lighter than an empty box and its ink ends at the
-  // baseline, so the full drop overshoots: it needs a smaller drop. The numerator is
-  // the second `.ML__center` (MathLive emits the denominator first).
   '& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line': {
     top: '0.13em',
   },
-  // Same for a mixed number (`x` then the fraction): the leading `x` is a sibling
-  // of the fraction, which a lone `\frac{}{}` does not have.
+  // A mixed number (`x` then the fraction): the leading `x` is a sibling of the
+  // fraction, which a lone `\frac{}{}` does not have, and the label's pixel
+  // rounding then lands the bar a row lower - so it takes a smaller drop. This
+  // also keeps the bar level with the `x`.
   '& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line': {
-    top: '0.13em',
+    top: '0.1em',
+  },
+  // Segment (`\overline`) vs ray / line (stretchy arrows). Over filled content
+  // MathLive draws the bar ~0.31em below the arrows' shafts, and the bar is
+  // `max(1px, 0.04em)` twice (:before + :after) while a shaft is a 0.04em path,
+  // so it also renders heavier. Raise it to the shaft height and draw it once at
+  // 0.04em. An empty slot (`data-pie-empty`) is already aligned by the struts in
+  // `withVisibleEmptySlots`, so it keeps its position. `!important`: the offset is
+  // an inline style.
+  '& .overline:not(:has([data-pie-empty])) > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span:has(> .overline-line)': {
+    top: '-4.07em !important',
+  },
+  '& .overline .overline-line': {
+    position: 'relative',
+  },
+  // Drawn as a mask with the arrow shaft's geometry (y 241-281 of a 522-high box)
+  // instead of a border, which the browser snaps to whole device pixels.
+  '& .overline .overline-line:before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '-0.241em',
+    height: '0.522em !important',
+    border: '0 !important',
+    background: 'currentColor',
+    WebkitMask: OVERLINE_BAR_MASK,
+    mask: OVERLINE_BAR_MASK,
+  },
+  '& .overline .overline-line:after': {
+    display: 'none !important',
   },
   // Stretchy accents (\overarc, \overleftrightarrow, \overrightarrow) render an
   // <svg width="100%" preserveAspectRatio="none"> inside a `.ML__stretchy`. That