# Can I left align MathJax blocks?

**URL:** <https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959>\
**Category:** Card Design\
**Created:** [June 3, 2026, 5:11am UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959 "2026-06-03T05:11:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mason](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mason](https://forums.ankiweb.net/u/mason)\
**Post date:** [June 3, 2026, 5:11am UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/1 "2026-06-03T05:11:44Z")

</div>

I never use MathJax block mode because my flashcards are left aligned, so it looks weird when the equation is way out in the middle. I am forced to use [$$][/$$] cuz at least it follows my alignment, but I don’t like that I don’t get a preview in my editor. I’m wondering if there is any way to style the MathJax with CSS.

---

<div class="post-metadata">

**Author:** ![Eltaurus](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/eltaurus/32/10287_2.png) [@Eltaurus](https://forums.ankiweb.net/u/Eltaurus)\
**Post date:** [June 3, 2026, 8:51am UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/2 "2026-06-03T08:51:32Z")

</div>

> [@mason](#):
>
> I’m wondering if there is any way to style the MathJax with CSS.

MathJax renders into regular html, so of course there is. The exact rules depend on your current template layout and styling though, so you’ll need to share those. If it is close to the default note type, you can just try changing `text-align` to `left` in the `.card` container.

---

<div class="post-metadata">

**Author:** ![ZornHadNoChoice](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/zornhadnochoice/32/28874_2.png) [@ZornHadNoChoice](https://forums.ankiweb.net/u/ZornHadNoChoice)\
**Post date:** [June 3, 2026, 1:47pm UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/3 "2026-06-03T13:47:21Z")

</div>

Add this to the styling:

```css
mjx-container {
  text-align: left ! important;
}

```

---

<div class="post-metadata">

**Author:** ![mason](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mason](https://forums.ankiweb.net/u/mason)\
**Post date:** [June 3, 2026, 7:38pm UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/4 "2026-06-03T19:38:40Z")

</div>

Thanks! Is there any way I can see the raw HTML of the final card? I don’t mean the HTML in the editor you can get with Ctrl+Shift+X, I mean the HTML of the final rendered card, that would have let me see the `mjx-container` element.

---

<div class="post-metadata">

**Author:** ![mason](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mason](https://forums.ankiweb.net/u/mason)\
**Post date:** [June 3, 2026, 7:42pm UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/5 "2026-06-03T19:42:15Z")

</div>

Also, I’d like to point out that for some reason this styling only takes place on the rendered card, it does not happen in my editor preview. Applying the same CSS to `anki-mathjax` does not change this, and that was my only guess as to how to do it.

---

<div class="post-metadata">

**Author:** ![Eltaurus](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/eltaurus/32/10287_2.png) [@Eltaurus](https://forums.ankiweb.net/u/Eltaurus)\
**Post date:** [June 3, 2026, 8:01pm UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/6 "2026-06-03T20:01:18Z")

</div>

> [@mason](#):
>
> Is there any way I can see the raw HTML of the final card?

You can use [the webview inspector add-on](https://ankiweb.net/shared/info/31746032).

---

<div class="post-metadata">

**Author:** ![ZornHadNoChoice](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/zornhadnochoice/32/28874_2.png) [@ZornHadNoChoice](https://forums.ankiweb.net/u/ZornHadNoChoice)\
**Post date:** [June 3, 2026, 11:54pm UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/7 "2026-06-03T23:54:09Z")

</div>

If you’re lazy like me and don’t want to use that addon, use something like this:

```html
<div id=t>{{Front}}</div>

<script>
var e = document.getElementById("t");

setTimeout(() => {
e.innerText = e.innerHTML;
}, 500)
</script>

```

As for the editor, I think you need addons to modify it’s styling. I’d not bother since it makes it easier to spot block math while editing.

---

<div class="post-metadata">

**Author:** ![Eltaurus](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/eltaurus/32/10287_2.png) [@Eltaurus](https://forums.ankiweb.net/u/Eltaurus)\
**Post date:** [June 4, 2026, 12:18am UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/8 "2026-06-04T00:18:39Z")

</div>

One more option is to use

```auto
<script>
if (!document.getElementById("eruda")) {
  const scriptL = document.createElement("script");
  scriptL.src = "https://cdn.jsdelivr.net/npm/eruda";
  scriptL.onload = () => eruda.init();
  document.head.appendChild(scriptL);
}
</script>

```

which injects a fully-functioning debug console into a card itself (and works on every platform, although requires active internet connection).

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [July 4, 2026, 12:18am UTC](https://forums.ankiweb.net/t/can-i-left-align-mathjax-blocks/69959/9 "2026-07-04T00:18:46Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.