Fix display of math formula
This commit is contained in:
Yuriha
NoriDev
parent
38254c1c2a
commit
4f0010da2a
BIN
packages/frontend/assets/Temml.woff2
Normal file
BIN
packages/frontend/assets/Temml.woff2
Normal file
Binary file not shown.
BIN
packages/frontend/assets/latinmodernmath.woff2
Normal file
BIN
packages/frontend/assets/latinmodernmath.woff2
Normal file
Binary file not shown.
250
packages/frontend/src/Temml-Latin-Modern.css
Normal file
250
packages/frontend/src/Temml-Latin-Modern.css
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
/*
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2020 Ron Kok
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
/*
|
||||
The Latin Modern fonts are released under the GUST font license, which is
|
||||
legally equivalent to the LaTeX Project Public License. See the files in this
|
||||
directory for details. The fonts can be obtained from several TeX distributions
|
||||
or package managers.
|
||||
|
||||
The Latin Modern WOFF font has been obtained from
|
||||
http://www.gust.org.pl/projects/e-foundry/
|
||||
|
||||
The Temml.woff2 is a clone of KaTeX_Script-Regular, except that the code points
|
||||
have been changed from ASCII to Unicode Mathematical Alphanumeric Symbols Script capitals,
|
||||
Unicode range 1D49C to 1D4B5.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Temml';
|
||||
src: url('/assets/Temml.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Latin Modern Math;
|
||||
src: url('/assets/latinmodernmath.woff2');
|
||||
}
|
||||
|
||||
math {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
font-size-adjust: none;
|
||||
text-indent: 0;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
math * {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
math {
|
||||
font-family: "Latin Modern Math", "Times New Roman", math;
|
||||
}
|
||||
|
||||
*.mathscr {
|
||||
font-family: "Temml";
|
||||
}
|
||||
|
||||
mo.tml-prime {
|
||||
font-family: Temml;
|
||||
}
|
||||
|
||||
/* flex-wrap for line-breaking in Chromium */
|
||||
math {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
math > mrow {
|
||||
padding: 0.5ex 0ex;
|
||||
}
|
||||
|
||||
/* Avoid flex-wrap in Firefox */
|
||||
@supports (-moz-appearance:meterbar) and (display:flex) {
|
||||
math { display: inline; }
|
||||
math > mrow { padding: 0 }
|
||||
}
|
||||
|
||||
/* AMS environment auto-numbering via CSS counter. */
|
||||
.tml-eqn::before {
|
||||
counter-increment: tmlEqnNo;
|
||||
content: "(" counter(tmlEqnNo) ")";
|
||||
}
|
||||
|
||||
body {
|
||||
counter-reset: tmlEqnNo;
|
||||
}
|
||||
|
||||
/* Environment arrays */
|
||||
|
||||
/* Environments that addjot to row spacing */
|
||||
mtable.tml-jot > mtr > mtd {
|
||||
padding-top: calc(0.5ex + 0.09em);
|
||||
padding-bottom: calc(0.5ex + 0.09em);
|
||||
}
|
||||
|
||||
/* Zero column gap for {alignat}, {split}, etc */
|
||||
mtable.tml-abut > mtr > mtd,
|
||||
mtable.tml-align > mtr > mtd:nth-child(odd),
|
||||
mtable.tml-align-star > mtr > mtd:nth-child(even) {
|
||||
padding-left: 0em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
mtable.tml-align > mtr > mtd:nth-child(even),
|
||||
mtable.tml-align-star > mtr > mtd:nth-child(odd) {
|
||||
padding-left: 1em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
mtable.tml-align > mtr > mtd:nth-child(1) {
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
mtable.tml-align > mtr > mtd:nth-child(odd),
|
||||
mtable.tml-alignat > mtr > mtd:nth-child(odd),
|
||||
mtable.tml-aligned > mtr > mtd:nth-child(even) {
|
||||
text-align: -webkit-left;
|
||||
text-align: -moz-left;
|
||||
}
|
||||
|
||||
mtable.tml-align > mtr > mtd:nth-child(even),
|
||||
mtable.tml-alignat > mtr > mtd:nth-child(even),
|
||||
mtable.tml-aligned > mtr > mtd:nth-child(odd),
|
||||
mtable.tml-align-star > mtr > mtd:nth-child(odd) {
|
||||
text-align: -webkit-right;
|
||||
text-align: -moz-right;
|
||||
}
|
||||
|
||||
mtable.tml-cases > mtr > mtd {
|
||||
padding-left: 0em;
|
||||
padding-right: 0em;
|
||||
text-align: -webkit-left;
|
||||
text-align: -moz-left;
|
||||
}
|
||||
|
||||
mtable.tml-cases > mtr > mtd:nth-child(2) {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
mtable.tml-small > mtr > mtd {
|
||||
padding-top: 0.35ex;
|
||||
padding-bottom: 0.35ex;
|
||||
padding-left: 0.1389em;
|
||||
padding-right: 0.1389em;
|
||||
}
|
||||
|
||||
mtable.tml-subarray > mtr > mtd {
|
||||
padding-top: 0em;
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
mtable.tml-cd > mtr > mtd {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
||||
mtable > mtr:first-child > mtr > mtd {
|
||||
padding-top: 0em;
|
||||
}
|
||||
|
||||
mtable > mtr:last-child > mtr > mtd {
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
mtable:not(.tml-array) > mtr > mtd:first-child {
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
mtable:not(.tml-array) > mtr > mtd:last-child {
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
mtr.tml-top-solid > mtd {
|
||||
border-top: 0.06em solid;
|
||||
}
|
||||
|
||||
mtr.tml-top-double > mtd {
|
||||
border-top: 0.15em double;
|
||||
}
|
||||
|
||||
mtr.tml-top-dashed > mtd {
|
||||
border-top: 0.06em dashed;
|
||||
}
|
||||
|
||||
mtr.tml-hline-solid > mtd {
|
||||
border-bottom: 0.06em solid;
|
||||
}
|
||||
|
||||
mtr.tml-hline-double > mtd {
|
||||
border-bottom: 0.15em double;
|
||||
}
|
||||
|
||||
mtr.tml-hline-dashed > mtd {
|
||||
border-bottom: 0.06em dashed;
|
||||
}
|
||||
|
||||
/* MathML-Core does not support <menclose> attributes.
|
||||
* So Use background images for \cancel */
|
||||
menclose.cancel {
|
||||
background:
|
||||
linear-gradient(to top left,
|
||||
rgba(0,0,0,0) 0%,
|
||||
rgba(0,0,0,0) calc(50% - 0.06em),
|
||||
rgba(0,0,0,1) 50%,
|
||||
rgba(0,0,0,0) calc(50% + 0.06em),
|
||||
rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
menclose.bcancel {
|
||||
background:
|
||||
linear-gradient(to top right,
|
||||
rgba(0,0,0,0) 0%,
|
||||
rgba(0,0,0,0) calc(50% - 0.06em),
|
||||
rgba(0,0,0,1) 50%,
|
||||
rgba(0,0,0,0) calc(50% + 0.06em),
|
||||
rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
menclose.xcancel {
|
||||
background:
|
||||
linear-gradient(to top left,
|
||||
rgba(0,0,0,0) 0%,
|
||||
rgba(0,0,0,0) calc(50% - 0.06em),
|
||||
rgba(0,0,0,1) 50%,
|
||||
rgba(0,0,0,0) calc(50% + 0.06em),
|
||||
rgba(0,0,0,0) 100%),
|
||||
linear-gradient(to top right,
|
||||
rgba(0,0,0,0) 0%,
|
||||
rgba(0,0,0,0) calc(50% - 0.06em),
|
||||
rgba(0,0,0,1) 50%,
|
||||
rgba(0,0,0,0) calc(50% + 0.06em),
|
||||
rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import 'vite/modulepreload-polyfill';
|
||||
|
||||
import '@/style.scss';
|
||||
import 'temml/dist/Temml-Latin-Modern.css';
|
||||
import '@/Temml-Latin-Modern.css';
|
||||
import { mainBoot } from './boot/main-boot';
|
||||
import { subBoot } from './boot/sub-boot';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { VNode, h } from 'vue';
|
||||
import * as mfm from 'cherrypick-mfm-js';
|
||||
import * as Misskey from 'cherrypick-js';
|
||||
import temml from 'temml';
|
||||
import temml from 'temml/dist/temml.mjs';
|
||||
import MkUrl from '@/components/global/MkUrl.vue';
|
||||
import MkLink from '@/components/MkLink.vue';
|
||||
import MkMention from '@/components/MkMention.vue';
|
||||
|
|
@ -350,15 +350,15 @@ export default function(props: {
|
|||
}
|
||||
|
||||
case 'mathInline': {
|
||||
const ret = h('math');
|
||||
temml.render(token.props.formula, ret)
|
||||
return [ret];
|
||||
const ret = document.createElement('span');
|
||||
temml.render(token.props.formula, ret, {});
|
||||
return [h('span', { innerHTML: ret.innerHTML })];
|
||||
}
|
||||
|
||||
case 'mathBlock': {
|
||||
const ret = h('math');
|
||||
const ret = document.createElement('div');
|
||||
temml.render(token.props.formula, ret, { displayMode: true });
|
||||
return [ret];
|
||||
return [h('div', { innerHTML: ret.innerHTML })];
|
||||
}
|
||||
|
||||
case 'search': {
|
||||
|
|
|
|||
Loading…
Reference in a new issue