Description
Katex does server side rendering of latex files and outputs a html snippet.
A sample output is:
And its corresponding html is
<span class="katex-html" aria-hidden="true">
<span class="base">
<span class="strut" style="height:1.23692em;vertical-align:-0.25em;"></span>
<span class="mopen">(</span>
<span class="mopen">(</span>
<span class="mopen">(</span>
<span class="mord mathdefault" style="margin-right:0.03588em;">y</span>
<span class="mclose">
<span class="mclose">)</span>
<span class="msupsub">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height:0.664392em;">
<span style="top:-3.063em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mathdefault mtight" style="margin-right:0.03588em;">y</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="mclose">
<span class="mclose">)</span>
<span class="msupsub">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height:0.664392em;">
<span style="top:-3.063em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mathdefault mtight" style="margin-right:0.03588em;">y</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="mclose">
<span class="mclose">)</span>
<span class="msupsub">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height:0.9869199999999999em;">
<span style="top:-3.063em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mtight">
<span class="mord mtight">
<span class="mord mathdefault mtight" style="margin-right:0.03588em;">y</span>
<span class="msupsub">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height:0.8913142857142857em;">
<span style="top:-2.931em;margin-right:0.07142857142857144em;">
<span class="pstrut" style="height:2.5em;"></span>
<span class="sizing reset-size3 size1 mtight">
<span class="mord mtight">2</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="mbin mtight">−</span>
<span class="mord mtight">1</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="mspace" style="margin-right:0.2777777777777778em;"></span>
<span class="mrel">=</span>
<span class="mspace" style="margin-right:0.2777777777777778em;"></span>
</span>
<span class="base">
<span class="strut" style="height:0.64444em;vertical-align:0em;"></span>
<span class="mord">2</span>
<span class="mord">7</span>
</span>
</span>This html code has some classes which can be rendered with an external css from this CDN:
https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.css
I analysed this css file using word-frequency counter and luckily it uses very few (48) css style attributes:
These are the ones which occur more than once:
font-size, font-family, font-style, display, font-weight, src, position, width, text-align, overflow, right, left, padding, margin-right, border-bottom-style, min-width, margin-left, height, border, whitespace, vertical-align, stroke, min-height, margin, content, border-right
These are the ones which occur only once:
text-rendering, text-indent, table-layout, stroke-width, stroke-opacity, stroke-miter-limit, stroke-line-join, stroke-line-cap, stroke-dash-offset, stroke-dash-array, ms-high-contrast-adjust, max-width, max-height, line-height, font, fill-rule, fill-opacity, fill, clip, box-sizing, border-style, border-bottom-width.
It would be great if support for above css attributes can be added as it would mean, this library can be the first library to support latex on flutter without any serious performance lag.
Metadata
Metadata
Assignees
Labels
Projects
Status