Skip to content

KaTeX(5/n): Handle 'position' & 'top' property in KaTeX span inline style #1627

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+138 −9
Open

KaTeX(5/n): Handle 'position' & 'top' property in KaTeX span inline style #1627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
50 changes: 45 additions & 5 deletions lib/model/katex.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,7 @@ class _KatexParser {
marginLeftEm: _takeStyleEm(inlineStyles, 'margin-left'),
marginRightEm: _takeStyleEm(inlineStyles, 'margin-right'),
color: _takeStyleColor(inlineStyles, 'color'),
position: _takeStylePosition(inlineStyles, 'position'),
// TODO handle more CSS properties
);
if (inlineStyles != null && inlineStyles.isNotEmpty) {
Expand All @@ -640,10 +641,10 @@ class _KatexParser {
_hasError = true;
}
}
// Currently, we expect `top` to only be inside a vlist, and
// we handle that case separately above.
if (styles.topEm != null) {
throw _KatexHtmlParseError('unsupported inline CSS property: top');
if (styles.topEm != null && styles.position != KatexSpanPosition.relative) {
// The meaning of `top` would be different without `position: relative`.
throw _KatexHtmlParseError(
'unsupported inline CSS property "top" given "position: ${styles.position}"');
}

String? text;
Expand Down Expand Up @@ -765,6 +766,34 @@ class _KatexParser {
_hasError = true;
return null;
}

/// Remove the given property from the given style map,
/// and parse as a CSS position value.
///
/// If the property is present but is not a valid CSS position value,
/// record an error and return null.
///
/// If the property is absent, return null with no error.
///
/// If the map is null, treat it as empty.
///
/// To produce the map this method expects, see [_parseInlineStyles].
KatexSpanPosition? _takeStylePosition(Map<String, css_visitor.Expression>? styles, String property) {
final expression = styles?.remove(property);
if (expression == null) return null;
if (expression case css_visitor.LiteralTerm(:final value)) {
if (value case css_visitor.Identifier(:final name)) {
if (name == 'relative') {
return KatexSpanPosition.relative;
}
}
}
assert(debugLog('KaTeX: Unsupported value for CSS property $property,'
' expected a CSS position value: ${expression.toDebugString()}'));
unsupportedInlineCssProperties.add(property);
_hasError = true;
return null;
}
}

enum KatexSpanFontWeight {
Expand All @@ -782,6 +811,10 @@ enum KatexSpanTextAlign {
right,
}

enum KatexSpanPosition {
relative,
}

class KatexSpanColor {
const KatexSpanColor(this.r, this.g, this.b, this.a);

Expand Down Expand Up @@ -832,6 +865,7 @@ class KatexSpanStyles {
final KatexSpanTextAlign? textAlign;

final KatexSpanColor? color;
final KatexSpanPosition? position;

const KatexSpanStyles({
this.heightEm,
Expand All @@ -844,6 +878,7 @@ class KatexSpanStyles {
this.fontStyle,
this.textAlign,
this.color,
this.position,
});

@override
Expand All @@ -859,6 +894,7 @@ class KatexSpanStyles {
fontStyle,
textAlign,
color,
position,
);

@override
Expand All @@ -873,7 +909,8 @@ class KatexSpanStyles {
other.fontWeight == fontWeight &&
other.fontStyle == fontStyle &&
other.textAlign == textAlign &&
other.color == color;
other.color == color &&
other.position == position;
}

@override
Expand All @@ -889,6 +926,7 @@ class KatexSpanStyles {
if (fontStyle != null) args.add('fontStyle: $fontStyle');
if (textAlign != null) args.add('textAlign: $textAlign');
if (color != null) args.add('color: $color');
if (position != null) args.add('position: $position');
return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
}

Expand All @@ -904,6 +942,7 @@ class KatexSpanStyles {
bool fontStyle = true,
bool textAlign = true,
bool color = true,
bool position = true,
}) {
return KatexSpanStyles(
heightEm: heightEm ? this.heightEm : null,
Expand All @@ -916,6 +955,7 @@ class KatexSpanStyles {
fontStyle: fontStyle ? this.fontStyle : null,
textAlign: textAlign ? this.textAlign : null,
color: color ? this.color : null,
position: position ? this.position : null,
);
}
}
Expand Down
20 changes: 16 additions & 4 deletions lib/widgets/katex.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ class _KatexSpan extends StatelessWidget {
}

final styles = node.styles;

// Currently, we expect `top` to be only present with the
// vlist inner row span, and parser handles that explicitly.
assert(styles.topEm == null);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This assert still seems quite relevant — but only in the case where position is null.

if (styles.topEm != null) {
// The meaning of `top` would be different without `position: relative`.
assert(styles.position == KatexSpanPosition.relative);
}

final fontFamily = styles.fontFamily;
final fontSize = switch (styles.fontSizeEm) {
Expand Down Expand Up @@ -180,6 +180,18 @@ class _KatexSpan extends StatelessWidget {
widget = Padding(padding: margin, child: widget);
}

switch (styles.position) {
case KatexSpanPosition.relative:
if (styles.topEm case final topEm?) {
widget = Transform.translate(
offset: Offset(0, topEm * em),
child: widget);
}

case null:
break;
}

return widget;
}
}
Expand Down
68 changes: 68 additions & 0 deletions test/model/katex_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -643,6 +643,72 @@ class KatexExample extends ContentExample {
text: '∗'),
]),
]);

