Can I make this little table of diagrams better than ASCII graphics?

Question

In my question How can one recognize when two Coxeter diagrams represent the same uniform polytope?, I have a simple table into which I want to put three little Coxeter diagrams. Here are the three little diagrams, which I created in SVG and converted to PNG to show here:

If I were writing this in HTML, I'd now just make a <table> element and put the <svg> elements inside it. But, according to the "What HTML tags are allowed on StackExchange sites" post:

We do not (and will not) allow <table> tags. Sorry. This is intentional and by design. If you need a quick and dirty "table", use <pre> and ASCII layout.

So I followed that suggestion, and made a quick and dirty "table", using <pre> and ASCII graphics instead of my nice SVGs, and, sadly, that's what's currently in my post. It's small, so I'll include it here:

 Case             Coxeter diagram  Vertex configuration
+----------------+----------------+--------------------+
|                |       r        |                    |
| 1 ringed node  |     *---*      |     (p.q)r          |
|                |     p\ /q      |                    |
|                |      (*)       |                    |
+----------------+----------------+--------------------+
|                |       r        |                    |
| 2 ringed nodes |    (*)-(*)     |     p.2r.q.2r      |
|                |     p\ /q      |                    |
|                |       *        |                    |
+----------------+----------------+--------------------+
|                |       r        |                    |
| 3 ringed nodes |    (*)-(*)     |     2p.2q.2r       |
|                |     p\ /q      |                    |
|                |      (*)       |                    |
+----------------+----------------+--------------------+

Is that as good as it gets? I'd sure like it to look more polished.

Here are some pieces that could be useful building blocks, but unfortunately each of these are either non-robust or incompatible with each other, so I still don't see a good solution.

• I know I can draw a nice table in MathJax using {array}. But I can't put my SVGs, nor images, inside that.

• I would be happy to recreate my three little diagrams in MathJax instead of SVG, if I knew how. The most promising example I could find is this answer. But unfortunately the comments there reveal that that method gives poor results in some browsers.

• I could certainly render an HTML <svg>s-in-a-<table> in a browser and take a screenshot, and include that as an image in my post, but that would hurt accessibility.

Is there any good way to polish my post? Or is <pre> and ASCII the pinnacle of the technology available for this?

Answer 1

In your special case we can get away with the built-in \triangledown to represent the lines connecting each vertex. We can also make use of \odot to represent each ringed node:

$$\begin{array}{ccc}\hline\text{Case}&\text{Coxeter diagram}&\text{Vertex configuration}\\\hline\text{1 ringed node}&{}^{\boldsymbol p}\hspace{-0.15cm}{\Huge\triangledown}_{\hspace{-0.81cm}\boldsymbol{\Large\odot}}^{\hspace{-0.85cm}\bullet\,^{\\[2pt]\,\Large\boldsymbol r}\hspace{0.1cm}\bullet}\hspace{-0.2cm}^{\boldsymbol q}&(p\cdot q)^r\\\\\text{2 ringed nodes}&{}^{\boldsymbol p}\hspace{-0.15cm}{\Huge\triangledown}_{\hspace{-0.81cm}\bullet}^{\hspace{-0.9cm}\boldsymbol{\Large\odot}^{\Large\boldsymbol r}\boldsymbol{\Large\odot}}\hspace{-0.3cm}^{\boldsymbol q}&p\cdot2r\cdot q\cdot2r\\\\\text{3 ringed nodes}&{}^{\boldsymbol p}\hspace{-0.15cm}{\Huge\triangledown}_{\hspace{-0.81cm}\boldsymbol{\Large\odot}}^{\hspace{-0.9cm}\boldsymbol{\Large\odot}^{\Large\boldsymbol r}\boldsymbol{\Large\odot}}\hspace{-0.3cm}^{\boldsymbol q}&2p\cdot2q\cdot2r\\\hline\end{array}\\\text{Table 1: Coxeter diagrams using} \,\texttt{hspace}\,\text{magic}$$

The code is very far from neat as I had to use \hspace to format the nodes and the positions of $p,q,r$, but this should be somewhat expected as MathJax hasn't really been built for this. Hence I suspect this method will also affect display on mobile browsers. FWIW I’ve just tried viewing this on iOS and the table looks okay, though some of the nodes are misaligned slightly.

