Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle clipping of characters in CHTML better and avoid vertical scroll bars for overflow="scroll" #1171

Open
wants to merge 2 commits into
base: woff2
Choose a base branch
from
Open

Handle clipping of characters in CHTML better and avoid vertical scroll bars for overflow="scroll" #1171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a70cd73
Handle clipping of characters in CHTML better so that selections look…
dpvc Nov 23, 2024
bb463e3
Fixes requested by prettier
dpvc Nov 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion ts/output/chtml.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,17 @@ 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' },
Expand Down
27 changes: 6 additions & 21 deletions ts/output/chtml/Wrappers/math.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
},
};

/**
Expand Down
22 changes: 20 additions & 2 deletions ts/output/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
};

/**
Expand Down
2 changes: 1 addition & 1 deletion ts/output/svg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export class SVG<N, T, D> extends CommonOutputJax<
},
'rect[sre-highlighter-added]': {
stroke: 'black',
'stroke-width': '40px',
'stroke-width': '80px',
},
};

Expand Down
22 changes: 3 additions & 19 deletions ts/output/svg/Wrappers/math.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down