Skip to content

Commit 91e12f8

Browse files
MdSaifAliMollaMdSaifAliMolla
committed
katex: Add CSS support and corresponding model tests for overline and underline borders.
1 parent 3ae958e commit 91e12f8

File tree

2 files changed

+121
-1
lines changed

2 files changed

+121
-1
lines changed

‎lib/model/katex.dart‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -626,6 +626,13 @@ class _KatexParser {
626626
case 'nobreak':
627627
case 'allowbreak':
628628
case 'mathdefault':
629+
case 'overline':
630+
case 'underline':
631+
case 'overline-line':
632+
case 'underline-line':
633+
// .overline-line,
634+
// .underline-line { width: 100%; border-bottom-style: solid; }
635+
// Border applied via inline style: border-bottom-width: 0.04em;
629636
// Ignore these classes because they don't have a CSS definition
630637
// in katex.scss, but we encounter them in the generated HTML.
631638
// (Why are they there if they're not used? The story seems to be:
@@ -657,6 +664,7 @@ class _KatexParser {
657664
marginRightEm: _takeStyleEm(inlineStyles, 'margin-right'),
658665
color: _takeStyleColor(inlineStyles, 'color'),
659666
position: _takeStylePosition(inlineStyles, 'position'),
667+
borderBottomWidthEm: _takeStyleEm(inlineStyles, 'border-bottom-width')
660668
// TODO handle more CSS properties
661669
);
662670
if (inlineStyles != null && inlineStyles.isNotEmpty) {
@@ -893,6 +901,7 @@ class KatexSpanStyles {
893901

894902
final KatexSpanColor? color;
895903
final KatexSpanPosition? position;
904+
final double? borderBottomWidthEm;
896905

897906
const KatexSpanStyles({
898907
this.widthEm,
@@ -907,6 +916,7 @@ class KatexSpanStyles {
907916
this.textAlign,
908917
this.color,
909918
this.position,
919+
this.borderBottomWidthEm,
910920
});
911921

912922
@override
@@ -924,6 +934,7 @@ class KatexSpanStyles {
924934
textAlign,
925935
color,
926936
position,
937+
borderBottomWidthEm
927938
);
928939

929940
@override
@@ -940,7 +951,8 @@ class KatexSpanStyles {
940951
other.fontStyle == fontStyle &&
941952
other.textAlign == textAlign &&
942953
other.color == color &&
943-
other.position == position;
954+
other.position == position &&
955+
other.borderBottomWidthEm == borderBottomWidthEm;
944956
}
945957

946958
@override
@@ -958,6 +970,7 @@ class KatexSpanStyles {
958970
if (textAlign != null) args.add('textAlign: $textAlign');
959971
if (color != null) args.add('color: $color');
960972
if (position != null) args.add('position: $position');
973+
if (borderBottomWidthEm != null) args.add('borderBottomWidthEm: $borderBottomWidthEm');
961974
return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
962975
}
963976

@@ -975,6 +988,7 @@ class KatexSpanStyles {
975988
bool textAlign = true,
976989
bool color = true,
977990
bool position = true,
991+
bool borderBottomWidthEm = true,
978992
}) {
979993
return KatexSpanStyles(
980994
widthEm: widthEm ? this.widthEm : null,
@@ -989,6 +1003,7 @@ class KatexSpanStyles {
9891003
textAlign: textAlign ? this.textAlign : null,
9901004
color: color ? this.color : null,
9911005
position: position ? this.position : null,
1006+
borderBottomWidthEm: borderBottomWidthEm ? this.borderBottomWidthEm : null,
9921007
);
9931008
}
9941009
}

‎test/model/katex_test.dart‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -731,6 +731,109 @@ class KatexExample extends ContentExample {
731731
]),
732732
]),
733733
]);
734+
735+
static final overline = KatexExample.block(
736+
r'overline: \overline{AB}',
737+
// https://chat.zulip.org/#narrow/channel/7-test-here/topic/Saif.20KaTeX/near/2285099
738+
r'\overline{AB}',
739+
'<p>'
740+
'<span class="katex-display"><span class="katex">'
741+
'<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mrow><mi>A</mi><mi>B</mi></mrow><mo stretchy="true">‾</mo></mover></mrow><annotation encoding="application/x-tex">\\overline{AB}</annotation></semantics></math></span>'
742+
'<span class="katex-html" aria-hidden="true">'
743+
'<span class="base">'
744+
'<span class="strut" style="height:0.8833em;"></span>'
745+
'<span class="mord overline">'
746+
'<span class="vlist-t">'
747+
'<span class="vlist-r">'
748+
'<span class="vlist" style="height:0.8833em;">'
749+
'<span style="top:-3em;">'
750+
'<span class="pstrut" style="height:3em;"></span>'
751+
'<span class="mord">'
752+
'<span class="mord mathnormal">A</span>'
753+
'<span class="mord mathnormal" style="margin-right:0.05017em;">B</span></span></span>'
754+
'<span style="top:-3.8033em;">'
755+
'<span class="pstrut" style="height:3em;"></span>'
756+
'<span class="overline-line" style="border-bottom-width:0.04em;"></span></span></span></span></span></span></span></span></span></p>',[
757+
KatexSpanNode(nodes: [
758+
KatexStrutNode(heightEm: 0.8833, verticalAlignEm: null),
759+
KatexSpanNode(nodes: [
760+
KatexVlistNode(rows: [
761+
KatexVlistRowNode(
762+
verticalOffsetEm: -3 + 3,
763+
node: KatexSpanNode(nodes: [
764+
KatexSpanNode(nodes: [
765+
KatexSpanNode(
766+
styles: KatexSpanStyles(fontFamily: 'KaTeX_Math', fontStyle: KatexSpanFontStyle.italic),
767+
text: 'A'),
768+
KatexSpanNode(
769+
styles: KatexSpanStyles(marginRightEm: 0.05017, fontFamily: 'KaTeX_Math', fontStyle: KatexSpanFontStyle.italic),
770+
text: 'B'),
771+
]),
772+
])),
773+
KatexVlistRowNode(
774+
verticalOffsetEm: -3.8033 + 3,
775+
node: KatexSpanNode(nodes: [
776+
KatexSpanNode(
777+
styles: KatexSpanStyles(borderBottomWidthEm: 0.04),
778+
nodes: []),
779+
])),
780+
]),
781+
]),
782+
]),
783+
]);
784+
785+
static final underline = KatexExample.block(
786+
r'underline: \underline{AB}',
787+
// https://chat.zulip.org/#narrow/channel/7-test-here/topic/Saif.20KaTeX/near/2285099
788+
r'\underline{AB}',
789+
'<p>'
790+
'<span class="katex-display"><span class="katex">'
791+
'<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><munder accentunder="true"><mrow><mi>A</mi><mi>B</mi></mrow><mo stretchy="true">‾</mo></munder></mrow><annotation encoding="application/x-tex">\\underline{AB}</annotation></semantics></math></span>'
792+
'<span class="katex-html" aria-hidden="true">'
793+
'<span class="base">'
794+
'<span class="strut" style="height:0.8833em;vertical-align:-0.2em;"></span>'
795+
'<span class="mord underline">'
796+
'<span class="vlist-t vlist-t2">'
797+
'<span class="vlist-r">'
798+
'<span class="vlist" style="height:0.6833em;">'
799+
'<span style="top:-2.84em;">'
800+
'<span class="pstrut" style="height:3em;"></span>'
801+
'<span class="underline-line" style="border-bottom-width:0.04em;"></span></span>'
802+
'<span style="top:-3em;">'
803+
'<span class="pstrut" style="height:3em;"></span>'
804+
'<span class="mord">'
805+
'<span class="mord mathnormal">A</span>'
806+
'<span class="mord mathnormal" style="margin-right:0.05017em;">B</span></span></span></span>'
807+
'<span class="vlist-s">​</span></span>'
808+
'<span class="vlist-r">'
809+
'<span class="vlist" style="height:0.2em;"><span></span></span></span></span></span></span></span></span></span></p>',[
810+
KatexSpanNode(nodes: [
811+
KatexStrutNode(heightEm: 0.8833, verticalAlignEm: -0.2),
812+
KatexSpanNode(nodes: [
813+
KatexVlistNode(rows: [
814+
KatexVlistRowNode(
815+
verticalOffsetEm: -2.84 + 3,
816+
node: KatexSpanNode(nodes: [
817+
KatexSpanNode(
818+
styles: KatexSpanStyles(borderBottomWidthEm: 0.04),
819+
nodes: []),
820+
])),
821+
KatexVlistRowNode(
822+
verticalOffsetEm: -3 + 3,
823+
node: KatexSpanNode(nodes: [
824+
KatexSpanNode(nodes: [
825+
KatexSpanNode(
826+
styles: KatexSpanStyles(fontFamily: 'KaTeX_Math', fontStyle: KatexSpanFontStyle.italic),
827+
text: 'A'),
828+
KatexSpanNode(
829+
styles: KatexSpanStyles(marginRightEm: 0.05017, fontFamily: 'KaTeX_Math', fontStyle: KatexSpanFontStyle.italic),
830+
text: 'B'),
831+
]),
832+
])),
833+
]),
834+
]),
835+
]),
836+
]);
734837
}
735838

736839
void main() async {
@@ -754,6 +857,8 @@ void main() async {
754857
testParseExample(KatexExample.bigOperators);
755858
testParseExample(KatexExample.colonEquals);
756859
testParseExample(KatexExample.nulldelimiter);
860+
testParseExample(KatexExample.overline);
861+
testParseExample(KatexExample.underline);
757862

758863
group('parseCssHexColor', () {
759864
const testCases = [

0 commit comments

Comments
 (0)