static final bigOperators = KatexExample.block(
r'big operators: \int',
// https://chat.zulip.org/#narrow/channel/7-test-here/topic/Rajesh/near/2240766
r'\int dx',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I wasn't clear enough — for making this example more complex, I really did mean just the screenshots 🙂. In the test code, it's nice to keep it as simple as possible. (And this test doesn't really gain anything from having the additional elements.)

'<p>'
'<span class="katex-display"><span class="katex">'
'<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mo>∫</mo><mi>d</mi><mi>x</mi></mrow><annotation encoding="application/x-tex">\\int dx</annotation></semantics></math></span>'
'<span class="katex-html" aria-hidden="true">'
'<span class="base">'
'<span class="strut" style="height:2.2222em;vertical-align:-0.8622em;"></span>'
'<span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011em;">∫</span>'
'<span class="mspace" style="margin-right:0.1667em;"></span>'
'<span class="mord mathnormal">d</span>'
'<span class="mord mathnormal">x</span></span></span></span></span></p>', [
KatexSpanNode(nodes: [
KatexStrutNode(heightEm: 2.2222, verticalAlignEm: -0.8622),
KatexSpanNode(
styles: KatexSpanStyles(
topEm: -0.0011,
marginRightEm: 0.44445,
fontFamily: 'KaTeX_Size2',
position: KatexSpanPosition.relative),
text: '∫'),
KatexSpanNode(styles: KatexSpanStyles(marginRightEm: 0.1667), nodes: []),
KatexSpanNode(
styles: KatexSpanStyles(fontFamily: 'KaTeX_Math', fontStyle: KatexSpanFontStyle.italic),
text: 'd'),
KatexSpanNode(
styles: KatexSpanStyles(fontFamily: 'KaTeX_Math', fontStyle: KatexSpanFontStyle.italic),
text: 'x'),
]),
]);

static final colonEquals = KatexExample.block(
r'\colonequals relation',
// https://chat.zulip.org/#narrow/channel/7-test-here/topic/Rajesh/near/2244936
r'\colonequals',
'<p>'
'<span class="katex-display"><span class="katex">'
'<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mo><mi mathvariant="normal">≔</mi></mo></mrow><annotation encoding="application/x-tex">\\colonequals</annotation></semantics></math></span>'
'<span class="katex-html" aria-hidden="true">'
'<span class="base">'
'<span class="strut" style="height:0.4306em;"></span>'
'<span class="mrel">'
'<span class="mrel">'
'<span class="mop" style="position:relative;top:-0.0347em;">:</span></span>'
'<span class="mrel">'
'<span class="mspace" style="margin-right:-0.0667em;"></span></span>'
'<span class="mrel">=</span></span></span></span></span></span></p>', [
KatexSpanNode(nodes: [
KatexStrutNode(heightEm: 0.4306, verticalAlignEm: null),
KatexSpanNode(nodes: [
KatexSpanNode(nodes: [
KatexSpanNode(
styles: KatexSpanStyles(topEm: -0.0347, position: KatexSpanPosition.relative),
text: ':'),
]),
KatexSpanNode(nodes: [
KatexSpanNode(nodes: []),
KatexNegativeMarginNode(leftOffsetEm: -0.0667, nodes: []),
]),
KatexSpanNode(text: '='),
]),
]),
]);
}

void main() async {
Expand All @@ -663,6 +729,8 @@ void main() async {
testParseExample(KatexExample.textColor);
testParseExample(KatexExample.customColorMacro);
testParseExample(KatexExample.phantom);
testParseExample(KatexExample.bigOperators);
testParseExample(KatexExample.colonEquals);

group('parseCssHexColor', () {
const testCases = [
Expand Down
9 changes: 9 additions & 0 deletions test/widgets/katex_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,15 @@ void main() {
('X', Offset(0.00, 7.04), Size(17.03, 25.00)),
('n', Offset(17.03, 15.90), Size(8.63, 17.00)),
]),
(KatexExample.bigOperators, skip: false, [
('∫', Offset(0.00, 12.02), Size(11.43, 25.00)),
('d', Offset(24.00, 12.03), Size(10.69, 25.00)),
('x', Offset(34.70, 12.03), Size(11.76, 25.00)),
]),
Comment on lines +76 to +80
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe even leave this one out of this widget test, since the test isn't sensitive enough to pick up whether the code is working.

(KatexExample.colonEquals, skip: false, [
(':', Offset(0.00, 3.45), Size(5.72, 25.00)),
('=', Offset(5.72, 3.92), Size(16.00, 25.00)),
]),
];

for (final testCase in testCases) {
Expand Down