I have a simple matrix with some input fields that I created using MathML. It works fine in Firefox, but not in Chrome, and I would like to recreate the same thing using only HTML (table) and CSS, so that it works with a lot of browsers.
Here is a link to a screenshot of the intended effect, since I cannot send images: https://i.imgur.com/P2ICwSb.png
MathML working snippet:
input { width: 24px; background-color: transparent; border: 1px solid gray; font-family: serif; font-weight: bold; text-align: center; font-size: 16px; } input + input { margin-right: 2em; } input:first-child { margin-left: 1em !important; }
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <semantics> <mrow> <mo>(</mo> <mtable columnalign="center center center" rowspacing="1ex" displaystyle="false"> <mtr> <mtd> <mi> <input type="text"> </mi> </mtd> <mtd> <mi> <input type="text"> </mi> </mtd> <mtd> <mi> <input type="text"> </mi> </mtd> </mtr> <mtr> <mtd> <mi> <input type="text"> </mi> </mtd> <mtd> <mi> <input type="text"> </mi> </mtd> <mtd> <mi> <input type="text"> </mi> </mtd> </mtr> <mtr> <mtd> <mi> <input type="text"> </mi> </mtd> <mtd> <mi> <input type="text"> </mi> </mtd> <mtd> <mi> <input type="text"> </mi> </mtd> </mtr> </mtable> <mo>)</mo> </mrow> </semantics> </math>
My initial thought was to use the border-radius property and set the left and right borders in the table. The following is a working snippet, but I don’t like how the top and bottom of the brackets are compared to the MathML source code. The lines are noticeably thinner in the upper and lower parts of the matrix using the radius-radius approach and seem to “disappear”.
The first snippet of an attempt using <table> and border-radius :
input { width: 24px; background-color: transparent; border: 1px solid gray; font-family: serif; font-weight: bold; text-align: center; font-size: 16px; } input { margin-right: 1em; } td:first-child input { margin-left: 1em !important; } td:last-child input { margin-right: 1em !important; } table { border-left: 2px solid #000; border-right: 2px solid #000; border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; }
<table> <tbody> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> </tbody> </table>
I tried using 2D CSS transforms and the actual text to achieve the same effect, but it didn’t work out particularly well.
Experiment using CSS transforms and <table>:
input { width: 24px; background-color: transparent; border: 1px solid gray; font-family: serif; font-weight: bold; text-align: center; font-size: 16px; } input { margin-right: 1em; } td:first-child input { margin-left: 1em !important; } td:last-child input { margin-right: 1em !important; } table { display: inline-block; vertical-align: middle; } span { font-family: 'Latin Modern Math'; transform: scale(2, 4); font-size: 2em; display: inline-block; vertical-align: middle; }
<span>(</span> <table> <tbody> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> </tbody> </table><span>)</span>
Is it possible to more accurately map the original behavior of the MathML code? I was wondering if an SVG solution could be better.
I know that MathML code displays brackets using the Latin Modern Math font, but I'm not sure how I can stretch the brackets to surround the table (regardless of its contents).
source share