Skip to content

Commit 3853e66

Browse files
dpvcdpvc
authored
Merge pull request #1171 from mathjax/char-clipping
Handle clipping of characters in CHTML better and avoid vertical scroll bars for overflow="scroll"
2 parents d49dfc9 + 1cd0223 commit 3853e66

5 files changed

Lines changed: 41 additions & 44 deletions

File tree

‎ts/output/chtml.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,17 @@ export class CHTML<N, T, D> extends CommonOutputJax<
9797
'white-space': 'nowrap',
9898
},
9999

100-
'mjx-container[jax="CHTML"] :focus': { outline: 'solid 3px' },
100+
//
101+
// Clip the token elements' character content,
102+
// to remove excessive height and depth of ZERO font
103+
//
104+
'mjx-mo > mjx-c, mjx-mi > mjx-c, mjx-mn > mjx-c, mjx-ms > mjx-c, mjx-mtext > mjx-c':
105+
{
106+
'clip-path':
107+
'padding-box xywh(-1em -2px calc(100% + 2em) calc(100% + 4px))',
108+
},
109+
110+
'mjx-container[jax="CHTML"] :focus': { outline: 'solid 2px' },
101111
'mjx-container [space="1"]': { 'margin-left': '.111em' },
102112
'mjx-container [space="2"]': { 'margin-left': '.167em' },
103113
'mjx-container [space="3"]': { 'margin-left': '.222em' },

‎ts/output/chtml/Wrappers/math.ts‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -148,34 +148,22 @@ export const ChtmlMath = (function <N, T, D>(): ChtmlMathClass<N, T, D> {
148148
direction: 'ltr',
149149
padding: '1px 0',
150150
},
151-
'mjx-container[jax="CHTML"][display="true"]': {
152-
display: 'block',
153-
'text-align': 'center',
154-
'justify-content': 'center',
155-
margin: '1em 0',
156-
},
157-
'mjx-container[jax="CHTML"][display="true"][width="full"]': {
158-
display: 'flex',
159-
},
160151
'mjx-container[jax="CHTML"][display="true"] mjx-math': {
161152
padding: 0,
162153
},
163-
'mjx-container[jax="CHTML"][justify="left"]': {
164-
'text-align': 'left',
165-
'justify-content': 'left',
166-
},
167-
'mjx-container[jax="CHTML"][justify="right"]': {
168-
'text-align': 'right',
169-
'justify-content': 'right',
154+
'mjx-math[breakable]': {
155+
display: 'inline',
156+
'font-family': 'inherit',
170157
},
171158
//
172159
// For inline breakpoints, use a space that is 1em width, make it breakable,
173-
// and then set the letter-spacing to make the sace the proper size.
160+
// and then set the letter-spacing to make the space the proper size.
174161
//
175162
'mjx-container[jax="CHTML"] mjx-break': {
176163
'white-space': 'normal',
177164
'line-height': '0',
178-
'font-family': 'MJX-BRK',
165+
'clip-path': 'rect(0 0 0 0)',
166+
'font-family': 'MJX-BRK !important',
179167
},
180168
'mjx-break[size="0"]': {
181169
'letter-spacing': 0.001 - 1 + 'em',
@@ -195,9 +183,6 @@ export const ChtmlMath = (function <N, T, D>(): ChtmlMathClass<N, T, D> {
195183
'mjx-break[size="5"]': {
196184
'letter-spacing': 0.333 - 1 + 'em',
197185
},
198-
'mjx-math[breakable]': {
199-
display: 'inline',
200-
},
201186
};
202187

203188
/**

‎ts/output/common.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,13 +155,31 @@ export abstract class CommonOutputJax<
155155
*/
156156
public static commonStyles: CssStyleList = {
157157
'mjx-container[overflow="scroll"][display]': {
158-
'overflow-x': 'auto',
158+
overflow: 'auto clip',
159159
'min-width': 'initial !important',
160160
},
161161
'mjx-container[overflow="truncate"][display]': {
162-
'overflow-x': 'hidden',
162+
overflow: 'hidden clip',
163163
'min-width': 'initial !important',
164164
},
165+
'mjx-container[display]': {
166+
display: 'block',
167+
'text-align': 'center',
168+
'justify-content': 'center',
169+
margin: 'calc(1em - 2px) 0',
170+
padding: '2px 0',
171+
},
172+
'mjx-container[display][width="full"]': {
173+
display: 'flex',
174+
},
175+
'mjx-container[justify="left"]': {
176+
'text-align': 'left',
177+
'justify-content': 'left',
178+
},
179+
'mjx-container[justify="right"]': {
180+
'text-align': 'right',
181+
'justify-content': 'right',
182+
},
165183
};
166184

167185
/**

‎ts/output/svg.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export class SVG<N, T, D> extends CommonOutputJax<
114114
},
115115
'rect[sre-highlighter-added]': {
116116
stroke: 'black',
117-
'stroke-width': '40px',
117+
'stroke-width': '80px',
118118
},
119119
};
120120

‎ts/output/svg/Wrappers/math.ts‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -131,31 +131,15 @@ export const SvgMath = (function <N, T, D>(): SvgMathClass<N, T, D> {
131131
* @override
132132
*/
133133
public static styles: StyleList = {
134-
'mjx-container[jax="SVG"][display="true"]': {
135-
display: 'block',
136-
'text-align': 'center',
137-
'justify-content': 'center',
138-
margin: '1em 0',
139-
},
140-
'mjx-container[jax="SVG"][display="true"][width="full"]': {
141-
display: 'flex',
142-
},
143-
'mjx-container[jax="SVG"][justify="left"]': {
144-
'text-align': 'left',
145-
'justify-content': 'left',
146-
},
147-
'mjx-container[jax="SVG"][justify="right"]': {
148-
'text-align': 'right',
149-
'justify-content': 'right',
150-
},
151134
//
152135
// For inline breakpoints, use a space that is 1em width, make it breakable,
153-
// and then set the letter-spacing to make the sace the proper size.
136+
// and then set the letter-spacing to make the space the proper size.
154137
//
155138
'mjx-container[jax="SVG"] mjx-break': {
156139
'white-space': 'normal',
157140
'line-height': '0',
158-
'font-family': 'MJX-ZERO',
141+
'clip-path': 'rect(0 0 0 0)',
142+
'font-family': 'MJX-ZERO ! important',
159143
},
160144
'mjx-break[size="0"]': {
161145
'letter-spacing': 0.001 - 1 + 'em',

0 commit comments

Comments
 (0)