GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -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); $: [converted, title] = convertMathjax(mathjax, nightMode, fontSize);
$: empty = title === "MathJax"; $: empty = title === "MathJax";
$: encoded = encodeURIComponent(converted);
let encoded: string;
let imageHeight: number;
$: {
encoded = encodeURIComponent(converted);
setTimeout(() => {
imageHeight = image.getBoundingClientRect().height;
});
}
let image: HTMLImageElement; 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}" src="data:image/svg+xml,{encoded}"
class:block class:block
class:empty class:empty
style="--vertical-center: {-imageHeight / 2 + fontSize / 4}px;"
alt="Mathjax" alt="Mathjax"
{title} {title}
data-anki="mathjax" data-anki="mathjax"
@ -41,6 +52,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/> />
<style lang="scss"> <style lang="scss">
img {
vertical-align: var(--vertical-center);
}
.block { .block {
display: block; display: block;
margin: auto; 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; let title: string;
function getComponent(image: HTMLImageElement): HTMLElement { function getComponent(image: HTMLImageElement): HTMLElement {
return (image.closest("anki-mathjax")! as HTMLElement); return image.closest("anki-mathjax")! as HTMLElement;
} }
function onUpdate(event: CustomEvent) { function onUpdate(event: CustomEvent) {