An easier and more user-friendly way, as per Martin's suggestion in the comments, is to directly insert the images in a table in MathJax: $$\require{HTML}\newcommand{\mypic}[4][]{\style{display: inline-block;background: url(https://i.sstatic.net/#4) no-repeat center;#1}{\phantom{\Rule{#2}{#3}{0px}}}}\begin{array}{ccc}\hline\text{Case}&\text{Coxeter diagram}&\text{Vertex configuration}\\\hline\text{1 ringed node}&\mypic{40px}{40px}{hVoci.jpg}&(p\cdot q)^r\\\text{2 ringed nodes}&\mypic{40px}{40px}{nDAmp.jpg}&p\cdot2r\cdot q\cdot2r\\\text{3 ringed nodes}&\mypic{40px}{40px}{k26a3.jpg}&2p\cdot2q\cdot2r\\\hline\end{array}\\\text{Table 2: Coxeter diagrams using images}$$

MathJax used in Table 1 is as follows:

$$
\begin{array}{ccc}\hline
\text{Case}&\text{Coxeter diagram}&\text{Vertex configuration}\\\hline
\text{1 ringed node}&{}^{\boldsymbol p}\hspace{-0.15cm}{\Huge\triangledown}_{\hspace{-0.81cm}\boldsymbol{\Large\odot}}^{\hspace{-0.85cm}\bullet\,^{\\[2pt]\,\Large\boldsymbol r}\hspace{0.1cm}\bullet}\hspace{-0.2cm}^{\boldsymbol q}&(p\cdot q)^r\\\\
\text{2 ringed nodes}&{}^{\boldsymbol p}\hspace{-0.15cm}{\Huge\triangledown}_{\hspace{-0.81cm}\bullet}^{\hspace{-0.9cm}\boldsymbol{\Large\odot}^{\Large\boldsymbol r}\boldsymbol{\Large\odot}}\hspace{-0.3cm}^{\boldsymbol q}&p\cdot2r\cdot q\cdot2r\\\\
\text{3 ringed nodes}&{}^{\boldsymbol p}\hspace{-0.15cm}{\Huge\triangledown}_{\hspace{-0.81cm}\boldsymbol{\Large\odot}}^{\hspace{-0.9cm}\boldsymbol{\Large\odot}^{\Large\boldsymbol r}\boldsymbol{\Large\odot}}\hspace{-0.3cm}^{\boldsymbol q}&2p\cdot2q\cdot2r\\\hline\end{array}\\
\text{Table 1: Coxeter diagrams using} \,\texttt{hspace}\,\text{magic}
$$

MathJax used in Table 2 is as follows:

$$
\require{HTML}\newcommand{\mypic}[4][]{\style{display: inline-block;background: url(https://i.sstatic.net/#4) no-repeat center;#1}{\phantom{\Rule{#2}{#3}{0px}}}}
\begin{array}{ccc}\hline\text{Case}&\text{Coxeter diagram}&\text{Vertex configuration}\\\hline
\text{1 ringed node}&\mypic{40px}{40px}{hVoci.jpg}&(p\cdot q)^r\\
\text{2 ringed nodes}&\mypic{40px}{40px}{nDAmp.jpg}&p\cdot2r\cdot q\cdot2r\\
\text{3 ringed nodes}&\mypic{40px}{40px}{k26a3.jpg}&2p\cdot2q\cdot2r\\\hline\end{array}\\
\text{Table 2: Coxeter diagrams using images}
$$

Addendum (as per OP's request): The method of inserting the images was taken from the answer to How to Post Pictures in an Array/Table, on MSE, with MathJax. One caveat is that it may not be completely portable in that some browsers may not provide the intended display.

Answer 2

Instead of using MathJax you can create your table in TeX and then export it as an image to insert into your post. It will display faster and uniformly in all browsers but won't scale since it is a raster image. See https://tex.stackexchange.com/questions/11866/compile-a-latex-document-into-a-png-image-thats-as-short-as-possible for exporting a document as PNG.