Skip to content

Commit 5d2293e

Browse files
tneotiatneotia
committed
Final changes to MathML implementation
1 parent c0f5f93 commit 5d2293e

File tree

3 files changed

+247
-11
lines changed

3 files changed

+247
-11
lines changed

‎example/lib/main.dart

Lines changed: 236 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,242 @@ class _MyHomePageState extends State<MyHomePage> {
242242
),
243243
body: SingleChildScrollView(
244244
child: Html(
245-
data: htmlData,
245+
data: """
246+
<style type="text/css">table { border:1px solid #B96F00; margin-top:10px; margin-bottom:10px; background-color:white; }
247+
td { border:1px solid #B96F00; font-size: 12pt; padding:1 3 1 5; }
248+
</style>
249+
<div class="Lorem Ipsum" style="text-align: center;">Lorem Ipsum<br />
250+
Lorem Ipsum<br />
251+
Lorem Ipsum<br />
252+
&nbsp;<br />
253+
Lorem Ipsum</div>
254+
255+
<div style="text-align: center;"></div>
256+
&nbsp;&nbsp;
257+
258+
<div style="text-align: justify;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum<br />
259+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum,<br />
260+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum;<br />
261+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum;<br />
262+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum;<br />
263+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum.<br />
264+
<br />
265+
Lorem Ipsum</div>
266+
267+
<table>
268+
<tbody>
269+
<tr>
270+
<td rowspan="3" style="text-align: justify;">Lorem Ipsum<br />
271+
NO</td>
272+
<td colspan="6" nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
273+
</tr>
274+
<tr>
275+
<td colspan="2" nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
276+
<td nowrap="nowrap" rowspan="2" style="text-align: justify;">Lorem Ipsum</td>
277+
<td nowrap="nowrap" rowspan="2" style="text-align: justify;">Lorem Ipsum</td>
278+
<td rowspan="2" style="text-align: justify;">Lorem Ipsum <br />
279+
</td>
280+
<td rowspan="2" style="text-align: justify;">Lorem Ipsum</td>
281+
</tr>
282+
<tr>
283+
<td style="text-align: justify;">Lorem Ipsum</td>
284+
<td style="text-align: justify;">Lorem Ipsum</td>
285+
</tr>
286+
<tr>
287+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
288+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
289+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
290+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
291+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
292+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
293+
<td style="text-align: justify;">Lorem Ipsum</td>
294+
</tr>
295+
<tr>
296+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
297+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
298+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
299+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
300+
<td nowrap="nowrap" style="text-align: justify;">14.01.2021</td>
301+
<td nowrap="nowrap" style="text-align: justify;">260</td>
302+
<td style="text-align: justify;">Lorem Ipsum</td>
303+
</tr>
304+
<tr>
305+
<td nowrap="nowrap" style="text-align: justify;">3</td>
306+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
307+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
308+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
309+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
310+
<td nowrap="nowrap" style="text-align: justify;">200,00</td>
311+
<td style="text-align: justify;">Lorem Ipsum</td>
312+
</tr>
313+
<tr>
314+
<td nowrap="nowrap" style="text-align: justify;">4</td>
315+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
316+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
317+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
318+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
319+
<td nowrap="nowrap" style="text-align: justify;">648,00</td>
320+
<td style="text-align: justify;">Lorem Ipsum</td>
321+
</tr>
322+
<tr>
323+
<td nowrap="nowrap" style="text-align: justify;">5</td>
324+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
325+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
326+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
327+
<td nowrap="nowrap" style="text-align: justify;">09.09.2020</td>
328+
<td nowrap="nowrap" style="text-align: justify;">300,00</td>
329+
<td style="text-align: justify;">Lorem Ipsum</td>
330+
</tr>
331+
<tr>
332+
<td nowrap="nowrap" style="text-align: justify;">6</td>
333+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Lorem Ipsum</td>
334+
<td nowrap="nowrap" style="text-align: justify;">-</td>
335+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
336+
<td nowrap="nowrap" style="text-align: justify;">15.11.2019</td>
337+
<td nowrap="nowrap" style="text-align: justify;">16.262,33</td>
338+
<td style="text-align: justify;">Lorem IpsumLorem Ipsum</td>
339+
</tr>
340+
<tr>
341+
<td nowrap="nowrap" style="text-align: justify;">7</td>
342+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
343+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
344+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
345+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
346+
<td nowrap="nowrap" style="text-align: justify;">100,00</td>
347+
<td style="text-align: justify;">Lorem Ipsum</td>
348+
</tr>
349+
<tr>
350+
<td nowrap="nowrap" style="text-align: justify;">8</td>
351+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
352+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
353+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
354+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
355+
<td nowrap="nowrap" style="text-align: justify;">760,00</td>
356+
<td style="text-align: justify;">Lorem Ipsum</td>
357+
</tr>
358+
<tr>
359+
<td nowrap="nowrap" style="text-align: justify;">9</td>
360+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
361+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
362+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
363+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
364+
<td nowrap="nowrap" style="text-align: justify;">380,00</td>
365+
<td style="text-align: justify;">Lorem Ipsum</td>
366+
</tr>
367+
<tr>
368+
<td nowrap="nowrap" style="text-align: justify;">10</td>
369+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
370+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
371+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
372+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
373+
<td nowrap="nowrap" style="text-align: justify;">320,00</td>
374+
<td style="text-align: justify;">Lorem Ipsum</td>
375+
</tr>
376+
<tr>
377+
<td nowrap="nowrap" style="text-align: justify;">11</td>
378+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum.</td>
379+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
380+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
381+
<td nowrap="nowrap" style="text-align: justify;">17.02.2020</td>
382+
<td nowrap="nowrap" style="text-align: justify;">10.029.107,40</td>
383+
<td style="text-align: justify;">Lorem IpsumLorem Ipsum.</td>
384+
</tr>
385+
<tr>
386+
<td nowrap="nowrap" style="text-align: justify;">112</td>
387+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
388+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
389+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
390+
<td nowrap="nowrap" style="text-align: justify;">11.01.2021</td>
391+
<td nowrap="nowrap" style="text-align: justify;">220,00</td>
392+
<td style="text-align: justify;">Lorem Ipsum</td>
393+
</tr>
394+
</tbody>
395+
</table>
396+
397+
<div style="text-align: justify;">&nbsp;<br />
398+
Lorem Ipsum</div>
399+
400+
<table>
401+
<tbody>
402+
<tr>
403+
<td nowrap="nowrap" rowspan="3" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
404+
<td colspan="6" nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum / Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
405+
</tr>
406+
<tr>
407+
<td colspan="2" nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
408+
<td nowrap="nowrap" rowspan="2" style="text-align: justify;">Lorem Ipsum</td>
409+
<td nowrap="nowrap" rowspan="2" style="text-align: justify;">Lorem Ipsum</td>
410+
<td nowrap="nowrap" rowspan="2" style="text-align: justify;">Lorem Ipsum Lorem Ipsum<br />
411+
(TL)</td>
412+
<td rowspan="2" style="text-align: justify;">Lorem Ipsum</td>
413+
</tr>
414+
<tr>
415+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum/Lorem Ipsum - Lorem Ipsum</td>
416+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum/Lorem Ipsum/<br />
417+
Lorem Ipsum</td>
418+
</tr>
419+
<tr>
420+
<td nowrap="nowrap" style="text-align: justify;">1</td>
421+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum<br />
422+
Lorem Ipsum Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.</td>
423+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
424+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
425+
<td nowrap="nowrap" style="text-align: justify;">02.10.2020</td>
426+
<td nowrap="nowrap" style="text-align: justify;">318</td>
427+
<td style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
428+
</tr>
429+
<tr>
430+
<td nowrap="nowrap" style="text-align: justify;">2</td>
431+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
432+
<td nowrap="nowrap" style="text-align: justify;">_</td>
433+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum<br />
434+
Lorem Ipsum</td>
435+
<td nowrap="nowrap" style="text-align: justify;">17.09.2020 25.09.2020</td>
436+
<td nowrap="nowrap" style="text-align: justify;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 520</td>
437+
<td style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
438+
</tr>
439+
<tr>
440+
<td nowrap="nowrap" style="text-align: justify;">3</td>
441+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum</td>
442+
<td nowrap="nowrap" style="text-align: justify;">_</td>
443+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
444+
<td nowrap="nowrap" style="text-align: justify;">17.01.2019</td>
445+
<td nowrap="nowrap" style="text-align: justify;">136.402,64</td>
446+
<td style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
447+
</tr>
448+
<tr>
449+
<td nowrap="nowrap" style="text-align: justify;">4</td>
450+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
451+
<td nowrap="nowrap" style="text-align: justify;">_</td>
452+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
453+
<td nowrap="nowrap" style="text-align: justify;">17.01.2019</td>
454+
<td nowrap="nowrap" style="text-align: justify;">55.745,56</td>
455+
<td style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
456+
</tr>
457+
<tr>
458+
<td nowrap="nowrap" style="text-align: justify;">5</td>
459+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
460+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
461+
<td nowrap="nowrap" style="text-align: justify;">Lorem Ipsum</td>
462+
<td nowrap="nowrap" style="text-align: justify;">09.01.2020</td>
463+
<td nowrap="nowrap" style="text-align: justify;">584.589,34</td>
464+
<td style="text-align: justify;">Lorem Ipsum/Lorem Ipsum Lorem Ipsum</td>
465+
</tr>
466+
</tbody>
467+
</table>
468+
469+
<div style="text-align: justify;">&nbsp;<br />
470+
&nbsp;<br />
471+
&nbsp;
472+
<style type="text/css">.Lorem Ipsum {
473+
text-align:center;
474+
font-size:16pt !important;
475+
column-span:all;
476+
font-weight:bold;
477+
}
478+
</style>
479+
</div>
480+
""",
246481
//Optional parameters:
247482
customImageRenders: {
248483
networkSourceMatcher(domains: ["flutter.dev"]):

‎lib/src/replaced_element.dart

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import 'package:flutter_html/src/widgets/iframe_unsupported.dart'
1111
if (dart.library.io) 'package:flutter_html/src/widgets/iframe_mobile.dart'
1212
if (dart.library.html) 'package:flutter_html/src/widgets/iframe_web.dart';
1313
import 'package:flutter_html/style.dart';
14-
import 'package:flutter_math/flutter_math.dart';
14+
import 'package:flutter_math_fork/flutter_math.dart';
1515
import 'package:flutter_svg/flutter_svg.dart';
1616
import 'package:html/dom.dart' as dom;
1717
import 'package:video_player/video_player.dart';
@@ -267,13 +267,13 @@ class RubyElement extends ReplacedElement {
267267

268268
class MathElement extends ReplacedElement {
269269
dom.Element element;
270-
String texStr;
270+
String? texStr;
271271

272272
MathElement({
273273
required this.element,
274-
required this.texStr,
274+
this.texStr,
275275
String name = "[[MathElement]]",
276-
}) : super(name: name, alignment: PlaceholderAlignment.middle, style: Style(display: Display.INLINE));
276+
}) : super(name: name, alignment: PlaceholderAlignment.middle, style: Style());
277277

278278
@override
279279
Widget toWidget(RenderContext context) {
@@ -283,13 +283,15 @@ class MathElement extends ReplacedElement {
283283
return Padding(
284284
padding: const EdgeInsets.only(bottom: 3.5),
285285
child: Container(
286-
width: element.localName == "math" ?
286+
width: element.localName == "math" || element.parent!.localName == "body" ?
287287
MediaQuery.of(context.buildContext).size.width : null,
288288
child: Math.tex(
289-
texStr,
289+
texStr ?? '',
290+
mathStyle: element.parent!.localName != "body" ? MathStyle.text : MathStyle.display,
291+
textStyle: context.style.generateTextStyle(),
290292
onErrorFallback: (FlutterMathException e) {
291293
if (context.parser.onMathError != null) {
292-
return context.parser.onMathError!.call(texStr, e.message, e.messageWithType);
294+
return context.parser.onMathError!.call(texStr ?? '', e.message, e.messageWithType);
293295
} else {
294296
return Text(e.message);
295297
}
@@ -428,7 +430,6 @@ ReplacedElement parseReplacedElement(
428430
case "math":
429431
return MathElement(
430432
element: element,
431-
texStr: r'',
432433
);
433434
case "tex":
434435
return MathElement(

‎pubspec.yaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ dependencies:
2929
chewie_audio: ^1.2.0
3030

3131
# Plugins for rendering the <svg> tag.
32-
flutter_svg: ^0.20.0-nullsafety.3
32+
flutter_svg: ^0.21.0-nullsafety.0
3333

3434
# Plugin for rendering MathML
35-
flutter_math: ^0.3.0-nullsafety.1
35+
flutter_math_fork: ^0.3.0+1
3636

3737
flutter:
3838
sdk: flutter

0 commit comments

Comments
 (0)