# Typesetting the Dynkin Diagrams with MathJax

I just posted a question where I typeset the $E_6$, $E_7$, and $E_8$ Dynkin diagrams using MathJax:

E_6\; \begin{aligned} &\>\bullet \\[-1ex] &\,\,\mid \\[-1ex] \bullet-\bullet-&\bullet-\bullet-\bullet \end{aligned} \qquad E_7\; \begin{aligned} &\>\bullet \\[-1ex] &\,\,\mid \\[-1ex] \bullet-\bullet-&\bullet-\bullet-\bullet-\bullet \end{aligned} \qquad E_8\; \begin{aligned} &\>\bullet \\[-1ex] &\,\,\mid \\[-1ex] \bullet-\bullet-&\bullet-\bullet-\bullet-\bullet-\bullet \end{aligned}

It looks alright to me, by I'm worried the alignment will look off to users viewing the post with a different browser, or with different default fonts installed, etc. Is there a more reliable way to typeset the Dynkin diagrams with MathJax to guarantee that everything is aligned well regardless of browser settings?