GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Vertically center inline Mathjax

Browse source
This commit is contained in:
Henrik Giesel 2021-08-08 04:42:24 +02:00
parent c02973a85d
commit c8c9c64ea5
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ts/editable/Mathjax.svelte
View file

@ -18,7 +18,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: [converted, title] = convertMathjax(mathjax, nightMode, fontSize);
$: empty = title === "MathJax";
$: encoded = encodeURIComponent(converted);
let encoded: string;
let imageHeight: number;
$: {
encoded = encodeURIComponent(converted);
setTimeout(() => {
imageHeight = image.getBoundingClientRect().height;
});
}
let image: HTMLImageElement;
@ -34,6 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
src="data:image/svg+xml,{encoded}"
class:block
class:empty
style="--vertical-center: {-imageHeight / 2 + fontSize / 4}px;"
alt="Mathjax"
{title}
data-anki="mathjax"
@ -41,6 +52,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/>
<style lang="scss">
img {
vertical-align: var(--vertical-center);
}
.block {
display: block;
margin: auto;

2
ts/editor/MathjaxHandle.svelte
View file

@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let title: string;
function getComponent(image: HTMLImageElement): HTMLElement {
return (image.closest("anki-mathjax")! as HTMLElement);
return image.closest("anki-mathjax")! as HTMLElement;
}
function onUpdate(event: CustomEvent) {