Как создать таблицу уравнений с описаниями? - PullRequest
Новая
       36

Как создать таблицу уравнений с описаниями?

0 голосов
/ 30 августа 2018

Я хотел бы создать таблицу уравнений без полей, с нумерацией уравнений и выравниванием знаков равенства: image
Вместо знаков равенства я хотел бы вставить цветные и масштабированные символы Юникода, а именно: больший красный ⬌ (эквивалентность). Наконец, описания соответствуют уравнениям - предпочтительно справа.

Я пробовал центрировать уравнения, но знаки равенства и нумерации не совпадают, как предполагалось - и выравнивание одного или другого занимает определенный для строки интервал: 

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<center><p>
\([1]\hspace{63px} 1 + 2 = 3\)<br>
\([2]\ \ 1 + 3 + 5= 9 + 0\)
</p></center>

(Не удавалось добавлять описания без грязного кода.)

Как это можно сделать?

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

Вы должны изучить мощные возможности выравнивания mathjax (latex) 

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>

<p style="width:100%;text-align:center;">
\(\begin{alignat}{3}
&[1]\hspace{63px}&&&{3-2} &&\ = 1 \hspace{63px}&&\text {More arithmetic}
\\&[2]&&&{E} &&\ = mc^2 &&\text {Feel the energy}
\\&[3]&&&{x+1} &&\ \color{red}{\unicode{x2B0C}} 5 &&\text{description}
\end{alignat}\)
</p>

Редактировать 

.unicode{
  transform-origin:50% 50%;  
  transform:scale(1.6,1.5);
}
<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>


<p style="width:100%;text-align:center;">
\(\begin{alignat}{3}
 \\[2pt]\hline
&[1]\hspace{63px}&&&{3-2} &&\ = 1 \hspace{63px}&&\text {More arithmetic}
 \\[2pt]\hline
 &[2]&&&{E} &&\ = mc^2 &&\text {Feel the energy}
  \\[2pt]\hline
&[3]&&&{x+1} &&\ \color{red}{\class{unicode}{\unicode{x2B0C}}}\ 5 &&\text{description}
 \\[2pt]\hline
 \end{alignat}\)
</p>

Вы можете установить стиль текста с помощью \class{className} (но игра с размером шрифта создаст сдвиг, который вы должны исправить с помощью правил CSS. Я не уверен, что это то, что вам нужно), и вы можете отделить строки с помощью \hline (а затем отрегулируйте вертикальное пространство следующим образом: \\[2pt]\hline.

Как предложено в комментарии @Xufox, вы также можете изучить \array возможности для построения таблицы. Впрочем, возьми не то: https://math.meta.stackexchange.com/questions/2016/tabular-in-mathjax?answertab=active#tab-top (см. Также комментарий над вопросом о том, как использовать массив)

Поэтому, в зависимости от того, чего вы хотите достичь (например, что-то адаптивное), ваше решение может быть самым простым в настройке.

0 голосов
/ 30 августа 2018

Можно создать такую ​​таблицу с использованием HTML и CSS.

Начните с базовой таблицы, добавьте немного CSS, чтобы установить ширину таблицы, добавить границы и выровнять текст: 

table {width: 300px;border-collapse: collapse;}
table, td, th {border-bottom: 1px solid black;}
.ctr {text-align: center;}
.lft {text-align: right;}
.rgt {text-align: left}
<table>
    <tr><td>[1]</td>
    <td class="lft">3 - 2</td>
    <td class="ctr">=</td>
    <td class="rgt">1</td></tr>

    <tr><td>[2]</td>
    <td class="lft">4 + 1 - 3</td>
    <td class="ctr">=</td>
    <td class="rgt">6 - 4</td></tr>                                                     
</table>

LHS занимает гораздо больше места, чем RHS; чтобы выровнять его, добавьте встроенные стили только к верхнему столбцу : 
<tr><td style="width: 10%">[1]</td>
<td class="lft" style="width: 40%">3 - 2</td>
<td class="ctr" style="width: 10%">=</td>
<td class="rgt" style="width: 40%">1</td></tr>

<tr><td>[2]</td>
<td class="lft">4 + 1 - 3</td>
<td class="ctr">=</td>
<td class="rgt">6 - 4</td></tr>

[Выше результата] Чтобы расположить строки по вертикали, добавьте td {padding-top: 6px;} [Результат]
Чтобы добавить стилизованный Unicode, замените = на & #11020 ; (без пробелов) и измените .ctr на 

.ctr {text-align: center; line-height: 100%; font-size: 150%; color: red}

[Выше результата] (text-align: center выравнивает по вертикали символ с остальным текстом, после срыва из-за font-resize)

Завершая заголовок и описания, мы добавляем дополнительную строку и столбец и настраиваем ширину: 

<tr style="border-bottom: 1px solid black; font-weight: bold">
<td style="width: 10%">Eq</td>
<td class="lft" style="width:20%">LHS</td>
<td style="10%"></td>
<td class="rgt" style="width:20%">RHS</td>
<td>Description</td></tr>

<tr><td>[1]</td>
<td class="lft">3 - 2</td>
<td class="ctr">&#11020;</td>
<td class="rgt">1</td>
<td>More arithmetic</td>
</tr>

<tr><td>[2]</td>
<td class="lft">4 + 1 - 3</td>
<td class="ctr">&#11020;</td>
<td class="rgt">6 - 4</td>
<td>Wider arithmetic</td></tr>

[Выше результата] Чтобы убрать границы, удалите из CSS 

table, td, th {border-bottom: 1px solid black;}

И наконец, добавьте фантазию дальше, добавьте математическую библиотеку и определите новую команду, чтобы легко стилизовать перечисление: 

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<p style="display:none">\(\newcommand{b}[1]{\boldsymbol{[#1]}}\)</p>

Готовый продукт: 

table {
    width: 400px;
    border-collapse: collapse;   
}
table, td, th {border-bottom: 1px solid black;}
.ctr {text-align: center; line-height: 100%; font-size: 150%; color: red}
.lft {text-align: right;}
.rgt {text-align: left}
 td {padding-top: 6px;}
<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<p style="display:none">\(\newcommand{b}[1]{\boldsymbol{[#1]}}\)</p>

<table>

<tr style="border-bottom: 1px solid black; font-weight: bold">
<td style="width: 10%">\(Eq\)</td><td class="lft" style="width:18%">
LHS
</td><td class="ctr" style="width: 13%"></td><td class="rgt" style="width:20%">
RHS
</td><td>Description</td></tr>
   
<tr><td>\(\b{2}\)</td><td class="lft">
\(3 - 2\)
</td><td class="ctr">&#11020;</td><td class="rgt">
\(1\)
</td><td>More arithmetic</td></tr>
  
<tr><td>\(\b{4}\)</td><td class="lft">
\(E\)
</td><td class="ctr">&#11020;</td><td class="rgt">
\(mc^2\)
</td><td><i>FEEL THE ENERGY</i></td></tr>

</table>
(В качестве бонуса я переписал HTML для простоты; таким образом, LHS и RHS легко обнаруживаются и редактируются, а новые строки могут создаваться путем копирования / вставки блоков из пяти строк.)
... и мы сделали. Надеюсь, это полезно.

Теперь иди забей несколько математических таблиц.

ПРИМЕЧАНИЕ: См. Ответ scraaappy для более простой альтернативы с использованием массивов MathJax.

...