Handle clipping of characters in CHTML better so that selections look better, and explorer outline avoids extra depth, particularly in in-line mode. Avoid vertical scroll bar for wide expressions with overflow=Scroll. Move some common CSS to common.ts

Author: dpvc

ts/output/chtml.ts

@@ -97,7 +97,15 @@ export class CHTML<N, T, D> extends CommonOutputJax<
       'white-space': 'nowrap',
     },
 
-    'mjx-container[jax="CHTML"] :focus': { outline: 'solid 3px' },
+    //
+    // Clip the token elements' character content,
+    //   to remove excessive height and depth of ZERO font
+    //
+    'mjx-mo > mjx-c, mjx-mi > mjx-c, mjx-mn > mjx-c, mjx-ms > mjx-c, mjx-mtext > mjx-c': {
+      'clip-path': 'padding-box xywh(-1em -2px calc(100% + 2em) calc(100% + 4px))',
+    },
+
+    'mjx-container[jax="CHTML"] :focus': { outline: 'solid 2px' },
     'mjx-container [space="1"]': { 'margin-left': '.111em' },
     'mjx-container [space="2"]': { 'margin-left': '.167em' },
     'mjx-container [space="3"]': { 'margin-left': '.222em' },

ts/output/chtml/Wrappers/math.ts

@@ -148,34 +148,22 @@ export const ChtmlMath = (function <N, T, D>(): ChtmlMathClass<N, T, D> {
         direction: 'ltr',
         padding: '1px 0',
       },
-      'mjx-container[jax="CHTML"][display="true"]': {
-        display: 'block',
-        'text-align': 'center',
-        'justify-content': 'center',
-        margin: '1em 0',
-      },
-      'mjx-container[jax="CHTML"][display="true"][width="full"]': {
-        display: 'flex',
-      },
       'mjx-container[jax="CHTML"][display="true"] mjx-math': {
         padding: 0,
       },
-      'mjx-container[jax="CHTML"][justify="left"]': {
-        'text-align': 'left',
-        'justify-content': 'left',
-      },
-      'mjx-container[jax="CHTML"][justify="right"]': {
-        'text-align': 'right',
-        'justify-content': 'right',
+      'mjx-math[breakable]': {
+        display: 'inline',
+        'font-family': 'inherit',
       },
       //
       //  For inline breakpoints, use a space that is 1em width, make it breakable,
-      //    and then set the letter-spacing to make the sace the proper size.
+      //    and then set the letter-spacing to make the space the proper size.
       //
       'mjx-container[jax="CHTML"] mjx-break': {
         'white-space': 'normal',
         'line-height': '0',
-        'font-family': 'MJX-BRK',
+        'clip-path': 'rect(0 0 0 0)',
+        'font-family': 'MJX-BRK !important',
       },
       'mjx-break[size="0"]': {
         'letter-spacing': 0.001 - 1 + 'em',
@@ -195,9 +183,6 @@ export const ChtmlMath = (function <N, T, D>(): ChtmlMathClass<N, T, D> {
       'mjx-break[size="5"]': {
         'letter-spacing': 0.333 - 1 + 'em',
       },
-      'mjx-math[breakable]': {
-        display: 'inline',
-      },
     };
 
     /**

ts/output/common.ts

@@ -155,13 +155,31 @@ export abstract class CommonOutputJax<
    */
   public static commonStyles: CssStyleList = {
     'mjx-container[overflow="scroll"][display]': {
-      'overflow-x': 'auto',
+      'overflow': 'auto clip',
       'min-width': 'initial !important',
     },
     'mjx-container[overflow="truncate"][display]': {
-      'overflow-x': 'hidden',
+      'overflow': 'hidden clip',
       'min-width': 'initial !important',
     },
+    'mjx-container[display]': {
+      display: 'block',
+      'text-align': 'center',
+      'justify-content': 'center',
+      margin: 'calc(1em - 2px) 0',
+      padding: '2px 0'
+    },
+    'mjx-container[display][width="full"]': {
+      display: 'flex',
+    },
+    'mjx-container[justify="left"]': {
+      'text-align': 'left',
+      'justify-content': 'left',
+    },
+    'mjx-container[justify="right"]': {
+      'text-align': 'right',
+      'justify-content': 'right',
+    },
   };
 
   /**

ts/output/svg.ts

@@ -114,7 +114,7 @@ export class SVG<N, T, D> extends CommonOutputJax<
     },
     'rect[sre-highlighter-added]': {
       stroke: 'black',
-      'stroke-width': '40px',
+      'stroke-width': '80px',
     },
   };
 

ts/output/svg/Wrappers/math.ts

@@ -131,31 +131,15 @@ export const SvgMath = (function <N, T, D>(): SvgMathClass<N, T, D> {
      * @override
      */
     public static styles: StyleList = {
-      'mjx-container[jax="SVG"][display="true"]': {
-        display: 'block',
-        'text-align': 'center',
-        'justify-content': 'center',
-        margin: '1em 0',
-      },
-      'mjx-container[jax="SVG"][display="true"][width="full"]': {
-        display: 'flex',
-      },
-      'mjx-container[jax="SVG"][justify="left"]': {
-        'text-align': 'left',
-        'justify-content': 'left',
-      },
-      'mjx-container[jax="SVG"][justify="right"]': {
-        'text-align': 'right',
-        'justify-content': 'right',
-      },
       //
       //  For inline breakpoints, use a space that is 1em width, make it breakable,
-      //    and then set the letter-spacing to make the sace the proper size.
+      //    and then set the letter-spacing to make the space the proper size.
       //
       'mjx-container[jax="SVG"] mjx-break': {
         'white-space': 'normal',
         'line-height': '0',
-        'font-family': 'MJX-ZERO',
+        'clip-path': 'rect(0 0 0 0)',
+        'font-family': 'MJX-ZERO ! important',
       },
       'mjx-break[size="0"]': {
         'letter-spacing': 0.001 - 1 + 'em',