Skip to content

Commit 5e67ebe

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 0aadb27 commit 5e67ebe

File tree

1 file changed

+33
-1
lines changed

1 file changed

+33
-1
lines changed

lib/model/katex.dart

Lines changed: 33 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,15 @@ class _KatexParser {
636639
// )
637640
break;
638641

642+
case 'overline-line':
643+
case 'underline-line':
644+
// .overline-line,
645+
// .underline-line { width: 100%; border-bottom-style: solid; }
646+
// Border applied via inline style: border-bottom-width: 0.04em;
647+
widthEm = double.infinity;
648+
borderBottomStyle = KatexSpanBorderBottomStyle.solid;
649+
break;
650+
639651
default:
640652
assert(debugLog('KaTeX: Unsupported CSS class: $spanClass'));
641653
unsupportedCssClasses.add(spanClass);
@@ -657,6 +669,8 @@ class _KatexParser {
657669
marginRightEm: _takeStyleEm(inlineStyles, 'margin-right'),
658670
color: _takeStyleColor(inlineStyles, 'color'),
659671
position: _takeStylePosition(inlineStyles, 'position'),
672+
borderBottomStyle: borderBottomStyle,
673+
borderBottomWidthEm: _takeStyleEm(inlineStyles, 'border-bottom-width')
660674
// TODO handle more CSS properties
661675
);
662676
if (inlineStyles != null && inlineStyles.isNotEmpty) {
@@ -840,6 +854,10 @@ enum KatexSpanPosition {
840854
relative,
841855
}
842856

857+
enum KatexSpanBorderBottomStyle {
858+
solid,
859+
}
860+
843861
class KatexSpanColor {
844862
const KatexSpanColor(this.r, this.g, this.b, this.a);
845863

@@ -893,6 +911,8 @@ class KatexSpanStyles {
893911

894912
final KatexSpanColor? color;
895913
final KatexSpanPosition? position;
914+
final KatexSpanBorderBottomStyle? borderBottomStyle;
915+
final double? borderBottomWidthEm;
896916

897917
const KatexSpanStyles({
898918
this.widthEm,
@@ -907,6 +927,8 @@ class KatexSpanStyles {
907927
this.textAlign,
908928
this.color,
909929
this.position,
930+
this.borderBottomStyle,
931+
this.borderBottomWidthEm,
910932
});
911933

912934
@override
@@ -924,6 +946,8 @@ class KatexSpanStyles {
924946
textAlign,
925947
color,
926948
position,
949+
borderBottomStyle,
950+
borderBottomWidthEm
927951
);
928952

929953
@override
@@ -940,7 +964,9 @@ class KatexSpanStyles {
940964
other.fontStyle == fontStyle &&
941965
other.textAlign == textAlign &&
942966
other.color == color &&
943-
other.position == position;
967+
other.position == position &&
968+
other.borderBottomStyle == borderBottomStyle &&
969+
other.borderBottomWidthEm == borderBottomWidthEm;
944970
}
945971

946972
@override
@@ -958,6 +984,8 @@ class KatexSpanStyles {
958984
if (textAlign != null) args.add('textAlign: $textAlign');
959985
if (color != null) args.add('color: $color');
960986
if (position != null) args.add('position: $position');
987+
if (borderBottomStyle != null) args.add('borderBottomStyle: $borderBottomStyle');
988+
if (borderBottomWidthEm != null) args.add('borderBottomWidthEm: $borderBottomWidthEm');
961989
return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
962990
}
963991

@@ -975,6 +1003,8 @@ class KatexSpanStyles {
9751003
bool textAlign = true,
9761004
bool color = true,
9771005
bool position = true,
1006+
bool borderBottomStyle = true,
1007+
bool borderBottomWidthEm = true,
9781008
}) {
9791009
return KatexSpanStyles(
9801010
widthEm: widthEm ? this.widthEm : null,
@@ -989,6 +1019,8 @@ class KatexSpanStyles {
9891019
textAlign: textAlign ? this.textAlign : null,
9901020
color: color ? this.color : null,
9911021
position: position ? this.position : null,
1022+
borderBottomStyle: borderBottomStyle ? this.borderBottomStyle : null,
1023+
borderBottomWidthEm: borderBottomWidthEm ? this.borderBottomWidthEm : null,
9921024
);
9931025
}
9941026
}

0 commit comments

Comments
 (0)