Skip to content

Commit 570fc95

Browse files
katex: Add CSS support for overline and underline borders.
Adds parsing and styling support for the overline-line and underline-line CSS classes used in KaTeX rendering. These classes apply a solid border-bottom-style to create the visual line effect. The implementation adds: - KatexSpanBorderBottomStyle enum for border style values - borderBottomStyle and borderBottomWidthEm fields to KatexSpanStyles - Parsing of overline-line/underline-line classes from KaTeX HTML - Support for border-bottom-width inline style property The overline and underline base classes are now explicitly ignored in parsing, as they don't have CSS definitions in katex.scss but appear in the generated HTML for semantic purposes.
1 parent 134b091 commit 570fc95

File tree

1 file changed

+32
-1
lines changed

1 file changed

+32
-1
lines changed

lib/model/katex.dart

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,7 @@ class _KatexParser {
411411
KatexSpanFontWeight? fontWeight;
412412
KatexSpanFontStyle? fontStyle;
413413
KatexSpanTextAlign? textAlign;
414+
KatexSpanBorderBottomStyle? borderBottomStyle;
414415
var index = 0;
415416
while (index < spanClasses.length) {
416417
final spanClass = spanClasses[index++];
@@ -626,6 +627,8 @@ class _KatexParser {
626627
case 'nobreak':
627628
case 'allowbreak':
628629
case 'mathdefault':
630+
case 'overline':
631+
case 'underline':
629632
// Ignore these classes because they don't have a CSS definition
630633
// in katex.scss, but we encounter them in the generated HTML.
631634
// (Why are they there if they're not used? The story seems to be:
@@ -636,6 +639,14 @@ class _KatexParser {
636639
// )
637640
break;
638641

642+
case 'overline-line':
643+
case 'underline-line':
644+
// .underline-line { width: 100%; border-bottom-style: solid; }
645+
// Border applied via inline style: border-bottom-width: 0.04em;
646+
widthEm = double.infinity;
647+
borderBottomStyle = KatexSpanBorderBottomStyle.solid;
648+
break;
649+
639650
default:
640651
assert(debugLog('KaTeX: Unsupported CSS class: $spanClass'));
641652
unsupportedCssClasses.add(spanClass);
@@ -657,6 +668,8 @@ class _KatexParser {
657668
marginRightEm: _takeStyleEm(inlineStyles, 'margin-right'),
658669
color: _takeStyleColor(inlineStyles, 'color'),
659670
position: _takeStylePosition(inlineStyles, 'position'),
671+
borderBottomStyle: borderBottomStyle,
672+
borderBottomWidthEm: _takeStyleEm(inlineStyles, 'border-bottom-width')
660673
// TODO handle more CSS properties
661674
);
662675
if (inlineStyles != null && inlineStyles.isNotEmpty) {
@@ -840,6 +853,10 @@ enum KatexSpanPosition {
840853
relative,
841854
}
842855

856+
enum KatexSpanBorderBottomStyle {
857+
solid,
858+
}
859+
843860
class KatexSpanColor {
844861
const KatexSpanColor(this.r, this.g, this.b, this.a);
845862

@@ -893,6 +910,8 @@ class KatexSpanStyles {
893910

894911
final KatexSpanColor? color;
895912
final KatexSpanPosition? position;
913+
final KatexSpanBorderBottomStyle? borderBottomStyle;
914+
final double? borderBottomWidthEm;
896915

897916
const KatexSpanStyles({
898917
this.widthEm,
@@ -907,6 +926,8 @@ class KatexSpanStyles {
907926
this.textAlign,
908927
this.color,
909928
this.position,
929+
this.borderBottomStyle,
930+
this.borderBottomWidthEm,
910931
});
911932

912933
@override
@@ -924,6 +945,8 @@ class KatexSpanStyles {
924945
textAlign,
925946
color,
926947
position,
948+
borderBottomStyle,
949+
borderBottomWidthEm
927950
);
928951

929952
@override
@@ -940,7 +963,9 @@ class KatexSpanStyles {
940963
other.fontStyle == fontStyle &&
941964
other.textAlign == textAlign &&
942965
other.color == color &&
943-
other.position == position;
966+
other.position == position &&
967+
other.borderBottomStyle == borderBottomStyle &&
968+
other.borderBottomWidthEm == borderBottomWidthEm;
944969
}
945970

946971
@override
@@ -958,6 +983,8 @@ class KatexSpanStyles {
958983
if (textAlign != null) args.add('textAlign: $textAlign');
959984
if (color != null) args.add('color: $color');
960985
if (position != null) args.add('position: $position');
986+
if (borderBottomStyle != null) args.add('borderBottomStyle: $borderBottomStyle');
987+
if (borderBottomWidthEm != null) args.add('borderBottomWidthEm: $borderBottomWidthEm');
961988
return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
962989
}
963990

@@ -975,6 +1002,8 @@ class KatexSpanStyles {
9751002
bool textAlign = true,
9761003
bool color = true,
9771004
bool position = true,
1005+
bool borderBottomStyle = true,
1006+
bool borderBottomWidthEm = true,
9781007
}) {
9791008
return KatexSpanStyles(
9801009
widthEm: widthEm ? this.widthEm : null,
@@ -989,6 +1018,8 @@ class KatexSpanStyles {
9891018
textAlign: textAlign ? this.textAlign : null,
9901019
color: color ? this.color : null,
9911020
position: position ? this.position : null,
1021+
borderBottomStyle: borderBottomStyle ? this.borderBottomStyle : null,
1022+
borderBottomWidthEm: borderBottomWidthEm ? this.borderBottomWidthEm : null,
9921023
);
9931024
}
9941025
}

0 commit comments

Comments
 (0)